Top HR Line Only to be thicker and red

  • Unknown's avatar
    crosskeyarchitects · Member ·

    Please refer to this link:
    https://crosskeydotcom.wordpress.com/portfolio/woodbury-old-town-hall/

    We are trying to have the first hr line, underneath the “Woodbury Old Town Hall” title to be a thicker, red line. The line beneath should remain as is. Can you please provide a code for this?

    Thank you very much!

    The blog I need help with is crosskeydotcom.wordpress.com.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    starxedsteph · Member ·

    Hi there!

    The first thing you will want to do is assign an id to that particular element. You can do that by navigating to your post editor and clicking the text tab.

    Once there, change the horizontal line html code to include the id by replacing

    <hr />

    with 

    <hr id="red-line"/>

    Then we can use the following CSS code to make those changes. 

    hr#red-line {
    height: 3px;
    color: #ff0000;
    background-color: #ff0000;
    border: none;
}

    For a different thickness of line, vary the height number. You can also replace the color hex code to any shade of red you prefer. You can refer to this color picker for different hex codes: http://www.w3schools.com/tags/ref_colorpicker.asp

  • Unknown's avatar
    crosskeyarchitects · Member ·

    Worked perfect, Thank you so much Steph

  • Unknown's avatar
    crosskeyarchitects · Member ·

    Please refer to this link:https://crosskeydotcom.wordpress.com/about/

    We are looking to add a hr line similar to the blog page, similar to the about page shown above. The blog page was set up a bit differently due to the template we are using, so we are having some trouble.

    Also, we are looking to use the same line in the featured works pages underneath all of the titles. Can you shed some light on what we will need to do to resolve this?

    Thank you!

  • supernovia · Staff ·

    Hi @crosskeyarchitects, I hope you don’t mind me jumping in to help.

    To clarify, are you hoping to get that thick red line on all of the pages, just below the title of the page? If so, maybe this would work better:

    .entry-title {
 border-style: solid;
 border-width: 0 0 3px 0;
 border-color: #cc0000;
 width: 100%;
}

    It’s not an HR, but it looks more or less like one. With this code, it would appear below the title of any page or post, so you would also want to remove the HRs on existing pages. Let us know if you need more help!

  • The topic ‘Top HR Line Only to be thicker and red’ is closed to new replies.