Viewing 28 posts - 1 through 28 (of 28 total)
  • Author
  • #424996


    I’ve been attempting to edit some areas with some custom CSS, and I cannot seem to get them to work properly, even code that I find through these support forums.

    1. Removing blog post comment sections, this is what I have input yet the comments are still there. {
    display: none !important;

    2. With the full-width menu setting, the right item is a little too close to the edge. I attempted using this to resolve the issue.

    .av-main-nav-wrap {
    margin-right: 35px!important;

    3. Attempting to make the sidebars have less left margin as currently on a 27″ display it looks a bit empty.

    .sidebar {
    margin-left: 50px !important;



    Hey haydaw!

    1. If your talking about the post meta comments then you can do it with this.

    .slide-meta-comments { display: none !important; }

    If your talking about the post meta comments in the single post view then try this.

    .comment-container { display: none !important; }

    2. + 3. Hmm, it’s a little hard to understand. Can you send us links to your pages and perhaps some screenshots highlighting your intentions so we can get a better idea?


    • This reply was modified 4 years, 9 months ago by  Elliott.

    Hey! Thanks for the reply, I couldn’t get the code supplied to work.

    Here is the code in the Quick CSS:

    ‘.slide-meta-comments { display: none !important; }

    .comment-container { display: none !important; }’

    I also attempted

    ‘.comment-meta-container { display: none !important; }’ and did not get anything to work. You can see an example here: [REDACTED]

    When I play with the CSS in my browsers developer window, I can turn these areas off no problem, and I can see that it is in fact .comment-container, so I am not sure why it is not working when I apply the code into the Quick CSS.


    • This reply was modified 4 years, 9 months ago by  haydaw.


    Did you try !important; after your CSS statements? Also, are you using any caching plugins? If so, please delete the cache and disable the plugin while testing.

    Best regards,



    Yes, I did use this in the code. It seems like a lot of the custom CSS elements I am using are not showing up. This is not because of a caching issue.

    The comment sections are still showing, and now I have some other CSS that I cannot get to work.

    Please take a look at the comments on this page:


    • This reply was modified 4 years, 9 months ago by  haydaw.
    This reply has been marked as private.

    Here is some other code I cannot get to work:

    **Homepage Slider font family**
    div .slideshow_caption h2 {
    font-family: ‘Open Sans’, ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif !important;
    font-weight: 300 !important;

    **Full Width Footer**

    #footer .container {
    max-width: 95% !important;

    **Padding added to full width header**

    .html_header_top #top .av_header_stretch .container {
    width: 93% !important;

    **Edits to framed text on homepage slider, increasing framed boxes size**

    .caption_framed .slideshow_caption .avia-caption-title {
    padding: 100px 150px !important;
    margin-left: -60% !important;

    Any idea why these are not working? I would really appreciate it if someone could take a look at the backend, because I believe I have the code correct but nothing seems to be taking effect.


    Hello, is there any update on this? I don’t know why I seem to be having so many CSS issues with the theme, I’m not sure if using Chromes inspector is not showing me the correct CSS elements I need to be editing, but it even the code I’m given isn’t working.

    If it would be possible to take a look at the backend and let me know if the CSS is correct or not that would be greatly appreciated.



    Sorry for the late reply Haydaw! I believe this issue is now resolved? :)



    Hello Yigit,

    I actually never did get this resolved.

    For more information, I am trying to get the footer to be 100% width such as the header.

    You can see an example of that here

    Also, I believe the current “100% width header” makes it roughly ~96% full width, I would like for both the header and footer to be 93%.



    I can confirm this that the custom css is not working on our site either. I have just updated to to the newest version of Enfold.



    Header and footer width seems to be the same on my end. Please see screenshot here –
    Custom CSS code is being applied successfully –
    Have you tried flushing browser cache and check if that helps?




    @robinleung Please post the link to your website. We may need a temporary admin login as well to look into the issue.


    This reply has been marked as private.


    @robinleung I added following code to Quick CSS and it worked

    .logo { display: none; }

    Please make sure to flush browser cache and refresh your page a few times after applying custom CSS code. Also, please disable CSS minifying in Total Cache plugin before adding custom CSS code.

    Edit: Please try disabling CSS minifying feature as i mentioned and check if that helps with custom.css file

    Best regards,

    • This reply was modified 4 years, 9 months ago by  Yigit.

    Hi Yigit,

    The Quick CSS function works fine for us as well, but we aren’t looking to depend on Quick CSS to hold all the styling changes we want to make.

    It looks like any changes I make in the CSS files (custom.css, layout.css, shortcodes.css) don’t actually apply any changes to the site. I’ve even tried removing all the stylesheets to see how it affects the styling, but it still only displays a default layout drawn from the dynamic-css.php file.

    For example, one of the buttons are styled to look like this in the custom.css file:

    .avia-button.avia-size-medium {
        padding: 11px 30px 9px 30px;
        width: 200px;
        -webkit-transition: all 0.4s ease 0s;
        -moz-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
        letter-spacing: 1.5px;
        border-radius: 0px;
        background: none;
        border: 2px solid rgba(255,255,255,0.4);
        font-size: 13px;
        text-transform: uppercase;
        font-family: 'Open Sans', 'Hiragino Sans GB', 'HiraKakuProN-W6', 'SimHei' sans-serif;

    This worked fine before, but for some unknown reason it stopped working.




    Can you please try adding !important rule as following and check if that helps

    .avia-button.avia-size-medium {
        padding: 11px 30px 9px 30px !important;
        width: 200px !important;
        -webkit-transition: all 0.4s ease 0s !important;
        -moz-transition: all 0.4s ease 0s !important;
        -o-transition: all 0.4s ease 0s !important;
        transition: all 0.4s ease 0s !important;
        letter-spacing: 1.5px !important;
        border-radius: 0px !important;
        background: none !important;
        border: 2px solid rgba(255,255,255,0.4) !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        font-family: 'Open Sans', 'Hiragino Sans GB', 'HiraKakuProN-W6', 'SimHei' sans-serif !important;



    Hey Yigit,

    It didn’t work. I suspect the custom.css file isn’t even being used by the webpage.



    Have you tried de-activating all active plugins to see if that helps? On your source code, links to CSS files look like this – wp-content/themes/enfold/css/A.layout.css,



    Hi Yigit,

    What do you mean by source code? I don’t see this in my FTP client.


    We’ve disabled all possible plugins but still don’t see where it’s going wrong.



    @robinleung: Did you install any minify or cache plugins? And make sure that you have the latest version of the theme. Right now, the theme version is 3.0.4. Please update to 3.1.3.

    Best regards,


    Hi Ismael and team,

    Yes I do have W3 Total Cache enabled. What you see here is a brand new install with data restored that’s why it was 3.0.4 and custom css was still working (that was the last working version before it stopped working). Once I’ve updated to the latest version of Enfold (3.1.3) custom css does not work. We’ve been having trouble since.



    go into your W3 Total Cache settings and deactivate caching. Afterwards clear browser cache and refresh your site a few times. If that does not work your server might use some kind of caching and you would need to contact your host.



    Thanks for all the support. I’ll take another poke at it.



    Ok, please let us know if you should have any further problems.




    I have a Enfold theme with business flat settings. (
    I want to change the text style (not so bold) in title and the full slider. I wrote the following text in Quick css, but it doesn’t work.
    If I’m in admin page, it’s ok, but without sign in it doesn’t work.

    Can you help me?

    .avia-caption-title {font-family: Open Sans; font-weight:100 !important; }
    .avia-caption-content { font-family: Open Sans; font-style: none; }
    .avia-caption-title { background: rgba(78, 202, 194, 0.0) !important; }
    .avia-caption-content p { background: rgba(78, 202, 194, 0.0) !important; }
    .slideshow_align_caption { top: 5%; vertical-align: inherit; }

    .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title
    {text-shadow: 1px 1px 1px #696969;}
    .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content
    {text-shadow: 1px 1px 1px #696969;}


    Hi Hoffy,

    The CSS should apply regardless of you being logged in or not, could you try clearing your browser cache and reload a few times or try a different browser and/or machine please?

    Best regards,

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

You must be logged in to reply to this topic.