Branding your HTML Outputs with CSS

You can use a code editor or text editor to create a CSS stylesheet. There are many different applications available, and you can use any that support saving with a .css file extension.

Basic CSS Syntax

A CSS stylesheet contains a list of instructions or "rules". They tell the browser how to style content that is marked up to have a class name or id. For example, a paragraph could have the class name "aside" and you could then use a CSS rule for "aside" to define the color, font, margins, etc., to apply to that paragraph.

Example of one of the default CSS stylesheets used by Paligo

For a CSS rule, you define the selector and then the attributes and values that will apply. Here is a simple example of the styling for a class named "para-main".

.para-main {
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 1.5pt;
    color: #333;
    background-color: #f5f5f5;
}

• The rule begins by defining the class the style rules will apply to. This is the "selector" and it can include one or more classes. Here, there is just one and it is preceded by a period ( . ) so that it can apply to different HTML elements. For example, if there was an h1.para-main selector, the style rules would only apply to heading 1 (h1) elements that have the class "para-main".

• An opening curly bracket begins the rules for styling.

• On each line, there is an attribute and the value(s) for that attribute. For example, font-size is the attribute and 13px is the value. Note that the font-family attribute has several values, each separated by a comma. In this case, the browser will use the Open Sans font. If that is unavailable, it will use Helvetica Neue instead. If that is unavailable, it will use Helvetica, and so on.

• A colon separates a value from its attributes.

• A semi-colon is used to mark the end of the value(s).

• A closing curly bracket ends the rule.

This is a basic example, but the main principles are the same for CSS styles. You begin with a selector to define which class the rules apply to , then define the rules for that class as attributes and values.

Tip

If you want to learn about CSS, this CSS Tutorial covers the basics and has links to more resources.

If you have lots of styles to change, we recommend that you publish your content as a "test" publication. You can then view the publication in a browser, and edit the CSS file in the output. When you make changes to the CSS file, you can save it and refresh the browser to see how the changes affect the content.

This is quicker than applying each change individually in the browser's inspect feature and then copying those changes to your CSS.

Modern browsers such as Google Chrome and Mozilla FireFox have inspection features that you can use to view the classes in your HTML content and test changes to the CSS. The inspection features may use different terminology, but they work in a similar way. If you have never used the inspection features before, here's a quick overview based on Google Chrome.

To use the inspection tool:

We recommend that you publish an HTML output to your computer and use it for testing. You can use the browser inspection tool to test your changes, and then add them to your custom CSS file before uploading it to Paligo.

Open the Inspection Tool

1. Use a browser to open the index.html file in your published HTML output.

2. Right-click on the webpage and select Inspect (or the equivalent option if you are not using Chrome).

   The browser reveals the inspection tools.

   Let's look at the various parts of the Inspection interface:

   1. The viewer. This is where your webpage content is shown as it will appear to visitors.

   2. The Elements tab shows the HTML of the page you are viewing.

   3. The underlying HTML code for the page. This is also called the DOM Tree (Document Object Model Tree). You can expand the elements to see the full structure of the page. From here, you can see the class names and ids that are assigned to the various HTML elements. You style your content by creating rules that apply to these classes and ids.

   4. The Styles tab. This is where you can see the CSS that is currently applied to the selected class. You can make changes to the CSS here to see what effect the changes will have. For example, if you change the color value for a heading, you will see the heading change color in the viewer. The changes you make here are only for testing as they are not stored and will be lost when you browse away from the page or refresh it. To keep the changes, you need to add them to your custom CSS file.

   5. The selection tool. If you activate this, you can select any part of the page shown in the viewer, and the browser will show you the HTML for that part of the page. The Styles tab then updates to show you the various classes and styles that apply to that HTML element.

Find Classes in the Inspection Tool

Use the selection tool to find the class you will need to change if you want to restyle part of a page.

1. Select the selection tool icon.

2. Hover the cursor over the part of the page that you want to restyle. A highlight appears and a pop-up to show the class and the styles that are currently being used.

   

3. Select the part of the page that you want to restyle. When you click the button, the cursor will change and the styles for that part of the page are shown in the Styles tab. The HTML elements for that part of the page are also highlighted in the DOM Tree.

Now that you have found the classes that you want to change, you can use the Styles tab to apply different styles.

Note

Some HTML elements are inside "container" elements, which are at a higher level in the DOM Tree structure. The styles you want to change may be set for the "container" rather than the individual element.

Change Styles in the Inspection Tool

The Styles tab shows the classes, attributes, and values that the browser applies to the currently selected HTML element. You can change the values or add extra attributes and values, and see the results in the browser.

1. Use the selection tool to select the part of the page that you want to change.

2. In the Styles tab, find the classes that you want to change. For example, if you use the default Help Center Layout and select the "How can we help you today?" heading on the homepage, you will see styles like this:

   The CSS shown here styles the heading. There are several different classes that are used.

   1. This is a media query, which means this style only applies when the content is viewed on a device with certain attributes, in this case, a screen that is 768px wide or more.

      The class name is .portal-header h1 and it has a font-size of 36px. You can change the font-size to make the portal heading text larger or smaller, and you can add other attributes and values, such as color.

   2. The .portal-header h1 class. These settings apply to elements that have the portal-header h1 class, but only when the content is viewed on a device that is smaller than 768px wide. Notice that the font-size here is crossed through. This means it does not apply as the font-size is being set in a class that takes precedence (the media query .portal header h1 class, which is shown higher up the list).

   3. These are general values that apply to heading classes such as h1, h2, h3. Again, if a value is crossed through, it means that value has been set for another class that takes priority over this class.

   The same principles apply to all elements on a page. You can find out what classes apply and which styles are used.

3. To make a change, select a value and replace it with the value you want. For some values, the browser provides a list of possible values you can use.

4. If you want to add an extra attribute and value, position the cursor below the last attribute and above the closing curly brackets, and then click. A colon appears.

   Enter the name of the attribute on the left side of the colon and the value on the right side of the colon.

5. When you are happy with the changes you have made, add them to your own CSS stylesheet. When you are finished, upload your CSS to your HTML5 or HTML layout in Paligo.

When you have created a customized CSS file, upload it to your HTML layout in Paligo. The next time you publish with that layout, your content will use the uploaded CSS file.

• Select the Layout tab 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 configuration to be updated or Create a Layout.

  Tip

  You can copy the URL of the layout editor and paste it into a new tab in your browser. This can be useful if you need to frequently switch between your Paligo content and the layout settings.

• Select CSS, JS, logos and other assets.

• Upload your CSS file in the CSS section.

  Important

  When you upload a CSS file, it will replace any CSS file that is currently associated with the layout.

  Note

  If you are using an HTML layout rather than an HTML5 layout, the CSS upload feature is in the General category.

• Select Save.