Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 19, 2017 at 4:30 pm #853912
    fabienneRedUmb

    HI,

    Could you post a list of all css classes I need to change
    a, background color of main headers on all devices
    b, font color of all elements in header area
    c, font color of highligted menuitem
    d, background color of submenu that shows when you hover over a menuitem with submenuitems

    Thank you

    September 19, 2017 at 5:38 pm #853962
    Yigit

    Hi,

    1- Please go to Enfold theme options > Advanced Styling and edit “All Headings (H1-H6)”
    2- Please go to Enfold theme options > General Styling > Logo Area. You can find additional options in Enfold theme options > Advanced Styling.
    3- Please go to Enfold theme options > Advanced Styling and edit “Main menu links” and check “Apply only to mouse hover state”.
    4- Please go to Enfold theme options > Advanced Styling and edit “Main Menu sublevel Links” and check “Apply only to mouse hover state”.

    You are welcome :)

    Regards,
    Yigit

    September 19, 2017 at 7:49 pm #854006
    fabienneRedUmb

    I would like to specificly change all headers on certain pages via page-id.
    So the Options-general Styling is not much help.

    thx

    September 20, 2017 at 1:38 pm #854355
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    .page-id-59 h1,.page-id-59 h2,.page-id-59 h3,.page-id-59 h4,.page-id-59 h5,.page-id-59 h6 {
    color: orange !important;
}

    Best regards,
    Yigit

    September 20, 2017 at 4:29 pm #854440
    fabienneRedUmb

    Doesnt this change all the headlines?

    I am talking about the fonts specificly in the header are, like the main menu navigation and the social media icons, same as the icon for the search

    • This reply was modified 7 years, 2 months ago by fabienneRedUmb. Reason: Added specific information
    September 20, 2017 at 5:44 pm #854497
    Victoria

    Hi fabienneBESD,

    Did you mean to make the menu links orange?

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.main_menu ul:first-child > li > a,  .header_color .main_menu ul:first-child > li.current-menu-item > a,
 .header_color .main_menu ul:first-child > li.current_page_item > a, 
 .main_menu ul li  a * {
  color: orange;
}
.main_menu .sub-menu span.mega_menu_title.mega_menu_title a {
  color: orange !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 20, 2017 at 5:47 pm #854501
    fabienneRedUmb

    No, not orange, but i can adjust the color to my liking, thank you for the id selectors.

    September 20, 2017 at 5:51 pm #854508
    fabienneRedUmb

    Could you let me know which id selectr changes what here:

    a, background color of main headers on all devices
    b, font color of all elements in header area
    c, font color of highligted menuitem
    d, background color of submenu that shows when you hover over a menuitem with submenuitems

    Thank you, much appreciated.

    September 20, 2017 at 5:54 pm #854510
    fabienneRedUmb

    Oh – and the provided code does not change the icon color of the social media and search icons.

    September 21, 2017 at 4:43 pm #854943
    Victoria

    Hi fabienneBESD,

    Oh – and the provided code does not change the icon color of the social media and search icons.

    no it does not. It’s just for the menu.

    As for your previous reply,

    a, background color of main headers on all devices

    not very clear, you need to be more specific.

    You can check any selector in the DevTools in Chrome

    Best regards,
    Victoria

    September 21, 2017 at 7:10 pm #855019
    fabienneRedUmb

    I found most selectors, but not the one changing the hover effect. If you could provide at least that one, that would be extremely helpful.

    September 22, 2017 at 9:18 am #855266
    Victoria

    Hi fabienneBESD,

    To find hover rules in DevTools you pick an element in the Elements tab, you see the 3 dots on the left, press on them and there you can change the element state and see the rules for it. More details in private.

    If you don’t find what you need, please write the specific elements you need the hover for.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.