New theme for iTop and bricks color

[lthiry]

Hello,

I have managed to change the portal theme using the iTop documentation : https://www.itophub.io/wiki/page?id=latest%3Acustomization%3Aportal_howto_changebstheme
Unfortunately, the bricks background color doesn't seem to follow the bootstrap CSS.
How can we change them ?

Thanks,

Laurent.

[Guillaume Lajarige]

Hi Laurent,

Can you show with a screenshot precisely what part hasn't change as you excepted?

Guillaume

[lthiry]

Hi Guillaume,
Please see attached.
FYI, I installed the theme as documented, based on the zip file attached in the documentation and selected bootstrap-theme-superhero.min.css
Thanks,
Laurent.

[Guillaume Lajarige]

If the background you are refering to is the grey background of each services, this is not handled properly yet. A bug is tracked and should be fixed for iTop 2.7 hopefully.

In the meantime, you must create another CSS file yourself in which you have to put the desired colors with the following snippet

@media (min-width: 768px){
  .mosaic-item {
    background-color: <REGULAR-COLOR-CODE>;
  }
  .mosaic-item:hover, .mosaic-item:focus {
    background-color: <HOVER-COLOR-CODE>;
  }
}

Then add the new css file to the portal XML configuration along with the bootstrap theme

<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3">
  <module_designs>
    <module_design id="itop-portal" xsi:type="portal">
      <properties>
        <themes>
          <theme id="mosaic-background-fix" _delta="define"><PATH-TO-YOUR-CSS-FILE>.css</theme>
        </themes>
      </properties>
    </module_design>
  </module_designs>
</itop_design>

[lthiry]

Thank you very much Guillaume.
This is working fine.
Is it also possible to change the CSS of the console ?
Have a nice evening,

Laurent.

[Guillaume Lajarige]

You can your own CSS to the console through the iPageUIExtension interface, but you can't replace the orignal light-grey.css file.

There are some examples out there in the community, I'll point you to them if necessary.
Guillaume

[lthiry]

Thanks Guillaume,

Can this be done with an extension ? I do not want to alter the files.
Will that change also in the 2.7 version ?

Thanks

[Guillaume Lajarige]

Yes, this actually has to be done in an extension! :)
It will be compatible with future versions as it is one of the primary hooks for both community's and Combodo's extensions.

Take a look at this file that is part of an extension on iTop Hub.

[lthiry]

OK, thanks Guillaume.
I though this would have been as simple as for the portal to replace the CSS, but this seems complex.

[Guillaume Lajarige]

Not really, just make a new file with the following class

class MyUIExtension implements iPageUIExtension
{
    public function GetNorthPaneHtml(iTopWebPage $oPage)
    {
        $oPage->add_linked_stylesheet(utils::GetAbsoluteUrlModulesRoot().'YOURMODULENAME/style.css');
        return '';
    }

    public function GetSouthPaneHtml(iTopWebPage $oPage)
    {
        return '';
    }

    public function GetBannerHtml(iTopWebPage $oPage)
    {
        return '';
    }
}

[lthiry]

Hi Guillaume,

Thanks for helping me.
When I run the setup to integrate the new extension, I get the error message :

Fatal error: Interface 'iPageUIExtension' not found in /var/www/html/itop/setup/extensionsmap.class.inc.php(444) : eval()'d code on line 51

I replaced the 'YOURMODULE' by

$oPage->add_linked_stylesheet(utils::GetAbsoluteUrlModulesRoot().'sample-portal-new-theme/css/bootstrap-theme-superhero.min.css');

Thanks again,

Laurent.

[Guillaume Lajarige]

That's weird, can you share your code?

About the css file you linked, it's fine but adding a bootstrap theme to the admin console is not recommended. The console is not based on bootstrap, so you have to make your own CSS file to change what you want.

That being said, the admin console is not meant (yet) to be advancely themed like the portal, you might be able to change some colors, but you won't be able to theme it like the portal easily.

[lthiry]

I added the followng code to the php file named module.sample-portal-new-theme.php

class MyUIExtension implements iPageUIExtension
{
    public function GetNorthPaneHtml(iTopWebPage $oPage)
    {
        $oPage->add_linked_stylesheet(utils::GetAbsoluteUrlModulesRoot().'sample-portal-new-theme/css/bootstrap-theme-superhero.min.css');
        return '';
    }

    public function GetSouthPaneHtml(iTopWebPage $oPage)
    {
        return '';
    }

    public function GetBannerHtml(iTopWebPage $oPage)
    {
        return '';
    }
}

Well if the console is not based on bootstrap, there are no reason to continue :(

Thanks,

Laurent.

[Guillaume Lajarige]

The console theming should be easier in iTop 2.8, but it has to be confirm yet.