On Confluence PDF export, how can I change the color of bullets?

[Lara Arthur]

Hello Atlassian Community,

I am working on converting a Word template (we normally save as a PDF file once it is completed) over to Confluence.

I've set up the PDF Export Stylesheet with the correct formatting, but am having an issue with one item.

Currently I have a table within a Panel. This table has bullets. I've been able to change the format of the bullet from a circle to a square but have been unable to change the color of said bullet. See screen shot below: 

My write-up is as follows...

.wiki-content ul
{
     list-style-type: square;
     list-style-color: #1F3864;
     font-family: ConfluenceInstalledFont, Helvetic, Arial, sans-serif;
     font-size: 10px;
     word-wrap: normal;
}

Has anyone run into this issue before and have a solution?

Any help is appreciated.--Lara

[Dam]

Hi @Lara Arthur 

did you try with this: 

.wiki-content ul li::before {
  color: #1F3864;
}

According to https://www.w3schools.com/howto/howto_css_bullet_color.asp this is the way to change the color of bullets of a list item... 

It should be something like that... :) 

I hope this will help a bit.

Cheers,
Dam

[Lara Arthur]

Hi there @Dam I have tried just 

color: #1F3864; 

as well and am at my wits end!  Not sure if it has something to do with it being a table inside a panel? I've gotten everything else to work perfectly...

I just tried adding the 'li::before' as you suggested but that turned my square bullets back to circles.

Thanks for the suggestion though! It looks like it is one or the other. I can either change the color and keep it round or change the style type, but not both.

[Lara Arthur]

I tried adding this:

ul {
list-style: none; /* Remove default bullets */
}

ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: red; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1.09em; /* Also needed for space (tweak if needed) */
margin-left: -1.09em; /* Also needed for space (tweak if needed) */
list-style-type: square; 
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; 
font-size: 12px; 
word-wrap: normal; 
}

.wiki-content ul {

list-style-type: square; 
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; 
font-size: 10px; 
word-wrap: normal; 
}

and it gives me a black square with a round red bullet hovering over top of it.

If I take away the .wiki-content ul, then I just get a round red bullet...the list style type will not carry over to square.

[Dam]

Hi @Lara Arthur 

> the list style type will not carry over to square.

Did you try to use the !important flag on it? it can help to force a css style... here is the detail about that: https://www.w3schools.com/css/css_important.asp

> Not sure if it has something to do with it being a table inside a panel?

Yes i think so... I'm not a CSS expert but because the table is within a panel then you should normally refer to it using the proper css order... Something like: panel id or class > table id or class > ul > li 

Again I'm happy to help. 
You are not far from a perfect solution I think with the !important tag ;) 

Cheers,
Dam.

[Dam]

Hi @Lara Arthur 

Did you see my previous message? 

I'm not sure cause I think I mentioned another user with the same name... 

Regards,
Dam.