How do I add custom styles to Confluence Editor: extending formatting style set with your styles

Stan Ry
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 9, 2018

Howdy,

The factory set of styles is available in the style drop-down menu within the Editor and is limited to 9 preconfigured styles only.

I'd like to exend the set of styles with my custom styles.

browser_2018-11-09_15-33-54.png

The Adding a custom format to the Confluence editor thread suggests such a customization is not possible. However, that thread is pretty dated so I am hoping there have been since some changes in Confluence during the past five years that made customizing Confluence Editor styles possible.

Thank you.

2 answers

1 accepted

0 votes
Answer accepted
Shannon S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
November 12, 2018

Hi Stan,

It is indeed not possible, but you can still style Confluence with CSS and create your own stylesheet which can specify how each style should look.

Have a look at Styling Confluence with CSS for more details.

Let us know if you have any questions about that.

Regards,

Shannon

craig haslam
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
December 7, 2018

Hi Shannon

 

I have the cloud version and would really like to be able to style fonts etc.

 

All of the plugins and themes seem to be only available to the server option is there anyway I can style fonts in the cloud version of confluence

 

thanks

Craig

Shannon S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 7, 2018

Hi Craig,

It is not possible in Confluence Cloud.

Have a look at Functional differences in Confluence Cloud for more information.

On Atlassian Cloud, Confluence uses a custom theme, which cannot be modified or updated using custom HTML or CSS (not supported). For more information on custom themes in Confluence Cloud, refer to  Working with Themes . Confluence Cloud Developer community: You can also create your own theme for Confluence Cloud. Check out the  Theme page  in our Confluence Cloud Developer documentation.

Regards,

Shannon

craig haslam
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
December 7, 2018

Thanks Shannon

In the end I have just branded the front page by using sketch to create some designs and I will then just use the standard formatting

 

thankfully I figured out how to at least use sans-serif fonts rather than serif

 

C

Shannon S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 7, 2018

Hi Craig,

Thank you for letting us know!

Happy you were able to get a workable solution.

Take care, and have a pleasant weekend.

Regards,

Shannon

0 votes
Stan Ry
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 13, 2018

Hi @Shannon S,

Thanks for your response.

So to wrap up, there's nothing how I could add or extend the style set to make them available in the drop-down list, correct? Instead, I can only modify the look and feel of pre-configured styles.

Did I get it right?

Thank you.

Shannon S
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
November 13, 2018

Hi Stan,

No, nothing that I am aware of that would allow that. You can also check out at our Developer Community as well, in case anyone there has been able to add a style via add-on development.

Regards,

Shannon

Lester W April 2, 2020

Lame.  It would be easy for Confluence to provide an editable style sheet that could define some class names that could be used for styles.  Its really annoying that there isn't at least a Code or a preformatted style.

Even this support page has a code block feature.

Like Susanne Ertle likes this
Charlie Hills
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
November 6, 2021

While I agree that customizing or extending this menu would be nice, there are several options for preformatting and coding, as follows:

  • Preformatted style, as shown in the OP's screenshot. This is useful for quickly applying a monospace font to a paragraph.
  • Monospaced formatting. This isn't a style, but a format (like bold, italics, superscript). Can be found in the formatting group under the More menu. This inserts <code></code> tags around the selected text. Which means it can be easily styled with CSS.
  • The Code Block you're looking for does exist, but it's a Macro. It's also not available for every version of Confluence.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events