How To Add A New Css Class?

Multi-Vendor Questions
1

I am trying to separate a vertical menu in the Theme Editor so that I can have colors different from the main menu. I have found some information on how to do this, but the first step is to create a new CSS Class for the block. I have no idea how to do that. I can't seem to find any specific instruction.

I have been able to add a custom field to the Theme Editor, but I haven't found info on how to link that to the new menu, and I think there is more to that since the field doesn't have the right name.

2

When you edit block, you can see the User-defined CSS-class field

http://prntscr.com/kkndb1

3

I assume you mean the block made in block manager and placed into the layout (versus in a file somewhere). I was thinking it had to be more complicated than that. I did do that, nothing changed. How do I link it to the new custom field in the Theme Editor?

In the User-defined CSS-class field of my block I wrote design_menu. In design/themes/my-themes/schema.json I added under the colors section:

},
"design_menu":{
"description":"theme_editor.design_menu_color"
},
"design_menu_links":{
"description":"theme_editor.design_menu_links_color"
In the theme .less file under Variables I added:
@design_menu_links: #b590eb;
@design_menu: #ffffff;
This was the only information I have been able to find. There must be another step I am missing. I have cleared the cache. In the Theme Editor I get 2 new flelds:
_theme_editor_design_menu_color
_theme_editor_design_menu_links_color
They should be Design Menu and Design Menu links.
4

Sorry, I misunderstood you.

Looks like you only need to add two languages variables:

- theme_editor.design_menu_color

- theme_editor.design_menu_links_color

It can be done on the Administration -> Languages -> Translations page or .po file in the module

5

Thank you. I wondered about that. Now I have Design Menu and Design Menu links in the Theme Editor, but they still don't appear to be linked to the menu.

6

Did you add these variables to required classes?

7

Sorry, I have no idea what that means. I am very inexperienced with CSS. I don't know what the required classes would be or where to find them.

8

I do not know what theme do you use, but you should use new variables in the following way

.ty-menu__items {
    background: @design_menu;
}
9

Thank you! I didn't get it right when I tried that before. Now I understand. I look forward to playing with variables now.

10

One more questions for you. I have been able to change just about any color I want now, but I have one problem I can't figure out. I want to set the hover color on the vertical menu main items. I have been trying to adapt the coding from the main menu, but it isn't working out. Adding a modified version of the code gets me my hover changes, but it bleeds into the submenu. The submenu hover setting work fine, just the normal background and text color seem to be affected.

/* menu backgound and text color on hover*/
.no-touch .ty-menu-vertical .ty-menu__item:hover .ty-menu__item-link,
.is-hover-menu .ty-menu__item-link
.is-hover-menu.ty-menu__item-active .ty-menu__item-link {
background: darken(@design_menu, 3%);
color: white;

Without the added code, the hover color is tied to the main menu background. I haven't been able to find out why. It doesn't seem to be specified anywhere. In this case, the settings I have for the submenu work fine.

11

Please specify how do you want to solve the issue? Have another background for submenu?

12

I would like to be able to change just the hover color on the vertical main menu items. Right now that means either figure out how to separate it from the main horizontal menu background (I have no idea why they are linked), or figure out why the code I adjusted/added is affecting the submenu too. The horizontal menu has just the hover. I tried to copy that code and alter it for the vertical menu. That is how I got the hover to work as a separate color, but clearly I didn't get something right. The submenu has a separate background color already that works until the hover code is added.

13

It is required to examine issue on your website. Also check how immediate children selector (greater than) works in CSS

14

Thanks for the suggestion. I will consult some CSS guides I have and see if I can figure it out. Right now I am working changes on my local site before implementing live.