Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1034111

    Hi,

    I am doing quite some css adjustments on various elements.
    There are two thing which bother me.

    1)
    When I change the page with avia page builder (for example adding an element) then the custom css does not apply anymore. It seems that the css selector changes when you change some part of the page. Is that true?
    Obviously this is a problem as I have to find all the new selectors and replace them. Am I using the right selectors or are there more robust ones? I use browser devleoper tools to find the selectors I need.

    2)
    Up until now I wirte all the code in the quick css window.
    As it is growing to quite some lines of code I wanted to copy-paste the css into the child theme css file. However, at least some of the css does not load from there. It works in the quick css field, but not in the child theme css file. How is this possible?

    Generally, when I finish with developing the page I want to paste everything in the child theme css file. The css always needs to load and it needs to be robust even after I eventually change the layout of some pages (like adding images, text, etc.).

    Hopefully, you can give me some notes on this.

    P.S. Find link to the page and login in private content.

    #1035142

    Hey P3T3R_0ne,

    1. Can you give us an example? probably a screenshot that also shows the web inspector where we can see the custom css class being applied then tell us some elements you add and another screenshot which shows that the custom css class isn’t working anymore.
    2. Quick CSS is an internal stylesheet while child theme css is an external stylesheet, browsers caches external stylesheets so when you access the same site it’s much faster since the css that are loaded are from browser cache, while it has its positive effects, the negative thing is that if there are changes in these css files it isn’t fetched. You can use hard refresh to force the browser to fetch the new css, this is done by pressing ctrl + f5.
    Hope this helps.

    Best regards,
    Nikko

    #1035212

    1.
    Well, I give you just one example.

    Please have a look at the home page. You can see the feather icon. I want the bottom of the feather to be centered above the heading. Therefore I applied the following css to it:

     position: relative;
      left: 34px;

    I used the following css selector which I came up with via crome developer tools ( right click > select selector):
    #av_section_1 > div > main > div > div > div.flex_column.av_one_third.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.avia-link-column.avia-link-column-hover.first.avia-builder-el-3.el_after_av_image.el_before_av_one_third.avia_start_animation.avia_start_delayed_animation > span > span

    The css was applied and the result was fine.

    Then later I changed something above this element. I think it was adding an avia divider. After that change the css was not applied anymore (and others also not).

    Now, the new css slector which chrome developer tool is copying is the following:
    #av_section_1 > div > main > div > div > div.flex_column.av_one_third.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.avia-link-column.avia-link-column-hover.first.avia-builder-el-3.el_after_av_hr.el_before_av_one_third.avia_start_animation.avia_start_delayed_animation > span > span

    As you can see, there is a slight difference in the selector and I guess that is why the css code does not work anymore.

    Now, these selectors look strange in the first place and on top of that they might change when you change an element of the page.
    Also, when I copy the css selector with firefox browser, this is what comes up:
    div.flex_column:nth-child(3) > span:nth-child(2) > span:nth-child(1)
    It works too, but also looks strange and probably not robust.

    My question is: How do I come up with robust css selectors? Whats the best practice with enfold?

    #1036061

    Hi P3T3R_0ne,

    1. I see what you mean, it does change the in that sense, because those numbers for example #av_section_1 depends on their order from top to bottom, for example if you created a Color Section on top of #av_section_1 then that becomes the new #av_section_1, while what was #av_section_1 becomes #av_section_2. You can basically use these selectors if you’re sure that the order is final, however if you need move elements and change their order, I would suggest using Custom Css Classes. To give an example I added leaf-icon on the Custom Css Class of your leaf icon, then I have replaced your css code in Quick CSS from:

    #av_section_1 > div > main > div > div > div.flex_column.av_one_third.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.avia-link-column.avia-link-column-hover.first.avia-builder-el-3.el_after_av_image.el_before_av_one_third.avia_start_animation.avia_start_delayed_animation > span > span {
      position: relative;
      left: 34px;
    }

    to:

    #top .leaf-icon  {
      position: relative;
      left: 34px;
    }

    The issue also with the code you previously used is that if on other pages it will have the same layout with different icon, that css will also apply.

    The best way to code in Enfold is to use Custom Css Classes then use this selector:

    #top .my-custom-class {
    
    }

    if it is still overridden then try using this instead:

    #top #wrap_all .my-custom-class {
    
    }

    Hope this helps.

    Best regards,
    Nikko

    #1036135

    Hi,

    thank you, this will help.

    How do I find out the appropriate selector like in your example #top or#wrap_all?

    #1036215

    Hi P3T3R_0ne,

    If you use a web inspector, you can find the #top id within the < body > tag.
    As for the div with an id of #wrap_all, it’s a direct child div of the body tag which also wraps the header and the content.

    Best regards,
    Nikko

    #1038978

    My css selectors are sound now. Thx for help ;)

    #1039070

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘CSS customizations’ is closed to new replies.