Mosaic customization

[Clement P.]

Hello,

I would like to customize our Mosaic to match our company color and i've followed the previous discussion on the same topic.

I'm already having an extension that modify the boostrap css that works flawlessy with the following configuration :

Datamodel XML :

<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="bootstrap" _delta="define_if_not_exists">portal/css/xxx.css</theme>
</themes>
</properties>
</module_design>
</module_designs>
</itop_design>

Within the css file i've added the snippet below :

@media (min-width: 768px){
.mosaic-item {
background-color: #7f25ff;
}
.mosaic-item:hover, .mosaic-item:focus {
background-color: #ff00ff;
}
}
.mosaic-item {
background-color: #7f25ff;
}

Still while updating the code, I don't see any change on the mosaic color. What am I missing ? Thanks for your help.

[Clement P.]

Hello, is anyone have any idea how to fix that issue? I would appreciate it, thanks!

[Stephen Abello]

Hi Clement, sorry for the late reply.

This is a known issue, if you followed the steps in this wiki page, there seems to be a limitiation for mosaic colors.

Instead you need to create a CSS file in your extension with your the CSS content your provided, and add it to a different <theme> node:

                <module_design id="itop-portal">
                        <properties>
                                <themes>
                                        <theme id="css-addons" _delta="define">portal/css/xxx.css</theme>
                                </themes>
                        </properties>
                </module_design>

I hope this helps,
Stephen

[Clement P.]

Hello Stephen,

I did tried it but without breaking into a different module design/theme within my datamodel - it does work now - thank you for your help - i appreciate it!