Menu

Custom Portal Theme – Unexpected Scrollbar in Navigation Menu

Jacopo D.
6 days ago
17 hours ago
  • Jacopo D.

    Jacopo D. - 6 days ago

    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

    Molkobain - 6 days ago

    Hello Jacopo,

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

     
  • Jacopo D.

    Jacopo D. - 6 days ago

    Hello,

    please find attached the complete extension.

     
  • Molkobain

    Molkobain - 6 days ago

    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.

     

    Last edit: Molkobain 6 days ago
  • Jacopo D.

    Jacopo D. - 6 days ago

    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

    Molkobain - 6 days ago

    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

    Stephen Abello - 5 days ago

    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.

    Jacopo D. - 17 hours ago

    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.

     

Log in to post a comment.

Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.