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.

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.