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

Question

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

Chu Dam · Answer

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.

Chu Dam · Answer

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.

Lara Arthur_1bhb1s · Answer

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.