[Resolved] styling bullets

[dale]

Found another (actual) issue with this (corrected) CSS today. It inserts the bullet replacement between the Share icons at the bottom of posts pages. Example on: https://www.janellereston.com/all-about-romance-reviews-best-womens-erotica-vol-2/

[Tom]

Yep, your CSS will apply to all un-ordered lists in your content, which includes things like social icons if that’s how they set up their HTML.

If you’d like to link me to that page, I should be able to give you some CSS so the icons ignore it.

[dale]

http://www.janellereston.com/commongayboy-mexico-legalized-same-sex-marriage/

[Leo]

Try this:

.inside-article .sharedaddy .sd-content li:before {
    content: none;
}

[dale]

Perfect! Worked great. Thanks!

[Leo]

You’re welcome!

[André]

Two clarifying questions about styling bullets in the main body/content area only.

I want to increate the space between list items so that it matches paragraphs (margin-bottom: 1.5em).

This works:

.inside-article li { margin: 0 0 1.5em 0; }

… but it doesn’t when sections are used.

But this does work for sections:

.content-area li { margin: 0 0 1.5em 0; }

Is .content-area the correct way to target bullets in the body content only? And it there no one CSS styling that’ll work for both sections and non-sections?

That’s the first question.

Other little issue is in trying to change unordered lists from the default “circle” to square.

Now the opposite seems to be the case. This works for section content only:

.entry-content ul { list-style-type: square; }

… but for post/page content when sections aren’t used, ul reverts to “circle” for unordered bullets.

Thanks!

André

[Leo]

Hi there,

Can you link me to the site/pages in questions?

Feel free to start a new topic if you want to use the private URL field 🙂

Thanks!

[André]

Hey Leo,

Okay, I’ve setup these example pages:

Example: Bullets
https://tinylittlebusinesses.com/bullets-vosewaz/

Example: Bullets w/ Sections
https://tinylittlebusinesses.com/bullets-sections-vosewaz/

Both are displaying correctly – square bullets for unordered lists and correct list item spacing (1.5em).

However, the custom CSS is different for sections and non-sections. Below is our custom CSS:

.entry-content ul {
list-style-type: square; /* square bullets non-sections */
}

.inside-article li {
margin: 0 0 1.5em 0; /* non-sections */
}

.content-area ul {
list-style-type: square; /* square bullets sections */
}

.content-area li {
margin: 0 0 1.5em 0; /* sections */
}

No doubt I’m doing something wrong. How can I use one set of CSS for both sections and non-sections?

André

[Leo]

Ahh sections don’t have .entry-content and .inside-article.

However the CSS you currently use for sections should work for both sections and normal layout though.

[André]

Leo, ah yes – that worked, thx 🙂

So what is content-area vs .entry-content vs .inside-article?

Do you guys have a visual template map of what CSS classes effect what?

[Leo]

They are just classes they are attached to each type of template (sections vs non-sections).

Try right clicking on the outer edge of the container and use the developer tool then you should be able to see each class and the associate CSS with them 🙂

[André]

Leo, roger that. Thx dude.

[Leo]

Glad I could help!

[Author]

Posts