- This topic has 6 replies, 4 voices, and was last updated 3 years, 10 months ago by
David.
-
AuthorPosts
-
May 8, 2022 at 10:36 am #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.pngBelow 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.pngCan you tell me please how to get the “list-style: circle;” to work?
Kind regards,
WilliamMay 8, 2022 at 1:24 pm #2213559Leo
StaffCustomer SupportHi 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-informationLet me know 🙂
May 8, 2022 at 11:40 pm #2213758William
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
May 9, 2022 at 1:10 am #2213849David
StaffCustomer SupportHi 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; }May 9, 2022 at 4:34 am #2214004Longinos
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.May 11, 2022 at 12:31 am #2215907William
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. 🙂
May 11, 2022 at 1:18 am #2215949David
StaffCustomer SupportGlad we could be of help!
-
AuthorPosts
- You must be logged in to reply to this topic.