Dentalia has now been updated to 2.3 and a major update for Recycle is coming soon. We hope you enjoy the new features! Thanks for your patience!

Okay
  Public Ticket #2272917
css priority
Closed

Comments

  •  1
    abpostman1 started the conversation
    January 16, 2020 at 5:53pm

    Hello,

    i've spent several hours trying to find a way to apply my custom css for one item in my top menu. I could apply background color but couldn't apply text color. In Chrome console, i can see it's not applied (crossed). I looked at my source code and i could see lotsa css loaded after my child css and i think they overwrite my text color. 

    So i took informations about wp_enqueue_style and i tried several modifications in my custom functions.php on this code. (with DEBUG BAR + SCRIPT & STYLES)

    function enqueue_styles_orion() {

        $parent_style = 'parent-style';

        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'enqueue_styles_orion' );

    ... without success.

    I tried to do it with Theme Option Custom CSS ... not better.

    I would like to load my child CSS at the very end of all other CSS loading.

    Can you please help me ?

    I atttach you the list of the loaded styles (Debug)

    Thanks

  •  564
    OrionThemes replied
    January 16, 2020 at 6:54pm

    Hi,

    As I see, your child theme style.css loads after the theme css, which is as it should be. Also if you add it to Theme Options -> style css, it will load it after the theme style.css.

    The problem is elswhere. It is not just priority of CSS files, but also the specificity to take into the account. The more specific css selector will always overwrite the less specific selector. Another issue is that you are applying the color to the li element, but it should be applied to its link element a

    Let me explain:

    I see you'we added a class pieces to the menu item and your css is:

    .pieces {
    font-size: 20px;
    background-color: red;
    color: #ffffff !important;
}

    If you want to use !important, you can just write:

    .pieces {
    background-color: red;
}
.pieces a {
    font-size: 20px!important;
    color: #ffffff !important;
 }


    This should work and you don't need to do anything else. However if you are interested, there is also an alternative solution, which doesn't require you to add a class to a menu item, or use !important in your css.


    The easiest to go about is to find its id in browser dev tools (F12). Mark the menu by clicking on the1945744522.png icon

    4645650748.png

    Then check how the color is applied to it:

    6197319807.png

    So you now have a selector, and you know the id of the menu item. You can just copy the selector and add the menu id like this:

    .nav-light .nav-menu > li#menu-item-1924 > a {
 color: white;
}

    Put it either inside a child theme or into theme options -> Custom CSS. It should work without an issue.

    Let me know ho it goes,
    Andrej

    OrionThemes

  •  1
    abpostman1 replied
    January 17, 2020 at 10:40am

    Hi,


    thanks a lot to have taken time for answering.

    And it was very well explained : understood everything :)

    I followed your advice and it works.

    I just thought that when adding a class in menu builder , it would be applied to the <a> text too.

    Have a nice day.

  •  564
    OrionThemes replied
    January 17, 2020 at 11:34am

    Hi,

    Thank you for getting back to me. I am glad i was able to help.

    Andrej

    OrionThemes