Docs

[AnnaKuhl]

Hi there

I have text and bulleted lists on this page. If you scroll down to “2. Engagement” you can see I’m attempting to make the text body as well as the bulleted lists white, but am failing miserably.

I want everything in there to be white, but I only want any global CSS changes to be applicable to only this page as everywhere else I want the ul colours to remain as they are.

Any help would be appreciated.

Cheers!

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.page-id-1117 .entry-content li {
	color: #fff;
}

The page-id there make sure that this css block will only apply on that specific page.

Hope it helps, Cheers!

[AnnaKuhl]

Thank you so much, Friech! Worked perfectly.

Fantastic help as always Themeco. 🙂

[AnnaKuhl]

Actually, another question sorry . . . As we’ve got multiple bullet point lists on the page, would there be a simple way to make some white and some the standard grey of the rest of the site? Is there an easy way to do this with the text box styling? Or can it only be done through the Customiser CSS?

Cheers!

[Lely]

Hello Anna,

We can use of class so it will only affect where you add the class:

<ul class="custom-list-one">
<li>Choose a Workable Wellness presentation topic that can then be tailored to your specific needs and objectives.</li>
<li>The goal of this event is to engage and inspire participants to take small realistic steps to improve their overall wellness…at work and in life.</li>
<li>You can expect willing interaction, immediate implementation and long-lasting inspiration.</li>
<li>Event will include handouts, a 5 day mini-challenge and feedback forms.</li>
</ul>

<ul class="custom-list-two">
<li>Discus the recommendations for your new wellness design program.</li>
<li>Prioritise the changes that will have the greatest impact.</li>
<li>Provide you with documents and resources to present the business case for a better wellness program to your senior management.</li>
<li>Suggestions on how to implement the changes successfully.</li>
</ul>

Then your CSS will be like this:

.custom-list-one li {
   color: #fff;
}
.custom-list-two li {
   color: #ddd;
}

As long as we add the class to the ul element, changes in color will take effect regardless of the page.
Then we have to remove this:

.page-id-1117 .entry-content li {
     color: #fff; 
}

Hope this helps.

[AnnaKuhl]

That’s fantastic! Thank you soooooo much. 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts