Style the Portal Page

Create a new topic or open an existing topic.

Select the top section in the Element Structure Menu and choose Go to element.

Add the attribute Role in Element Attributes Panel.

Add the value start-page.

Select Save.

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 General.

Scroll down to Choose start page by role for HTML5 Help Center.

Select Enabled from the menu.

Select Save.

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-header h1 {
color: #ff8c00;
}

Where #ff8c00 is the HTML code for the color you want to use. In this example, we have used the code for dark orange.

Save your CSS file.

Upload Customized CSS

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-header h1 {
font-family:"Times New Roman", Times, serif;
}

Where "Times New Roman", Times, serif is the definition for the font you want to use. In this example, we have used Times New Roman, with Times used if Times New Roman is unavailable, and a serif font as a fallback option.

Save your CSS file.

Upload Customized CSS.

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

For example, mystyles.css.

Add the following code to your CSS file:

@media (min-width: 768px).portal-header h1 {
font-size: 60px;
}

.portal-header h1 {
font-size: 30px;
}

The first CSS class uses a media query. In this case, if the content is viewed on a display that is 768 pixels or more, the portal-header h1 will use a font size of 60px.

The second CSS class defines the size for the portal-header h1 class if the page is viewed on a display that is less than 768 pixels. In this case, it will use a font size of 30px.

Replace the font size values with the sizes you want to use.

Save your CSS file.

Upload Customized CSS.

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 CSS, JS, logos and other assets in the sidebar.

Select Upload in Help Center Portal Page Background Image.

Paligo will upload the image file and assign a filename.

Drag and drop the image file that you want to use into the dialog.

Select Save.

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-header::before {
  background-color: #555; 
}

Replace #555 with the HTML code for the color you want to use.

If you want to use a gradient, that's possible too. But in that case, use "background" instead of "background-color":

.portal-header::before {
   background: linear-gradient(to right , rgb(0, 104, 191) 8% , rgb(33, 150, 243) 50% , rgb(100, 66, 255) 95%);
}

You can easily generate the gradient code with an online generator, for example, this one.

Save your CSS file.

Upload Customized CSS.

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-header::after{
  background: none;
}

Save your CSS file.

Upload Customized CSS.

Use your Browser Inspection Tool to discover the class name of the category panel that you want to change.

Each category panel has its own class name which Paligo designates based on the order of the panels. For example, the first category panel has the class name .cat-panel-1.

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

For example, mystyles.css.

Add the following code to your CSS file:

.cat-panel-1:before{
    content: "\f29a"; 
}

Change .cat-panel-1 to the class name you discovered in step one, for example, .cat-panel-5:before.

Replace "\f29a" with the icon code from Font Awesome 4.6.3.

The "\f29a" is an icon code from Font Awesome.

Save your CSS file.

Upload Customized CSS.

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-single-publication a {    
    color: #DC143C;
    background-color: #C0C0C0;
}

.portal-single-publication .publication-icon {
    background-color: #DC143C;
}

Replace the color values with the colors you want to use.

Save your CSS file.

Upload Customized CSS.

Use a third-party code or text editor to create or update a JavaScript (JS) file.

For example, mycustomscript.js.

Add the following code to your JavaScript file:

$(document).ready(function() {

var icon1 = "url of image 1";
var icon2 = "url of image 2";
var icon3 = "url of image 3";

$(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");
$(".cat-panel-2").closest("a").prepend("<img src='" + icon2 + "'></img>");
$(".cat-panel-3").closest("a").prepend("<img src='" + icon3 + "'></img>");

$(".publication-icon").remove();

});

Replace the text inside the quotation marks with the URL of your image.

The script declares variables called icon1, icon2, and icon3. Each variable is a reference to the image URL.

If you want to include more, add a new line using the same syntax. For example, if you wanted four images, you would add var icon4 = "url of image 4"; where the URL is the actual address of the image file.

If you added more image variables, you also need to add extra "cat-panel" references. There should be one for each variable, and they look like this:

 $(".cat-panel-1").closest("a").prepend("<img src='" + icon1 + "'></img>");

In the HTML structure of the help center's "portal" page, each category image is contained in a "cat-panel" section and these are numbered. So the line above works by telling the browser to find the "cat-panel" for category 1, and then find the anchor that comes before it.

When the anchor is found, the browser adds an image element that references the icon1 variable that defines the location of the image.

For each variable that you added to the script, add a new instruction line. For example, if you have four variables, add this line for the fourth variable:

 $(".cat-panel-4").closest("a").prepend("<img src='" + icon4 + "'></img>");

Save your JavaScript file.

Upload Customized JavaScript.

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 section element in the Element Structure Menu.

Select Go to element.

Add the role attribute and give it the value: portal-category in the Element Attributes Panel

Select Save.

Repeat steps 1 to 4 inclusive for each topic that you want to be included as a category panel.

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

For example, mystyles.css.

Add the following code to your CSS file:

.portal-publications .inner-row {    
    display:none;
}

.show-all-category {
    display:none;
}

Save your CSS file.

Upload Customized CSS.

Add this to your JavaScript file:

$(document).ready(function(){
// Panel position
var position = 0;
// Icon/image url
var cloneIcon = "";
// Link url
var cloneLink = "";
// Title text
var cloneTitle = "";


var $original = $('.portal-single-publication').eq(position);
var $clone = $original.clone();


$clone.children('a').first().attr('href', cloneLink);
$clone.find('.cat-panel').first()
.removeClass()
.addClass('fa cat-panel')
.closest('a')
.prepend("<img src='" + cloneIcon + "'></img>")
.find('.publication-icon')
.remove();


$clone.find('h3').text(cloneTitle);
$original.after($clone);
});

Modify the following variables in the first couple lines of code: position=””, cloneIcon=””, cloneLine=”” and cloneTitle=”” .

For example:

var position = "3";
var cloneIcon = "https://mycustomsite.com/icon.png";
var cloneLink = "https://google.com";
var cloneTitle = "Google Link";

If you want the new category panel to always be last in the list, you can remove the position variable line (line 3) and change line 11 to:

var $original = $('.portal-single-publication').last();

Save your JavaScript file.

Upload Customized JavaScript.

Use a text editor or code editor for creating (or updating) the JavaScript file.

Use the following script as a starting point:

const consentTranslations = new Map([
    ["en-GB", "Here, have some cookies"],
    ["en-US", "Howdy, have some cookies"],
    ["de-DE", "Hier, nimm einige Kekse"]
  ]);

let $consentLang = portalLanguage || $('html').attr('xml:lang')

var consentOverride = {
    content : {
        message: consentTranslations.get($consentLang)
    }
}

Edit the message and translations as needed.

Save your JavaScript file making sure it has a .js filename extension.

Upload Customized JavaScript.

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

For example, mystyles.css.

To change the color of the "Featured Content" heading, add:

h5.featured-content-label {    
    color: #DC143C;
}

To change the color of the numbered topic headings and the listed topics, add:

.publication-contents a {
    background-color: #DC143C;
}

To change the color of the icon next to the listed topics, add:

.publication-contents li::before {
    color: #DC143C;
}

Save your CSS file.

Upload Customized CSS.

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

For example, mystyles.css.

Add the following code to your CSS file:

.featured-content-label {
    display:none;
}

.portal-contents featured-content {
    display:none;
}

.portal-contents .inner {
    display:none;
}

Save your CSS file.

Upload Customized CSS.

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 Feedback in the sidebar.

Choose to include or exclude the voting panel (Yes and No buttons) in Use voting panel.

Choose whether you want to Allow users to submit feedback (suggest edits).

Use Toggle feedback with voting panel to control when the email feedback link is shown.

Enter the email address that will receive the feedback email from your readers in Email for feedback.

Select Save.