Hi
Can someone pls share a custom css code to change the B/G color of ‘Product Filter’ on the Shop page of my Wordpress site ?
There 2 sections of the Filter namely: the Placeholder text & drop down values.
The b/g color to use #f8f8f8
Thanks in Advance
Anyone ? Or is it not possible ?
Sorry, I missed this post. I’ll take a look when I get back to the desktop this afternoon (unless someone jumps in first).
This seems to be your selector for that whole block
.ns-before-archive-products {
background-color: #f8f8f8;
}
Alternatively for the inner outlined sections
ul.nasa-top-row-filter,
.nasa-filter-variations-widget-wrap {
background-color: #f8f8f8;
}
You should be able to figure this stuff out for yourself, or atleast have a go. If you hover over the area you are interested in, right click to open the menu and select ‘inspect’. This will open the inspector. You will more than likely need to scroll up the html on the right to find the parent container. If you hover over the html it will highlight the area on your page to the left.
Here is a screenshot showing that process.
Just a BTW, you will want to look for specific class names. Don’t go with ‘widget’ or ‘small-block-grid-1’, as these are general styles that may well be applied to many elements on your pages. ‘.nasa-filter-variations-widget-wrap’, appears to be a more specific rule that applies to the filter menus, so seems a good choice.
@rpg
Thanks for sharing the code.
Is it possible to tweak the code to apply the b/g color to the full width of the section ?
Also, apply the b/g color to ‘Categories’ drop down ?
P.S: thanks for sharing the tips, unfortunately, my technical skills is limited to Oracle Appl. tools, SQL, PL/SQL..etc. I have zero experience with web programming skills. The syntax under dev tools looks scary enough to read let alone formulating a custom code. 
Rgds
As I said, atleast have a try. Even if you can’t figure out how to style it, you could for instance come here and say, I think I have found the classname with inspector. I’ve tried giving it a background colour but it looks like this, and I need something different. It is worth trying to learn a bit about it. If you have a technical mindset, it shouldn’t be that much of a stretch 
Ok, this is just eye-balled. @PaulOB might want to improve on this.
.filters-container.nasa-filter-wrap {
margin-inline: -40px;
padding-inline: 30px;
background-color: #f8f8f8;
}
It needs to have those two classes to give it enough specificity/importance to overrule existing styles. .nase-filter-wrap won’t work.
Negative left and right margins e.g. margin-inline: -40px; drags the box out to full width (eye-balled), adding left and right padding e.g. padding-inline: 30px; squashes the content back in to line up with the content below. Again eye-balled.
It seems to work.
@rpg
As the saying goes, you can’t teach an old dog new tricks.
What I gave you is bad, you need to scrap that.
The width is being set by the parent .row class. It has a max-width on it. The trouble is that the row contains the grid of product images below as well, so any settings will affect that too. I’ll have a think.
A work in-progress. This doesn’t account for breakpoints yet, but at fullscreen it seems to be working — heading in the right direction possibly.
.row.nasa-store-page {
max-width: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.ns-before-archive-products {
background-color: red; /* just for clearer visualising at this point */
display: flex;
justify-content: center;
}
.filters-container.nasa-filter-wrap,
.nasa-archive-product-content.nasa-after-clear {
max-width: 1600px;
}
@media (width < 1660px) {
.row.nasa-store-page {
/* override padding and set to zero */
padding-inline: 0;
}
.filters-container.nasa-filter-wrap,
.nasa-archive-product-content.nasa-after-clear {
/* set the padding on these child items instead */
padding-inline: 30px;
}
}
edit: do scrap previous suggestions first.
edit2: have added a breakpoint fix.
This is a very sketchy way of doing things.
I don’t know if I’m looking at the same problem but you can use the box-shadow trick to extend backgrounds to the edge of the viewport on elements that aren’t that wide. It sounded like you were asking to do this?
.nasa-topbar-filter-wrap .nasa-flex{
background:red;
box-shadow: 600px 0px 0px red, -600px 0px 0px red, 1200px 0px 0px red,
-1200px 0px 0px red;
}
#nasa_product_categories-19{
background:red;
}
I used red because my eyes can’t tell the difference between #ffffff or #f8f8f8
Hi Paul
Issue fixed.
Can you formulate another code to display grey b/g for the inner section ( filter drop down ) ?
Rgds
I’m 52 and learning all the time
Give a man a fish …
I assume you don’t want that one full width of the viewport so this should do it.
.nasa-top-sidebar{
background:#f8f8f8;
}
Hi Paul
Thanks as always. 
If it’s not too much trouble, can you modify the code to cover the full width of the section ?
It’s looking quite odd with the left/ right white gap.
Rgds
You’d need the same trick as before.
e.g.
.nasa-top-sidebar{
background:red;
box-shadow: 600px 0px 0px red, -600px 0px 0px red, 1200px 0px 0px red,
-1200px 0px 0px red;
}
Change all those reds to the color you want.
