[Resolved] inline CSS being overwritten

Home Forums Support [Resolved] inline CSS being overwritten

Home Forums Support inline CSS being overwritten

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2213498
    William

    Hi, I am having a problem with Inline CSS getting overwritten (I thought it always had priority).

    Some of my post titles display over two lines in the sidebar, so I am trying to add a circle in front of each title.

    Using Firefox Web Developer Tools, I navigated to that element on the page.
    When I add the two CSS lines below to the element in Web Developer Tools, it works just they way I want.
    margin-left: 0;
    list-style: circle;

    This is what I want; which is also what I get entering the CSS into Web Developer Tools
    https://w-f-m.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-08-at-18.07.56.png

    Below is the code which appears under Changes in Web Developer Tools, which I pasted into Additional CSS for the theme.
    .wp-block-latest-posts__list {
    margin-left: 0;
    list-style: circle;
    }

    Unfortunately, as you can see from this screenshot the “list-style: circle;” gets overwritten and so is ignored.
    https://w-f-m.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-08-at-18.10.56.png

    Can you tell me please how to get the “list-style: circle;” to work?

    Kind regards,
    William

    #2213559
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the page in question?

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know πŸ™‚

    #2213758
    William

    Hi Leo, Many thanks for such a quick response. Here is an example page of the inline CSS getting overwritten.

    https://w-f-m.com/wisdom-and-forgiveness/

    Kind regards,

    William

    #2213849
    David
    Staff
    Customer Support

    Hi there,

    you can try this:

    .wp-block-latest-posts.wp-block-latest-posts__list {
        margin-left: 0;
        list-style: circle;
    }

    or specifically for styling the list in the sidebar:

    .sidebar .wp-block-latest-posts__list {
        margin-left: 0;
        list-style: circle;
    }
    #2214004
    Longinos

    Hi William

    Thats how css works. The last rule applied wins. Inlined styled has preference if set in an html element as attribute.
    !importance and specifity supersedes the order in what rules are applied.
    Specifity: Doing what David tell you.

    #2215907
    William

    David: I so appreciate the support on here. πŸ™‚
    Its clear, to the point, and even adds some options.

    Longinos: “!importance and specifity supersedes the order in what rules are applied.” I had not understood that till now. Thank you too. πŸ™‚

    #2215949
    David
    Staff
    Customer Support

    Glad we could be of help!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.