Skip to main content
Skip table of contents

Changing the output of Panel macros

You can change the output of Panel macros by modifying the Scroll Web Help Theme or your own template. 

Before you begin: To change the output of Panel macros, a template must exist.

To change the output of Panel macros in the exported HTML file:

The styles you set are applied to all exported Panel macros not just individual ones

  1. Open your template folder.
  2. Go to src > main > resources > com.k15t.scroll.scroll-webhelp-theme > scroll-html > css in your template directory.
  3. Open the content-style.css file with your favorite text editor.
  4. Find the Panels and Admonitions Section:

    1. To modify the look of the panel header change the styles of .wiki-content div.panel div.title.panel-header
    2. To modify the look of the panel content change the styles of .wiki-content div.panel div.panel-content 
    3. To modify the look of the whole panel create the selector .wiki-content div.confbox.panel and add your styles there
  5. Save the content-style.css file and rebuild the template by executing the atlas-package command in the terminal.

Example Panels and Admonitions section

CSS
/* Panels, Admonitions ***************************************************************************/

.wiki-content div.confbox {
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    border: 1px solid #BBBBBB;
    border-radius: 5px;
}

.wiki-content div.confbox .title {
    font-weight: bold;
}

.wiki-content div.panel div.title.panel-header {
    padding: 0.5em 1em;
    border-bottom: 1px solid #BBBBBB;
    background-color: #F5F5F5;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.wiki-content div.panel div.panel-content {
    padding: 1em;
}


JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.