Using Custom CSS and JavaScript

Content Layer

name	Page Info
id	278129461
class	watermark-layer

Content Column

name	Page Body
width	100.00001%
id	278129463

Content Block

background-color	transparent
name	Prompt
id	494677873
class	tight manual-prompt-flex

Adding CSS or JavaScript to a theme.

Content Block

name	Outcome
rich-link-hovers	true
id	1042866408
class	tight manual-outcome-flex

Lorem ipsum objective that isn't built into theme pressCustom code can be added either directly in the Theme Designer or as specific uploaded files.

Content Block

name	Steps
rich-link-hovers	true
id	494842117
class	steps-block numbered tight-bottom

Open the Theme Designer

Use the "." shortcut key to open the Designer, then Click on the Theme Tab and turn the Designer to "On".

Navigate to the Code section of the Theme Designer

HTML Wrap

tag	span
class	product-navigation

Theme Designer → Content → Custom CSS & Javascript → Code

To add custom CSS or JavaScript (file upload)

From the Theme tab of the Theme Press Control Panel

Under the Content section, expand the Custom CSS & JavaScript accordion

Click the Code expander

Click the magnifying glass to the right of CSS or JavaScript

Click

, which will open a dialog box.

To upload a file, click the upload button (

Image Removed)

HTML Wrap

class	docs-screenshot

Add custom CSS or JavaScript Image Removed

Image Added).

To add custom CSS or Javascript directly to Theme Press

.

From the Theme tab of the Theme Press Control Panel

Under the Content section, expand the Custom CSS & JavaScript accordion

Click the Code expander

Click the magnifying glass to the right of CSS or JavaScript

Click

, click the add button (

Image Removed

Image Added).

The New (CSS or JavaScript) File window opens.
Name your file

and enter your code

(there is no need to add ".css" or ".js" to your file, this will be done automatically)
Enter your code. Be sure to enter valid code using the appropriate syntax for comments and statements.

HTML Wrap

class	docs-screenshot

Create custom CSS or JavaScript Image Modified

To delete your custom CSS or JavaScript, complete the following procedures.

From the Theme tab of the Theme Press Control Panel

Under the Content section, expand the Custom CSS & JavaScript accordion

Click the Code expander

Click the magnifying glass to the right of CSS or JavaScript

Need to delete a file? Hover over the file you wish to delete and click

the

the X.

HTML Wrap

class	docs-screenshot

Delete CSS or JavaScript Image Modified

Editing or Deleting your CSS or JavaScript files outside of Theme Press?

There may be situations where you will need to edit or delete your CSS or JavaScript directly in your operating system, without using the Theme Press Designer.

Find your

Your CSS files are located in

the

a "css" folder

at this location

in your system:

<Confluence

HTML Wrap

class	callout

<Confluence Home Directory>/brikit/themes/<Your Theme Name>/css

Find your

Your JavaScript files are located in

the

a "scripts" folder

at this location

in your system:

HTML Wrap

class	callout

<Confluence Home Directory>/brikit/themes/<Your Theme Name>/scripts

Using custom CSS and JavaScript can make your site less 'future-proof'

We recommend you use the built-in design functionality of Theme Press (including embedded CSS), rather than using custom CSS or JavaScript whenever possible. This ensures that your theme is 'future proof' – meaning that as both Confluence and Theme Press issue updates, your theme will continue to work well.

If you build your theme with custom CSS, it becomes possible that you'll need to go back and rebuild your code, in order to 'map' to any changes made in the underlying structure after software updates.

Note also that because Theme Press is an Add On to Confluence, there are multiple levels of CSS to override, and in such a dynamic environment, using the designer ensures that you are targeting elements with the correct level of specificity.

Content Block

name	Note
rich-link-hovers	true
id	495965127
class	manual-note-flex
collapsible	collapse

Note

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.

Content Block

name	Tip
rich-link-hovers	true
id	894522670
class	manual-tip-flex
collapsible	collapse

Tip

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Content Block

name	Warning
rich-link-hovers	true
id	894530759
class	manual-warning-flex

Warning

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Use caution when adding custom CSS and JavaScript

Whenever possible, we recommend using the design functionality of Theme Press rather than adding custom CSS or JavaScript. This ensures that your theme is 'future proof'; as both Confluence and Theme Press issue updates, your theme will continue to work well.

A theme highly customized with CSS will need to be extensively reviewed and potentially rebuilt, in order to 'map' to any changes made in the underlying structure after software updates.
Because Theme Press is a Confluence App, there are multiple levels of CSS to override, and in such a dynamic environment, using the designer ensures that you are targeting elements with the correct level of specificity.

Content Block

name	Info
rich-link-hovers	true
id	894537203
class	manual-info-flex
collapsible	collapse

Info

If using:

Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.

Content Layer

background-color	$lightGrayColor
name	Related
id	888168050

Content Column

name	Related
width	100%
id	888168051

Content Block

rich-links-hide-description	true
rich-link-hovers	true
rich-links-columns	4
rich-links-vertical	true
rich-links-image-height	100px
rich-links-hide-site-icon	true
rich-links-details-padding	10px
name	Related
rich-links-enable	true
border-width	0
rich-links-details-alignment	left
rich-links-margin	20px 30px 0 0
id	496234544
class	related-block clean manual-related-flex

Page tree

Transform Your Digital Workplace

Industry Expertise

Inform Your Strategic Direction

Redefining Work

Documentation and Support

Versions Compared

Old Version 35

New Version Current

Key

Open the Theme Designer

Navigate to the Code section of the Theme Designer

To add custom CSS or JavaScript (file upload)

Click the magnifying glass to the right of CSS or JavaScript

, which will open a dialog box.

To upload a file, click the upload button (

Image Added).

To add custom CSS or Javascript directly to Theme Press

, click the add button (

Image Added).

To delete your custom CSS or JavaScript, complete the following procedures.

Need to delete a file? Hover over the file you wish to delete and click

the X.

Editing or Deleting your CSS or JavaScript files outside of Theme Press?

Using custom CSS and JavaScript can make your site less 'future-proof'

Platform

Company

Support

Brikit Services