Viewing 2 replies - 1 through 2 (of 2 total)
  • My links are set to automatically appear in a different colour, and as bold and underline.

    That’s coming from the following two blocks of CSS code you added in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS:

    p a {
        font-weight: bold;
    }
    
    p a {
        text-decoration: underline;
    }

    The code is simply saying, wherever there’s a link inside a paragraph, apply these styles. And as lists are (technically) not paragraphs, the above style does not affect links in lists.

    So we need to adapt the code to include lists. But there are two kinds of lists: ordered lists (numbering) with the code <ol> and unordered lists (bullets) with the code <ul>— and we need to account for list items (<li>) in both cases. Oh, and while we’re at it, let’s optimize the code by combining the two blocks into just one. So we’ll end up with:

    p a, ul li a, ol li a {
    font-weight: bold;
    text-decoration: underline;
    }

    That should work, but with a caveat.

    The caveat is that this will affect, not just the lists in the post you write, but other “disguised” lists as well. Here, I’m referring to other parts of your site that you may not consider to be lists, but, under the hood, they’re using the code for lists. Examples are the top horizontal menu, the vertical drop-down submenus, and the “Recent Posts” in your right sidebar.

    If you’re feeling a bit experimental, you can apply the above code (remove the two you added earlier) to see the effect.

    To address this caveat, we can tweak the code a little bit to ONLY affect the links inside the “content” section of your page, and nowhere else. So the final result becomes:

    #josephine-content p a, #josephine-content ul li a, josephine-content ol li a {
    font-weight: bold;
    text-decoration: underline;
    }

    PLEASE NOTE:

    • The above code should replace the two blocks of code shown at the top of my response.
    • Note that the code is still covering only paragraphs and lists. If you want it to cover all links in a post (eg links in captions below images), kindly let me know and I can tweak the code for you.
    • Apply the code, and test different sections of your site thoroughly to be sure the styles apply to all the areas you care about, and nowhere else. If you find any undesired effects anywhere, please let me know so I can tweak the code further.

    Standing by for feedback!

    Thread Starter sallyrodrick

    (@sallyrodrick)

    Thankyou SO much George for taking the time to clearly and simply explain all of that. I appreciate it so much and you made it very easy to understand.

    I have removed the old 2 pieces of CSS and inserted your combined code. And it works perfectly! I’ve had a thorough around a number of posts and pages to check, and it’s exactly what I was hoping to achieve – so thankyou very very much! I appreciate it a lot.

    Any ideas on manually reducing spacing above a bulleted list? Or is that just way too complicated to ask?

    Thanks again, Sally

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Formatting of Lists’ is closed to new replies.