How to change the rectangular icon of individual tasks in the task list?

IPRP September 6, 2019

Hi, the gray color of the rectangular icon of individual tasks in the task list is so weak that these rectangular icons can hardly be recognized on the screen in the browser. When printing the page, these task icons are almost invisible.
Therefore, I want to reinforce the grey border and have renamed the icon "checkbox-24-normal-press.png" in the directory "[...]/confluence/images/icons/taskboxes" on the server with the icon "checkbox-24-normal-hover.png" (and renamed it 'checkbox-24-normal-press.png').
Unfortunately, there have been no effects in the browser in Confluence, not even after deleting the chache and not even after restarting the Confluence server.
So far: Is the icon "checkbox-24-normal-press.png" the right icon at all? - Or can you please tell me the exact filename of the task list icon that is displayed by default (and if I can simply replace it with another icon)?
Many thanks and best regards

1 answer

0 votes
Stephen Sifers
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
September 9, 2019

Hello Kamueller,

Thanks for coming to Community with your concept of changing the checkbox color within a task list in Confluence server. To first address the issue with printing the checkboxes, there is an open bug for this which may be found at CONFSERVER-29702. If this is the issue you’re seeing we would suggest you vote and watch this request for updates.

As for the checkbox color you’re wanting to edit, this will be controlled via the CSS that is within the page. Editing the png image as you attempted will not alter the rendering of the pages checkbox. We would suggest working with a web developer to add custom CSS to your Confluence instance which will allow you to granularly control the checkbox colors. More on this can be found at Styling Confluence with CSS. You may also apply a style to PDF exports of Confluence pages which will also allow you to modify how the checkboxes look, more on this can be found at Customize Exports to PDF.

I hope this information proves helpful and you’re able to find what you need to start customizing Confluence.

Regards,
Stephen Sifers

IPRP September 17, 2019

Hi,

…. O.K. thanks. Regarding editing the checkbox color: But whats’s the NAME of the checkbox in css?

We would like to change the content of the relevant css file on the server so that we can change the checkbox of a task list via css by default.  Since there are VERY many *.css files: Can you please tell us which is the relevant ccs file - and the "name" of the task list checkbox in the css file - to change the color of a task list checkbox? Because it is also confusing, because in connection with "task" and/or "chexbox" in css there are also "sprite" files (...).

Thank you very much for a helpful answer.

Best Regards

Alex

Stephen Sifers
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
September 17, 2019

Hello Kamueller,

We would suggest against replacing files for your Confluence server as this would firstly not be supported and secondly cause issues if you needed to load Confluence within safe mode without modifications along with issues during upgrades. We would suggest using the styling guides to adjust the look and feel of Confluence, to include the checkbox boxes.

As for the element, depending on what you’re wanting to accomplish the element to CSS stylesheet will be different. Since this is also for a server product there may be slight differences between versions thus an example may not work depending on your version or add-ons you have enabled. This will also apply to the PDF exports as those will use a different stylesheet template.

We would suggest working with a web developer to explore what needs to be updated and the best approach to accomplish this.

Regards,
Stephen SIfers

IPRP September 17, 2019

O.K. we are here the technical department and web developer. So, you can simply tell us the css-NAME (and relevant parameters) of the checkbox of the task list so that we can change the color of the taslist checkbox
(1) either rewrite in a css file on the server (even if not supported)
or
(2) we can write a custom css to our Confluence instance?
There are no names of the Confluende web elements to be found in the guide at https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html?_ga=2.49331168.713272831.1568711596-468755150.1565360307.
We look forward to your specific and qualified response (we are aware of the risks, etc., so we do not need any advice to that effect).

Thanks a lot!

IPRP September 24, 2019

For other users/ interested parties:

the names are:

ul.inline-task-list > li {
[...]
}

and

ul.inline-task-list > li.checked {
[...]
}

@Confluence: Thank you for your appreciated help (...)

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events