Navigation
Archive / HR Line Color
This is archived content. Visit our new forum.
  • Author
    Posts
  • March 30, 2015 at 4:50 am #237927

    DavidBee
    Participant

    I have a standard text block on solid black. I’ve added color: #ffffff; to the inline CSS but this is not applied to the HR.

    How do I get around this?

    Thanks,

    David.

    March 30, 2015 at 4:53 am #237928

    Christopher
    Moderator

    Hi there,

    You need to add border-color:#ffffff; to change its color.

    Thanks.

    March 30, 2015 at 5:02 am #237936

    DavidBee
    Participant

    Hi,

    Added that but the HR hasn’t changed. This is the inline CSS now;

    color: #ffffff; border-color:#ffffff;

    Is that correct?

    Thanks,

    David

    March 30, 2015 at 5:07 am #237943

    Zeshan
    Member

    Hi David,

    In that case, please provide us with your URL so that we can take a closer look to your setup and provide you with a tailored response.

    Thanks!

    March 30, 2015 at 5:25 am #237953

    DavidBee
    Participant
    This reply has been marked as private.
    March 30, 2015 at 5:36 am #237971

    Zeshan
    Member

    Hi David,

    Upon checking, the styling is not being applied to the HR lines. So, instead of using default HR lines, please use [line] shortcode. That way you can simply apply your custom colors using style attribute. So, the shortcode should be:

    [line style="border-color: #fff;"]

    Hope this helps. 🙂

    Thank you.

    March 30, 2015 at 6:10 am #238007

    DavidBee
    Participant
    This reply has been marked as private.
    March 30, 2015 at 6:35 am #238014

    Zeshan
    Member

    Hi David,

    Upon checking, there are some instances of HTML code tags that’s causing these gaps (see: http://prntscr.com/6n7mgv). Please remove them and the issue should be resolved. You can also switch to Text tab to find and remove those tags.

    Thanks!

    April 1, 2015 at 11:12 am #239989

    DavidBee
    Participant

    Thanks, that worked. Is it possible to control the height of the line?

    Regards,

    David.

    April 1, 2015 at 11:27 am #240007

    Thai
    Moderator

    Hi There,
    Try adding following CSS under Appearance > Customize > Custom > CSS:

    
#x-content-band-21 .x-hr {
margin: 0.5em 0;
}

    Hope it helps.

    April 1, 2015 at 11:48 am #240039

    DavidBee
    Participant

    Hi, that reduced the line spacing but not HR.

    is there anything else I can try?

    Regards,

    David.

    April 1, 2015 at 12:10 pm #240071

    Christian
    Moderator

    Hey David,

    Please add the code below in your Appearance > Customize > Custom > CSS.

    hr {
  border-top: 4px solid red;
  border-bottom: 3px solid blue;
}

    Please adjust the px values. That will also take effect sitewide. For individual HRs, you can use

    [line style="border-top: 4px solid red; border-bottom: 3px solid blue;"]

    instead of the border color.

    Hope that helps. 🙂

  • Author
    Posts