[Right Angle SParticipant]

Hi there,

Here is a link to the site in question:
http://www.lessonbox.co.uk/

We have two questions regarding changing bullet points:

Question 1
Is it possible to have a different colour for two sets of bullet points within the same page? For example, we would like to have one set of bullet points in one paragraph to be orange and the set of bullet points in the paragraph below to be blue?

Question 2
Is it possible to change the icon used for a bullet point? We would like to change the point of the bullet point to a tick, is that possible?

Thank you very much in advance for all of your help.

[Paul RModerator]

Hi,

1. Yes it’s possible. You can add a unique class to your list

eg.

<ul class="orange-list">
    <li>Lorem Ipsum</li>
</ul>

You can then make that list orange by adding this css code in your custom > css

.orange-list li {
    color:orange;
}

You can do the same for blue

<ul class="blue-list">
    <li>Lorem Ipsum</li>
</ul>

You can then make that list orange by adding this css code in your custom > css

.blue-list li {
    color:blue;
}

2. You can do the same as above, add a class to your list

eg.

<ul class="tick-list">
    <li>Lorem Ipsum</li>
</ul>

then add this in your child theme’s style.css

.tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Hope that helps.

[Right Angle SParticipant]

Thank you for this.

Will it be possible to assign the bullet point ticks to a certain page within the site, rather than making it a site wide change?

Thanks again for your help.

[ZeshanMember]

Hi Right,

Yes, you can add the provided CSS code in your Cornerstone page settings under Settings > Custom CSS (see: http://prntscr.com/7fp5q0). If you have added the CSS in the Customizer, you can use a unique page ID to apply it to a specific page only. For example, the code would become:

.page-id-123 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Replace 123 with your page’s unique ID. You can locate the page ID by following our this KB article: https://theme.co/community/kb/how-to-locate-post-ids/

Thanks!

[Right Angle SParticipant]

Thanks for this.

Here is the page that we would like to add the tick bullet points to:
http://www.lessonbox.co.uk/holding/

We’ve added the below code to the customiser but instead of the bullet point, there is a ‘f00c’ appearing instead of the tick.

.page-id-1421 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Please see the screenshot below:

How can we fix this?

Thank you.

[ThaiModerator]

Hi There,

Please update your custom CSS code to this code:

.page-id-1421 .tick-list li:before {
   content:"\\f00c";
   font-family:FontAwesome;
}

Or adding your CSS code to style.css file locates in your child theme folder:

.page-id-1421 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Hope it helps.

[Right Angle SParticipant]

Thanks for this.

This has now got the ticks on the page but the bullet point’s are also still there and the ticks are in black.

Could we remove the bullet point so just the tick is displayed? Could we also display the left ticks in blue and the right ticks in orange as previously mentioned above?

Thanks again.

[ThaiModerator]

Hi There,

#1 Try adding the following CSS:

ul.tick-list {
    list-style: none;
}
.page-id-1421 .tick-list li:before {
    margin-right: 5px;
}

#2 Then remove the semicolon(;) from the class field:

If it doesn’t work, please provide us with your admin account so we can take a closer look.

Don’t forget to set your reply as private!

Thanks.

[Right Angle SParticipant]

That’s fixed it thank you

With the new tick bullet point, they appear to have lost the indent that usually occurs when you place text into a bullet point arrangement. Normally the bullet points are aligned in one vertical line and then the text for each bullet point is aligned in an adjacent vertical line therefore when a bullet point text goes onto two lines it still aligns will the rest of the text and not the bullet point itself.

Is it possible to apply this to our new tick bullet points?

Please see the images below to clarify.

Here is the existing bullet point ticks:

Here is how we wish to have the bullet point ticks:

To match all an existing normal bullet point layout:

Thanks again for your help.

[ThaiModerator]

Hi There,

Please update this CSS code a bit:

+ Change:

.page-id-1421 .tick-list li:before {
    margin-right: 5px;
}

+ To:

.page-id-1421 .tick-list li:before {
    margin-right: 5px;
    margin-left: -18px;
}

Hope it helps.

[Right Angle SParticipant]

That’s it! Thank you very much.

We’d also like to add it to the following page:
http://www.lessonbox.co.uk/lessonbox-cloud/

However, when we add the adjusted code to the customiser, we only have the ‘f00c’ appear. How can we fix this?

Here is the code we have added to the customiser to achieve the same appearance as the previous page (http://www.lessonbox.co.uk/holding/):

.page-id-1599 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}
ul.tick-list {
    list-style: none;
}
.page-id-1599 .tick-list li:before {
    margin-right: 5px;
    margin-left: -18px;
}

Thanks again for your help.

[ChristopherModerator]

Hi there,

Customizer removes \ each time you update and save customizer, to prevent this please add your code in child theme’s style.css file.

Thanks.

[Right Angle SParticipant]

I’ve tried adding the code to the style.css within my child theme but this causes the entire website layout to change and loses all structure and obviously we don’t want that to happen!

Is there another way to achieve the ticks on both pages?

Thanks again.

[Paul RModerator]

Hi,

Please add the code below in your child theme’s style.css.

.page-id-1421 .tick-list li:before,
.page-id-1599 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Then remove the code in your custom > css that reads

.page-id-1421 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

and

.page-id-1599 .tick-list li:before {
   content:"\f00c";
   font-family:FontAwesome;
}

Thanks

[Right Angle SParticipant]

Thanks for this, how can we customise this code to globally change the bullet points to the ticks?

We would like to add it to the style.css rather than the customiser.

Thank you.

[Author]

Posts