Changing a color of menu bar in one enviroment (quality).
Application Type
Traditional Web

Hello,

I have a pretty basic app. I have a menu at the top of my app and the color of that menu and all the dropdown menus is blue. I would like to change it in one of the environments (testing) to green.

Currently my styles are coming from classes in London and Application themes.

My idea was to use a site property for instance: MenuGreen (boolean) and set it up to true only in quality environment where I want to use the different color. It is just an idea, I still don't know what would be the best way to implement it.

I would be grateful for some ideas and help with this issue.

Thanks!

Kamila

mvp_badge
MVP

Hi Kamila,


I agree with you, using a site property would also be my approach.

I would have two classes, one for the green and one for the standard color, and apply the classes according to the site property.


Kind Regards,
João

Perfect, I am glad you are agreeing with me.

What would be the best way to shuffle those classes though, how would you add it to menu and sub menu items?

I added a new class called .green to the stylesheet of my Webblock, that simply has a color and background color, but when I add it to an element it doesn't override the color that comes from the main themes.

Also, in the property Style Classes (see below) I cannot add a condition to depending on that the value of site property is the class used changes.

Am I doing something wrong? Can you please elaborate?

Thanks - Kamila

mvp_badge
MVP

Hi Kamila,


CSS stands for Cascading Style Sheet, so you can define styles in cascade. For instance, you can apply a class to the menu and define that for the submenu entries inside that class, they will adopt a different class value. For instance, let's take a look at this snippet taken from BaseTheme:

It is saying that all links ('a' element) with the class Menu_SubMenuItemActive that are inside an element with class Menu_DropDownPanel will have the primary color.

But you can have define a behaviour to override this:


.Menu_DropDownPanel.mygreenclass a.Menu_SubMenuItemActive {
color:green;
}


In this case if the element has both classes Menu_DropDownPanel and mygreenclass, the links with Menu_SubMenuItemActive will have the blue color.


Regarding conditional classes, You can use an expression to define a class using the attributes, like this:

 

Take into account that the class defined in the Style Classes property will be discarded when you use class as extended property.


Kind Regards,
João

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.