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

Lara Arthur January 5, 2023

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

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

 

1 answer

0 votes
Dam
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
February 1, 2023

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 February 1, 2023

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 February 1, 2023

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
February 1, 2023

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
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
February 14, 2023

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. 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events