page divider code.

  • 1
  • Question
  • Updated 9 years ago
  • Answered
hi wats the code to make a lne on the page (it needs colour & size customization)

i need it for my site :0

Alex
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
  • happy

Posted 9 years ago

  • 1
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Hi Aex,

You can use css to style your hr tag, here's and examle css:

<!--

<style type="text/css">

hr {

color: #FF2E0C;
background-color: #FF2E0C;
height: 5px;
}

</style>

-->

Add this in a html widget on the page then wherever you put the <!-- <hr> --> tag it will look for the css and use it.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
im trying it now :)
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
Here's more things you can style:

<!--

hr {
border: 0;
width: 80%;
}

-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it works thanks!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
how do i make it so that there is no padding around it?
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Alex,

What you can also do is use a text widget and hold down the shift key and press the dash button, this will create a line. You can then use the Edit Toolbar to highlight the line and change the color or make it thicker. Just another idea!

Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
One more option is:

<!--<div style="background:transparent; border-top:1px solid #666142; width:900px;"></div>-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
but wait!
how can i get rid of the padding space that surrounds it?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I don't think you can Alex.. it's inherent. you can try adding padding:0px to the code and see if that changes anything.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
nope it didnt work :(
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm sorry.. I think you're going to have to accept that it has a bit of padding around it. Hopefully you can still make this work.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay :)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
hey!

can i have some more help,
how can i have one that runs down the page?

Alex
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Alex this is my personal favorite code - Just change the height and width to make it horizontal or vertical and change the color accordingly,

<!--
<center><div style="width: 1px; height: 20px; background-color: rgb(59, 89, 152);"></div></center>
-->

Lee.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks lee!

im goint to try it.