Style with CSS

Create a sample topic containing:

Select the second para element and use the Element attributes panel to give it the role attribute. Set the value of the role attribute to:

indentbody

When you publish, Paligo will give the paragraph the class name "indentbody" in the HTML. You can then style it using CSS.

Select the table element and use the Element attributes panel to give it the role attribute. Set the value of the role attribute to:

data-table

When you publish, Paligo will create a div element to contain the table. The div element will have the class name "data-table" and you can style it by using CSS.

Select the last cell in your table. In the Element Structure Menu at the top, select the td element and then Go to element from the menu. Use the Element attributes panel to give the td element the class attribute and set its value to:

yellow-cell

When you publish, Paligo will give this cell the class name "yellow-cell". You can then style it using CSS.

Save your sample topic.

Create a publication, add your sample topic to it, and then save it.

Select the dotted menu ( ... ) for your publication and then select Publish.

Publish your publication and use the built-in default HTML5 Help Center Layout.

Select HTML5 and choose the default HTML5 Help Center Layout.

Select Publish document.

Open the zip file and browse to the out folder. Open the index.html file in a browser. For this tutorial, we are using Google Chrome.

Select the panel for your sample topic to open it.

Create a CSS file. You can use any third-party text editor or code editor that supports saving a CSS file. Leave the editor open so that you can add CSS to it as you work through this tutorial.

Right-click in the browser window and select Inspect*.

*This is correct for Google Chrome. Other browsers may use a different name.

Use the Inspect tool in the Browser Inspection Tool.

Move the cursor over the TOC sidebar so that the entire bar is highlighted and then left-click to select it.

In the Styles, find the rule that is setting the background color.

Select the color box and change the color to:

#a94442

Right-click on the rule that you changed in steps 4 and 5 and select Copy Rule.

Paste the rule into your CSS file (from Prepare a Sample Topic and CSS).

It is best practice to add comments to your CSS so that anyone who opens the CSS file can tell what each rule is styling. To start a comment, enter /* and to end a comment enter */

Here is an example of a comment before a rule:

/* The following rule changes the background color of the sidebar */

.bg-primary, .btn-primary, .pagination>.active>a, 
.pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, 
.pagination>.active>span:focus, .site-sidebar, 
.portal-single-publication .publication-icon {
    background-color: #a94442;
}

Use the Inspect tool in the Browser Inspection Tool to select the main heading on the page.

In Styles, find the rule that sets the heading 2 (h2) font-size and increase the size to 40px.

Click on the line below the font-size property and add a color property with the value set to #a94442. Remember to add a semi-colon at the end of the color value.

Add another rule to the same class. This time set the font-weight to 800. Again, remember to add a semi-colon after the font-weight value.

Right-click on the rule in the Styles panel and select Copy rule.

Paste the rule into your CSS file, after the closing curly bracket of the previous rule.

Using the same technique, set your:

Copy and paste these rules into your CSS file.

Use the Selector tool in the Browser Inspection Tool to select a step in a procedure.

In the Styles, select the ::before that comes immediately after the selected <li class="step">. The ::before is a pseudo element and, in this case, it represents the step number icon.

Change the background color:

.theme1 .procedure > li::before {
    background-color: #a94442;
}

Copy the rule and paste it into your CSS file.

Use the Selector tool in the Browser Inspection Tool to select an item in a top-level bullet list (itemized list).

In Styles, select the ::marker that comes between the <li class="listitem"> and the <p>.

Notice that the ::marker has some rules that come from "user agent stylesheet". This means it is using the default styling that is defined by the browser. You cannot change these, but any rules that you add for the same class will override the browser defaults.

Select the plus icon on the Styles toolbar to add a new rule. It automatically includes the selector (in this case, ::marker).

Edit the selector and create this rule:

.itemizedlist ul.itemizedlist > li::marker {
    color: ##a94442;
    font-size: 1.2em;
}

Here, you are making the selector more specific and setting a color and size for the bullet points. The browser will only apply the styles to markers that are located in this structure:

<element with class = itemizedlist>
    <ul with class = itemizedlist>
        <li>

Copy the rule and add it to your CSS.

Select a bullet list and look in the HTML. It shows that the <ul> HTML contains inline styling, in this case, it is setting the bullet lists to use a disc bullet.

The browser will use this styling in preference to the CSS. To tell the browser to use a style in your CSS instead, you can include !important. This should be used carefully, as it tells the browser to use the !important style in preference to any other styling, including styling in other CSS files.

In Styles, select the plus icon + and add this new rule:

.itemizedlist > ul.itemizedlist {
    list-style-type: square !important;
}

This tells the browser to use square bullets on top-level unordered lists.

Copy the rule and add it to your CSS.

Now let's create some similar styling for the second-level ("nested") bullet points. This time, you will set the bullet points to blue squares. For this, add these two rules:

.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist {
    list-style-type: square !important;

}
.itemizedlist > ul.itemizedlist > li > .itemizedlist > ul.itemizedlist > li::marker {
    color: #6495ed;
    font-size:1.2em;
    
}

Here, you have used more specific selectors. The first rule targets the unordered list (ul) that is inside a listitem in a parent unordered list. The second rule targets the marker of list items in an unordered list that is inside a listitem in a parent unordered list.

Copy the rule and add it to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the number for a number list item.

In the Elements section, you should see that the ::marker pseudo element is highlighted in the ordered list structure.

In the Styles, select the plus icon + to add a new style. By default it will be ::marker but you should change it to:

.orderedlist ::marker

Here, you have told the browser to only apply the style rule to ::marker when it appears inside the "orderedlist" class. This is to make the selector more specific, so that the style does not apply to other lists that have the ::marker pseudo element, such as bullet lists.

Enter the following styling for the orderedlist ::marker:

.orderedlist ::marker {
    color: #a94442;
}

This sets the color of the number in ordered lists to dark red.

Copy and paste the rule to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the image in your content.

In the Styles, look for img.materialboxed. This is the rule that applies to all block images in Paligo content.

Change the rule so that it has these properties:

img.materialboxed {
    border: 2px solid #ddd;
    max-width: 100%;
    height: auto;
    padding: 10px;
}

This sets your block images to have:

Copy the rule and add it to your CSS.

Use the Selector tool in the Browser Inspection Tool to select the second paragraph in your sample topic.

In the Elements section, you should see that the paragraph has the class name in the HTML:

<p class="indentbody">

In the Styles section, select the plus icon + to add a new rule.

Edit the rule so that it applies a left margin indent to the text:

p.indentbody {
    margin-left: 2.5em;
}

Here, you are targeting any paragraph element that has the class "indentbody".

Copy the rule to your CSS file.

Use the Selector tool in the Browser Inspection Tool to select the table in your sample topic.

Select the thead element (the table header).

In the Styles , select the plus icon + to add a new rule.

Change the selector to:

.data-table > .table thead

With this selector, you are targeting the header (thead) of tables that are inside a parent element (in this case, a div) with the class name "data-table". The CSS you set inside this rule will not apply to the header of other tables.

Set the background color and the text color for the header:

.data-table > .table thead {
        background-color: #9b9ba4;
        color: #ffffff;
}

Copy the rule and paste it into your CSS.

Select the plus icon + to add another rule.

Change the selector and add these style properties:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
}

Again, this selector targets a table that is a child of an element that has the class "data-table". The styles set the table to have a solid, thin, dark gray border.

The border shows that the table has some extra space at the bottom. You will remove this in the next step.

Add the following style to rule you created in the previous step:

margin-bottom: 0px !important;

So your previous rule should now look like this:

.data-table > .table {
        border-style: solid;
        border-width: thin;
        border-color: darkgray;
        margin-bottom: 0px !important;
}

This tells the browser to set the bottom margin to zero. The !important overrides the margin-bottom value that is set for all tables in another CSS.

Copy the rule and paste it into your CSS.

Now let's give a background color to alternate rows in the table. Create this new rule:

.data-table > .table tbody tr:nth-child(2n) {
        background-color: ghostwhite;
}

With this selector, you again target the table that is a child of the "data-table" div. This time, you also target the table body and the tr:nth-child (2n) targets the even rows. You have set the background color of the rows to "ghost white".

Back when you created your sample table, we asked you to give the last cell (td) a class attribute with the value "yellow-cell". Let's style that cell next.

Use the browser's Select tool to select the last cell in the table.

In the Styles, select:

<td class="td yellow-cell">

Select the plus icon + to add a new rule and give the cell a yellow background:

.td.yellow-cell {
        background-color: #fdef20;
}

Copy the rule and paste it into your CSS.

Save your CSS.

Upload Customized CSS.

Select the dotted menu ( ... ) for your sample publication.

Select Publish.

Select HTML5 and then choose your custom HTML5 Help Center Layout.

Select Publish Document.

In the download, browse to out/index.html and then open the index.html file in your browser.

On the hub page, select your sample topic.

Select Layout in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the Layout you want to update or Create a Layout.

Select Formal elements in the sidebar.

Select Enable in Use separate styling for label, number and title in formal elements.

When enabled, this setting adds <span> to the HTML and class names so that each part can be styled differently using CSS.

Select Save.

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

Use CSS selectors to choose which parts you want to include or exclude.

For example, to hide a table's label, number, and delimiter after the number, use this code:

.table-title .formal-label {
    display:none;
}

If you want to keep the auto-text label, but hide the number and delimiter, use this code:

.table-title .formal-number, .table-title .formal-label-delimeter {
    display: none;
}

The other elements with titles have similar classes, for example, the example element has an example-title class with span classes for formal-label, formal-label-text, formal-number, and formal-label-delimiter.

Save your CSS file.

Upload Customized CSS.

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

To change the color of the various parts of a note:

/* This part changes the color of the left-margin border and the background  */

.note {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.note::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.note h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.note > p {
color:#ffffff;
}

To style other admonitions, add extra code and replace .note with the name of the admonition (for example .warning).

/* This part changes the color of the left-margin border and the background  */

.warning {
border-left-color:#c5c6c8;
background-color:#0540f0;
}

/* This part changes the color of the symbol  */

.warning::before {
color:#ffffff;
}

/* This part changes the color of the label  */

.warning h3 {
color:#ffffff;
}

/* This part changes the color of the body text  */

.warning > p {
color:#ffffff;
}

Save your CSS file.

Upload Customized CSS

When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

To hide admonition labels, use this CSS code:

.caution h3, .important h3, .note h3, .tip h3, .warning h3{
    display: none;
}

This sets the labels for all of the admonition types (caution, important, note, tip and warning) to be hidden.

Add some extra spacing for the body text of the admonition, to align it with the top of the admonition icon. This gives the text a 10px margin at the top, which is the same amount of spacing that is used for the icon, by default.

To do that, add this code to your CSS:

.warning > p, .note > p, .important > p, .caution > p, .tip > p {
    margin-top: 10px;
}

Save your CSS file.

Upload Customized CSS

When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Refer to FontAwesome 4.6.3 to find the icon you want to use. Make a note of its code.

Use a code or text editor to create a CSS file. Give it a suitable name and save it with the .css extension.

To change the symbol for a note, use this CSS code:

.note:before {
    content: '\f12a';
    font-family: FontAwesome;
}

In this example, we have used f12a as the example code for a FontAwesome symbol. You will need to replace that with the code for your chosen icon.

To adjust the spacing of the icon or its color. You can do that by setting its styles.

.note:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

Here is an example of some styling for a note, where the color is set and the font size and top margin spacing have been increased.

To style the other admonition types, add extra code and replace .note with the name of the admonition (for example .warning).

.warning:before {
    content: '\f12a';
    color: #2ab27b;
    font-size: 30px;
    top: 30px;
    font-family: FontAwesome;
}

Save your CSS file.

Upload Customized CSS

When you publish content using the HTML layout, the CSS styles you have added will be included in the published output. Your custom styles take priority over the built in styles.

Select Layout in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.

Select the Layout you want to update or Create a Layout.

Select Table Styles in the sidebar.

Ensure Output classes for styling of tables is set to Enable.

Select Save.

Publish your content with the default styling for tables in place, and then open the output in your browser.

Use the browser's inspection tools to identify the class for the part of the table you want to style. For example, if you want to style the header row of your tables, use the inspection tool to find the table header cells in the underlying HTML. You will see that each header cell is styled by .th in the CSS.

Use the browser's developer tools to add new styling for the class. This will let you see what effect your changes will have when you add them to a CSS stylesheet. For example, if you want all table header rows to have a blue background color, you could enter:

.th { 
background-color: #557dc4;
}

When you are happy with the table stylings you have made, use a code editor or text program to create a new CSS file. Then add your custom styles to that and save it with the .css file extension.

Upload Customized CSS to your layout.

Then, when you publish with that layout, your content will use your custom CSS rules. Your CSS stylesheet will take priority over the Paligo CSS stylesheet.

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.

Position the cursor inside the table.

Select the table or informaltable element in the Element Context Menu and choose Go to element.

Add the tabstyle attribute in the Element Attributes Panel.

Enter a style name as attribute value.

It will be used as a style name in the HTML output and you will use it in your CSS. It is a good idea to use a name that is easily identifiable.

For example, you might use "Instruments" for tables that contain details about technical instruments.

Select Save.

Publish your content and open it in a browser.

Use the browser's inspection tools to find the class for your table. This should match the name you have given to the tabstyle attribute.

Use the browser's developer tools to add new styling for the table class. For example, you could give an "instruments" table header cells that have a yellow background, like this:

.instruments th {
background-color:#ffff00;
}

When you are happy with the table stylings you have made, use a code editor or text program to create a new CSS file. Then add your custom styles to that and save it with the .css file extension.

Upload Customized CSS to your layout.

Then, when you publish with that layout, your content will use your custom CSS rules. Your CSS stylesheet will take priority over the Paligo CSS stylesheet.

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.

Select the table element that you want to style in the Element Structure Menu:

Add one of the attributes below in the Element Attributes Panel.

Enter the class name that will appear in the HTML as value. Use lowercase for the value and do not include spaces.

Select Save.

Use a third-party code editor or text editor to create a CSS file.

Use CSS to style the table elements for the HTML output.

When defining your CSS, you need to consider that your Paligo content may contain tables and also informal tables. The Paligo HTML5 output also uses tables for layout in certain places, for example, with some images. Typically, you will want to avoid styling the tables that are used for layout, so that your styles only affect the tables and informal tables.

We have included some examples of commonly used table selectors (see the examples after this procedure).

Save your CSS file and Upload Customized CSS.

Publish your content using the HTML5 Layout you edited in the previous step.