How do you edit Divider size and color?

[abeljq]

From what I can see, the only options for editing a Divider are changing the width and margins. Is there any way to edit the vertical height and color of the dividing bar?

[bobafett]

@abeljq:  You can do that via editing the css file or just create an image of the dider and stick it in.

[Jeffy]

That's ridiculous

[Clint1 · Accepted solution]

Use this HTML code (place Embed Code element where you want the divider line to be)

<div id="divider" style="background-color:#441468; height: 5px; width:100%;"></div>

Substitute the hex color code shown here with a color you want.

[Mariocp]

Excelent

Thanks a lot for your tip!

[viragored]

Editing custom code is just Perfect! Thanks so much, Clint 🙂

[Maenad]

Why is this not as simple as editing text color. Absurd to have to edit code in a platform like Weebly.

[marketinggoetti]

Thank you very much Clint! Helped perfectly!!!!

[Godmera]

Ok so I have two sites, I went into the CSS file and changed the color on both. One changed the other did not, the only difference was one was a light version of the theme, the other a dark version. The light one I had to edit the CSS anyway to make it dark (wanted the particular color) so tried editting the line color. Any reason why one worked the other didn't.

[RusticOldGal1]

Where do you find it in CSS?

I don't see any style_hr in my CSS code.

If it is not in there, where and what do I add to make all divider lines on my site change color and thickness?

Thanks in advance.

[whitemonkey]

you  add the code as embed element.   drag that element to the page  past the code provided

[mcrksman]

---

@RusticOldGal wrote:

Where do you find it in CSS?

I don't see any style_hr in my CSS code.

If it is not in there, where and what do I add to make all divider lines on my site change color and thickness?

Thanks in advance.

---

I couldn't find it either so i just added this at the bottom of the header.html file where all my other overrides are. To make it thicker just change the 1px to however many px you want. To change the color just replace the #ddd part in both border and background color to the color code of your choice. If you want to change the width but you don't want it to be centered you can use the float:left or float:right line.

<style>
.styled-hr{
float:left !important;
border: 1px solid #ddd !important;
background-color: #ddd !important;
}</style>

[MarijkeD]

This worked a treat! Thanks a lot!!

[Joe]

Glad you found a solution here, @MarijkeD - feel free to reach out if anything else comes up!

[weebly2]

How do you change the top and bottom margins using that technique?

[Bernadette3]

Which technique are you referring to, @weebly2? There's quite a few comments on this thread. Thanks! 

[PattyTrajko]

This is excellent advice - thank you.

[Bernadette3]

I'm not sure what the reason would be, but there are users on here that may be able to help. Can you please post the site name and code that was changed? Thanks!