Add CSS bullet points for text block in Genesis Sample Theme

[Doug]

Setup:
Latest version of WordPress and Genesis Sample Theme

I'm wanting to add CSS bullet points to a block of text in Gutenberg. It's a Google Fonts block, and there aren't any options to add them in the settings, thus the CSS angle.

In my example, on the page below, I'm trying to add square bullets to the lines starting with "-" in the gray area titled "Site Analytics":
https://dougschumacher.com/portfolio/enterprise-saas-software-ux-design/

To try to accomplish that, I created a name for the CSS class ('bullitt') and entered it into the above-referenced text block's Advanced CSS section.

Then I added the following code into Customize > Additional CSS:

.bullitt ul {
  list-style-type: square;
}

I thought that would add the square bullet points to any text block where I enter 'bullitt' into its Advanced CSS text field.

However, in my case, that's not working.

I've assessed the code around that text block with Inspect, both before and after adding 'bullitt', and I'm not seeing where 'bullitt' is in the code. I'm not that familiar with CSS so not sure if that's of significance.

Any input or guidance on what I might have wrong would be greatly appreciated.

Thx
doug

https://dougschumacher.com/portfolio/enterprise-saas-software-ux-design/

[Brad Dalton]

This will work if you add the HTML correctly.

Your list container needs to be wrapped in a ul tag and each list item needs to be wrapped in the li tag

<ul>
	<li>list one</li>

	<li>list two</li>
</ul>

Then you can use CSS to style your list.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad. Sorry for the delay -- I'm not getting the reply notifications for some reason.

I've tried the HTML approach, but it's not working.

I'm using the Google Fonts block, and the HTML option isn't functioning properly, so I'm having to try doing this with a CSS class. Something I presume I create in the "Customize > CSS" section, and then apply that class to the "Advanced CSS" for each text block I'd like the list in.

I'm just not sure how to set up the CSS class properly in the Customize area.

[Brad Dalton]

You can add a class directly to your HTML

<ul class="my-list">

Sounds like the problems with the CSS.

Link to your live site please.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks for your input.

The HTML input box doesn't function on the Google Fonts. I'm not sure why, but it has a lot of fiddly issues.

The plugin doesn't support CSS Classes, either, so I'm going to have to wait until their scheduled update kicks in.

thx
doug

[Author]

Posts