• lloydj1988

    (@lloydj1988)


    [ Moderator note: moved to Fixing WordPress. Please do not use Developing With WordPress for these topics. ]

    Hello everyone,

    I am wondering if I can get some help with the following problem. I have recently minified my CSS on my website and it creates a coloring issue in the header area for me. I have tried adding some custom css to over ride the problem whoever it is not working as it is being blocked by the following:

    media=”screen and (min-width: 481px)”
    autoptimize_9257f6f….css:9
    #mastlogo {
    background-color: #30455c;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.05);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.05),0 1px 0 rgba(0,0,0,.05);
    box-shadow: 0 2px 2px rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.05);
    }
    If I uncheck the background color in the page inspect it fixes the problem and reverts back to the custom css I added changing the backgorund color to f4f4f4. Is there a way to remove background-color: #30455c; so that it displays as though I have unchecked it in the inspect window?

    thanks for your time

Viewing 7 replies - 1 through 7 (of 7 total)
  • Optimizing Matters

    (@optimizingmatters)

    did you try setting the background-color in your custom css with the !important flag?

    Thread Starter lloydj1988

    (@lloydj1988)

    Yes, through playing around with it more I have found that the only thing that I have found that works is to change the following things in the parent themes style.css:
    #wp-admin-bar-shortcode-secondary .ab-sub-wrapper,
    .header-notifications .pop,
    .header-account-login .pop {
    position: absolute;
    background-color: #f4f4f4;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    top: 74px;
    left: 0;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    }

    #mastlogo {
    background-color: #f4f4f4;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    }

    .header-inner {
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding-left: 30px;
    background: f4f4f4;
    position: relative;
    z-index: 5;
    }

    Obviously this is going to be inconvenient when I need to update my theme. When I added the code to the style sheet of my child theme for some reason it was always overridden by the parent theme option.

    Optimizing Matters

    (@optimizingmatters)

    can you share your site’s URL so I can have a quick look?

    Thread Starter lloydj1988

    (@lloydj1988)

    It is behind a coming soon page but i’ll take it down for a little while. It won’t be showing up on any search engines just yet anyway.

    The website url is https://icecoachonline.com

    I have changed the code in the themes style sheet now so the part I listed before will show up with the color #f4f4f4 until I the theme has an update. I am having an absolute nightmare trying to minify and concatenate the CSS.

    Optimizing Matters

    (@optimizingmatters)

    well, you’ve got lots of separate CSS-files for different media-types there, that makes optimization a tad more difficult (cfr. this blogpost on AO + buddypress CSS).

    but I’m not fully following here I’m afraid, can you list which CSS-files (or inline CSS) impact that background color?

    Thread Starter lloydj1988

    (@lloydj1988)

    So the css file that is affecting the background color loads from themes>boss>css>main-desktop.css

    In this theme I am using “social learner” by buddyboss there is a built in customizer in the admin panel where you can full customize most style aspects of the website from the backend without having to add any custom code at all. You just have to have to select the color you want for different parts of the website. So I had this all nicely configured.

    Everything was fine until I used autoptimise to minify the CSS (it minified the html and javascript without any issues). First of the top nav par didn’t quite display properly so I excluded ” header-style-2-css” from being optimized and this fixed the placement issues. Now I just had the colors being a bit funky.

    After diggin around I found that these were the specific lines with in the desktop-main.css that were loading colors that I didn’t want:

    #wp-admin-bar-shortcode-secondary .ab-sub-wrapper,
    .header-notifications .pop,
    .header-account-login .pop {
    position: absolute;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    top: 74px;
    left: 0;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.2);
    }

    #mastlogo {
    background-color: #03544c;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 2px 2px rgba(0,0,0,0.05),0 1px 0 rgba(0,0,0,0.05);
    }

    .header-inner {
    display: table;
    width: 100%;
    box-sizing: border-box;
    padding-left: 30px;
    background: #fff;
    position: relative;
    z-index: 5;
    }

    I tried to override these by adding custom CSS to my child theme. i’m not very good at that as I am new to this sort of thing, so I was adding things like:
    #mastlogo {
    background-color: #f4f4f4;
    }

    I tried various things to but for some reason the color always reverted to the parents themes default color within the desktop-main.css file.

    In the end I just went into the parent theme desktop-main.css and fixed the parent theme file and now it displays correctly.

    I was looking for a solution that would override the colors (only 3 colors specifically from my first example, the others all work without any issues) without having to edit them in the parent theme.

    I tried my best to explain the situation to you, I am quite new to this so I apolagise if it is a simple problem etc.

    Thanks for the link to the article by the way, It was very useful to read through.

    Optimizing Matters

    (@optimizingmatters)

    can you try something like this;

    #mastlogo {
    background-color: #f4f4f4 !important;
    }
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Removing an annoying piece of CSS’ is closed to new replies.