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

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.

true
Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-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".

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 the upload button (Image Removed)

    Navigate to the Code section of the Theme Designer



    HTML Wrap
    class
    tag
    docs-screenshot

    Add custom CSS or JavaScriptImage Removed 

    Content Block
    nameSteps
    rich-link-hoverstrue
    id2086188388
    classsteps-block
    nameSteps
    rich-link-hovers
    span
    classproduct-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
    classdocs-screenshot

    Add custom CSS or JavaScriptImage 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
    • your file (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
    classdocs-screenshot

    Create custom CSS or JavaScriptImage 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
    classdocs-screenshot

    Delete CSS or JavaScriptImage Modified 

    Content Block

    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 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
    classcallout

     <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
    classcallout

    <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 Use caution when adding custom CSS and JavaScript can make your site less 'future-proof'

    Whenever possible, we recommend using the We recommend you use the built-in design functionality of Theme Press (including embedded CSS), rather than using adding 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
    • 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