Public Forums 71,145 posts

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1081184

Hi,

Is it possible to change the bullet point colour separately to the text colour?
We want to change the bullet point colour to: #4A5FA4.

Please see image in the following post.

Please advise.

Thanks

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1081186

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1081389

Hi @romolo,

You can try with this custom CSS:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red;
}

and change red to your desired color.

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#1081465

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1081467

That’s my suggestion for general case. If you want to apply for specific block in specific page, you can add extra class for that block (or page class if you want to style for page).

I just did the same on above page: http://prntscr.com/hntc74

.jub-block.spotlight-1.extraList > ul {
list-style: none;
padding: 0;
margin: 0;
}

.jub-block.spotlight-1.extraList > li {
padding-left: 1em; 
text-indent: -.7em;
}

.jub-block.spotlight-1.extraListli::before {
content: "• ";
color: #4A5FA4;
}

You can see that it’s applied to spotlight block only now.

Cheers!

[Author]

Posts