Customize Fullmoon theme V3

[Marco]

Hi All,
I'm playing a bit around the new iTOP. I would like to ask you if someone tryied to customize the Theme.
Following the Wiki (https://www.itophub.io/wiki/page?id=latest%3Acustomization%3Atheme), I would like to change just one color using the approach proposed:

<branding>
<themes>
<theme id="user-content-fullmoon">
<variables>
<variable id="user-content-ibo-hyperlink-color" _delta="redefine">purple</variable>
</variables>
</theme>
</themes>
</branding>

Unfortunately it is not working. Something like the variable not exist. If I try "define" instead of "redefine" the code is compiled, but anyway without any impact.

Thanks in advance
Marco

[Guillaume Lajarige]

Hello Marco,

How did you try it, with an extension you made? If so, did you put a dependency to the itop-structure module in it? The "Fullmoon" theme is define there, so you need to have a dependency in order to alter it :)

Hope this helps,
Guillaume

[Marco]

Hi Guillaume,
yes I have an already existing custom extension I Used to change the logo and stuff like that (basically for the server branding)

Now in the same extension I added :
'dependencies' => array(
'combodo-backoffice-darkmoon-theme/3.0.0',
'itop-structure/3.0.0'
),

BR
Marco

[Guillaume Lajarige]

Hum, would it be possible for you to share the extension with us so we can troubleshoot locally? I hope we did not forget something.

Guillaume

[Marco]

Hi Guillaume,
no problem, except one logo there are no sensitive data inside. It is really a small extension.
I just added the Themes inside the existing "Branding" tags.

Thanks for your support

BR
Marco

[Guillaume Lajarige]

I did not tested it personally, but Stephen has replaced the "redefine" with a "define" and it works like a charm!

[Marco]

that' true, the variable "ibo-hyperlink-color" with the define it is working.
May I ask you to check the variable "ibo-navigation-menu–body–background-color"?
This if I'm not wrong should change the left menu, and to me also with the define it is not working.

Thanks
Marco

[Stephen Abello]

Hi Marco,
This variable works, but it seems it's not displayed correctly in our wiki as it should be ibo-navigation-menu--body--background-color with double hypens instead of long hypens, I'll notify our wiki manager.
I'm getting this result using the correct one:

[Marco]

Hey Stephen, thanks a lot. It is working well now.
Maybe I can ask you the last question, what is reported in the Wiki are only the main variable, where I can read all the variables? In which file are placed?

Thanks again and have a nice weekend!

BR
Marco

[Stephen Abello]

You can find these variables at the top of each file located in css/backoffice. All these files are organized following SASS 7-1 system that you can find in the README at the root of this directory.

If you need to find a specific variable for an element on your screen I recommend inspecting the element with your browser developer tools (F12) and finding the CSS class responsible for the color or the style you want to change, and find where this class is stylized in the css/backoffice folder, you'll most likely find the right file and all its over-loadable variables will be there.

I hope this helps!

Stephen

[Polpri]

Hello Marco,

insert the variable "ibo-color-primary-XXX" and set it to "ibo-color-primary-600" in your definition and chose your color you want. Witg the value of '600' it schould work the collor off all other icons.

<variable id="ibo-color-primary-600" _delta="define">purple</variable>

I hope this helps!
Poly