Create borders sides different colors?

I Need Help
#1

Hello!

For a header banner I’m using a class dialog for a bloc and trying to have a purple 15pxl border on top and an orange 15pxl border on the bottom.

The system forces both top and bottom borders to be the same color.

How do I get around this?

Thanks!

#2

Hi @cerveau

You have a couple of options

  1. Create 2 Custom classes and add them. One for the top border and one for the bottom.
  2. Add some CSS in the page header.

I would suggest you go with option 1 as the easiest.

#3

Thank you @Malachiman,

I had tried option 1 prior to posting here, but it didn’t work.
Meaning, I would change only one border in “class1” but then both borders would change to the same color… likewise when editing class2… hence my posting the question.

If you can get option 1 to work then I wonder if there is some other setting in Blocs or css thing I’m missing.

I figured I can change the code manually in a text editor later if I struggle too much within Blocs, but it would be nice to do it quickly and easily in Blocs.

Thanks again!
Philip

#4

Yes you’re correct it won’t, sorry that was my mistake. I did think about that afterwards, and realise if wasn’t going to work, because the way the class manage works.

This should work though, rename the class to anything you want, and obviously change the colours to suit your design.

<style>
.colorborder {
 border: solid;
 border-width: 15px 0 15px 0;
 border-color: purple black orange;
}
</style>
#5

U da Man!!!

Can your solution be done within Blocs?.
Or is this basically your Option 2 and I have to do this with an external editor?

I’m thinking of putting this in as a feature request to improve Blocs.
(which I like very much, btw)

Cheers,

#6

You can’t do it in blocs at this stage, that I can see.

Blocs is great, it can’t do every possibility out of the box that people want, but it’s also very flexible, to be able to do anything you want.

And yes, post in the wish list your suggestion.

1 Like