Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Content Layer
namePage Info
id278129461
classwatermark-layer
Content Column
namePage Body
width100.00001%
id278129463
Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

Adding CSS or JavaScript to a theme. 

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex

Custom code can be added either directly in the Theme Designer, via a popup window, or as specific uploaded files.

Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered

Navigate to the Code section of the Theme Designer

HTML Wrap
tagspan
classproduct-navigation

Theme Designer → Content → Custom CSS & Javascript → Code

Click the magnifying glass to the right of CSS or JavaScript

To upload a file, click the upload button ()

To add custom CSS or Javascript directly to Theme Press, click the add button ().

a.
  • The New (CSS or JavaScript) File window opens.
b.
  • Name your file and enter your code.

HTML Wrap
classdocs-screenshot

Create custom CSS or JavaScript

Content Block
nameSteps
rich-link-hoverstrue
id2086188388
classsteps-block numbered

HTML Wrap
classdocs-screenshot

 

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

  1. From the Theme tab of the Theme Press Control Panel
  2. Under the Content section, expand the Custom CSS & JavaScript accordion
  3. Click the Code expander
  4. Click the magnifying glass to the right of CSS or JavaScript
  5. Hover over the file you wish to delete and click the X.

HTML Wrap
classdocs-screenshot

Delete CSS or JavaScript 

Content Block
nameSteps
rich-link-hoverstrue
id2086076719

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 Theme Press Designer.

Find your CSS files in the "css" folder at this location in your system:

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

Find your JavaScript files in the "scripts" folder at this location in your system:

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

Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex
collapsiblecollapse
Note

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flex
collapsiblecollapse
Tip

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. 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
nameWarning
rich-link-hoverstrue
id894530759
classmanual-warning-flex
Warning

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.

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.

Note also that 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
nameInfo
rich-link-hoverstrue
id894537203
classmanual-info-flex
collapsiblecollapse
Info

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. 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
nameRelated
id888168050
Content Column
nameRelated
width100%
id888168051
Content Block
rich-links-hide-descriptiontrue
rich-link-hoverstrue
rich-links-columns4
rich-links-verticaltrue
rich-links-image-height100px
rich-links-hide-site-icontrue
rich-links-details-padding10px
nameRelated
rich-links-enabletrue
border-width0
rich-links-details-alignmentleft
rich-links-margin20px 30px 0 0
id496234544
classrelated-block clean manual-related-flex