CSS customizations

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

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

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

Hi,

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

Best regards,
Jordan Shannon