If you are not familiar with CSS, see the links in the below. You should spend some time to become confident with Cascading Style Sheets before you start editing your Confluence style sheets.

Security

Custom CSS can be used to inject scripts into a page, opening the risk of cross-site scripting (XSS) attacks. With this feature enabled, space administrators could upload styles that steal other users' login credentials, trick their browsers into performing actions on the wiki without their knowledge, or even obtain global administration privileges. As such, this feature is disabled by default. Confluence administrators should only enable custom CSS if they are comfortable with the risks listed in this paragraph.

Scaling

Each page needs to scale. Depending on the resolution of the user's screen, the content should render intelligently. Your designs needs to degrade gracefully. Try resizing each page that exists in Confluence. There are quite a few pages in the browse-space-section, like drafts, labels, page hierarchy, and so on. Your style has to work everywhere, not just in the first page you happen to be looking at.

Features Cannot Be Disabled

It is easy to turn off certain links, headers, or even menu items by simply setting their style to 'hidden'. This can help you to roll out Confluence to users that may not be very Wiki-savvy yet. The simpler the UI, the easier it may be for them to use. However, please remember that removing the link to a part of the application does not mean that the functionality is not available. Every user can still change their style from within their browsers, or access the URL directly. Don't rely on CSS to disable parts of Confluence.

Features Should Not Be Disabled

Users familiar with Confluence will expect to find the same controls that they are accustomed to. Removing buttons or controls from the interface is not advised as it may frustrate your users and cause them to circumvent your design by using direct URL access, as mentioned above.

Custom CSS does not apply to Admin screens

Any CSS styling applied to your site will not be applied to the Administration console. This is to ensure changes to CSS do not prevent administrators from accessing Admin functions in future.

Confluence Version Compatibility

Be aware of any plans to upgrade your Confluence instance. Future versions of Confluence may not be compatible with your custom CSS — this may cause your CSS to break, requiring maintenance when Confluence is upgraded. Ask your Confluence administrator for more information.

Test on Different Web Browsers

As a rule you should test your modifications on the various web browsers supported by Confluence.

CSS Customization is Not Supported

As creating custom CSS has potentially limitless possibilities, Atlassian will not support issues that are caused by or related to CSS customization.

Wix Answers gives you the design tools you need to customize the look and feel of your Help Center. You can change the logo, add a background image and switch the color. You can also customize the text that appears on your Help Center pages to match your business's tone and voice. Learn More

For more advanced customization, add custom Cascading Style Sheets (CSS).

Add Custom CSS

Use custom CSS if the adjustments you'd like to make to your Help Center's appearance are not available in Settings.

To add custom CSS to your Help Center:

1. In the Wix Answers app, go to Settings > Support Channels > Help Center.

1. Click the Advanced tab at the top.
2. Scroll down to the Custom Code section.
3. Click Edit next to Custom Scripts & CSS.

1. Enter the CSS code in the Custom CSS field.
2. Click Save.

Note:

You can link in a CSS style sheet, such as for a custom font, using Custom Head Code. To vote for the ability to modify your font without using CSS, click here and then click Vote at the bottom of the article.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

Tutorial: Add custom CSS to your site

• Article
• 03/09/2023

In this article

The Styling workspace allows you to edit some of the theme features of your site, such as fonts and colors; however, you may apply your own custom CSS themes.

You can create your own theme by defining a custom CSS file and uploading it to your site.

In this tutorial, you'll learn how to:

• Upload a custom CSS file
• Edit CSS in Visual Studio Code for the Web

Prerequisites

• A Power Pages subscription or trial. Get a Power Pages trial here.
• A Power Pages site created. Create a Power Pages site.
• A custom theme file created using your favorite CSS editor.

Note

Any custom theme you create must be compatible with Bootstrap v3.

Add custom CSS to your site

The following video shows you how to apply custom CSS code to your site.

In this example, we'll add some custom CSS files that will allow us to add shadow effects to buttons on our website. You can use your own custom CSS file or use the sample provided.

1. To create a sample, in your favorite CSS editor, create the button_shadow.css custom theme file and save.

   .button1 { box-shadow: 0 9px 18px 0

   333333, 0 8px 24px 0

   333333;

   }

2. Go to Power Pages.
3. Select the site to which you want to add the custom theme and choose Edit.
4. Open up the Styling workspace.
5. Select a theme and select the ... (ellipses), and then select Manage CSS.
6. In the Custom CSS section, select Upload and choose your custom CSS file. You can only upload one CSS file at a time, but multiple files can be uploaded. If multiple CSS files update the same attribute, the attributes in the CSS file at the bottom of the list will apply. You can adjust the order of your custom CSS files.
7. You should immediately see the results of the updates on the pages canvas.
8. You can disable or move the order of your custom CSS files. The file listed last will take precedence over the others.

You can edit a CSS file directly by selecting the ellipses (...) and then selecting Edit code. This step will open the Visual Code for the Web editor. Select CTRL-S to save your changes.