Horizontal Line in the "Affinity" theme

  • Unknown's avatar
    photoimagessite · Member ·

    I am new to CSS. The horizontal line in the Affinity theme is very thin and light. It can’t be seen on a white background. What is the CSS code for a thicker horizontal line, color black? Right now the color is a very light taupe, almost white.

    I came across this which seems a bit long. Can someone validate that this is correct? Being new at CSS, I don’t know if I should just put anything into the style sheet without knowing it’s correct. And if I ever put something in that is incorrect will just deleting it be sufficient to restore it to the default?

    hr {
    display: block;
    position: relative;
    padding: 0;
    margin: 8px auto;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    clear: both;
    border: none;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #ffffff;
    }

    Thanks in advance.

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

  • Unknown's avatar
    micawbr · Member ·

    To identify elements on a page, you can use your browser’s web inspector tool. Here’s the guide for that: https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Here’s a screenshot of the inspector (in Firefox) used on a test site with the Affinity theme: https://cloudup.com/c-BjO7YlW6Y

    I’ve marked the two lines (top) and their corresponding CSS (lower right).

    The code you posted was for modifying an HR tag, but in the Affinity theme, the lines are borders on an element not a horizontal rule so it would have no effect. To change the lines you only need to modify the particular parts that you want to be different (in this case thickness and color). Here’s the CSS to make each line 1px thicker and change the color to black: 

    .comment-navigation, .posts-navigation, .post-navigation {
	border-top: 4px solid #000000;
	border-bottom: 2px solid #000000;
}

    This is the result: https://cloudup.com/iBmp8rybOpc

    Regarding your question about resetting the CSS to the default, yes, just remove the parts you added in the CSS box in the Customizer and that will undo the changes.

    If you’re interested in learning more about CSS, this staff post includes a number of links to helpful resources: https://en.forums.wordpress.com/topic/learning-about-css-1

  • Unknown's avatar
    photoimagessite · Member ·

    Oh my goodness. Thank you so much for that well-written, easy to understand, and comprehensive response. Easy to understand is key because although I know very basic html, I have never looked at or touched CSS.

    When I used the CSS that you gave, it changed something other than what I wanted, so it turns out that I posted CSS for the wrong element. I posted border, as opposed to a horizontal “hr” line.

    When I scanned the page, I saw that the CSS that you provided did indeed work on the borders. I removed the CSS and the borders went back to the default. I then looked at the link you provided with regard to locating an element in a page. I followed the video, made the change and I could see it change in real time, so I knew I had the right element. Then copied and pasted into the CSS customizer.

    I cannot believe how easy it was to do. I know that building style sheets is a complicated area that requires expertise and lots of training, but at least I now know that I can make simple changes to the well-executed and complicated work done by the designers.

    Again, thank you so much. Your help was really appreciated.

  • Unknown's avatar
    micawbr · Member ·

    You’re welcome. I’m glad to hear that worked for you.

  • The topic ‘Horizontal Line in the "Affinity" theme’ is closed to new replies.