On Confluence PDF export, how can I change the color of bullets?
Asked by 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: ![IT Notice screen shot.PNG](https://community.atlassian.com/t5/image/serverpage/image-id/237407i4EEAA4C5311665D3/image-size/large?v=v2&px=999 "IT Notice screen shot.PNG")

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


Answers:
author: Dam
body: Hi [@Lara Arthur](/t5/user/viewprofilepage/user-id/1153969)

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

comments: author: Lara Arthur
body: Hi there [@Dam](/t5/user/viewprofilepage/user-id/722152) 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.


author: Lara Arthur
body: 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.


author: Dam
body: Hi [@Lara Arthur](/t5/user/viewprofilepage/user-id/1409243)

\> 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.


author: Dam
body: Hi [@Lara Arthur](/t5/user/viewprofilepage/user-id/1153969)

Did you see my previous message?

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

Regards,  
Dam.


Tags: confluence-server

data-center

server