Custom Portal Theme – Unexpected Scrollbar in Navigation Menu

[Jacopo D.]

Hi everyone,
I've successfully created a new portal and was working on applying a custom theme.

Following the steps described in the wiki, I downloaded a theme from https://bootswatch.com/3/ and included the CSS within the same extension.
The only difference compared to the wiki is that I kept everything in a single extension, whereas the wiki splits it across two separate extensions.

Now, it seems there are some differences between the default portal and the one I’ve just created.
For example (see attachments), a scroll bar appears in the navigation menu in my version.

Do you have any idea what might be causing this?
Could it be due to an incorrect version of Bootstrap?
I'm using iTop version 3.2.1-1-16749.

[Molkobain]

Hello Jacopo,

Could you share your XML so that we can see if anything seems odd?

[Jacopo D.]

Hello,

please find attached the complete extension.

[Molkobain]

Thanks for the module, the problem might be there:

<themes>
      <theme id="custom">/portal-extension/css/bootstrap.slate.min.css</theme>  
</themes>

• You put a "/" at the beginning of the path. It should be relative to env-production, and will be concatenated with the app root url of your itop. With that extra "/", depending on your webserver it might not be correctly interpreted.
• As you are replacing the default Bootstrap theme of the portal, you replace the id="bootstrap" theme node, not the "custom" one.

So try with:

<themes>
      <theme id="bootstrap">portal-extension/css/bootstrap.slate.min.css</theme>    
</themes>

Note that I haven't tested your module on an iTop instance, so I'm not sure it's the issue.

[Jacopo D.]

Many thanks, dear,
It seems the issue was exactly where you pointed — much appreciated!

One last question: do you know why the default brick tile icon (text) appears correctly in red (as defined by the theme), while the pie-chart Font Awesome icon shows up in orange instead?

I'm attaching the complete extension again, just in case.

[Molkobain]

Glad to see you fixed it! :)

Regarding the orange pie chart, I don't really know. It might be a bug of the portal theme (the layer on top of the bootstrap theme), not using the BS theme colors correctly there.

Ant thoughts @sabello ?

[Stephen Abello]

Yes it's probably an error when the chart tile was developped as it seems to use the default orange in portal.scss, so no luck overriding it with the bootstrap theme.

You could add a css rule to you bootstrap or to another file that'll you'll add to the <themes> collection to override this rule:

.home .tile .tile_title > span.icon {
    color: yourredcolor;
}

You might also need to add !important after yourredcolor as I'm not sure if the bootstrap file is called before or after the portal file

[Jacopo D.]

Thank you very much, it worked perfectly!
The override could be an interesting solution if other aspects of the theme need to be customized as well.