How to set a solid background color in WordPress theme?

Other Questions Wordpress
1

Hey everyone! I’m a newbie when it comes to website creation. I’m using the SKT Full Width theme in WordPress, but I’m having trouble with the background. Right now, it’s see-through, and you can spot the slider behind my page content. It doesn’t look great at all.

I really want to make the background a solid color on all my pages. The tricky part is that I still want to keep the buttons and text on the slider visible. I’ve been scratching my head trying to figure this out.

Has anyone dealt with something similar before? I’d love some advice on how to change the background without messing up the slider elements. Maybe there’s a setting I’m missing or a bit of CSS I need to add?

Any help would be super appreciated! Thanks in advance, folks!

2

I’ve encountered this issue before with the SKT Full Width theme. To achieve a solid background while preserving slider elements, you’ll need to target the content area specifically. Here’s what worked for me:

Navigate to Appearance > Customize > Additional CSS in your WordPress dashboard. Add the following CSS:

.site-main {
background-color: #f5f5f5;
position: relative;
z-index: 1;
}

Adjust #f5f5f5 to your preferred color. This approach maintains slider visibility while giving your content area a solid backdrop. Remember to clear your cache after making changes. If issues persist, you might need to inspect your theme’s structure and adjust the CSS selector accordingly.

3

hey joec, sounds like ur in a pickle! have u tried tweaking the css? try adding this to ur theme’s custom css:

.site-content {
background-color: #ffffff;
}

replace #ffffff with ur desired color. this should give u a solid bg without messing with the slider. lmk if it works!

4

As someone who’s worked with WordPress for years, I can relate to your frustration. The SKT Full Width theme can be tricky, but there’s a solution that should work without touching the slider.

Try this approach: go to Appearance > Customize > Additional CSS and add the following code:

.site-content {
background-color: rgba(255, 255, 255, 0.9);
position: relative;
z-index: 1;
}

This sets a semi-opaque white background (adjust the last value for transparency) and ensures it’s above the slider. If you want it fully opaque, just use rgb instead of rgba.

If that doesn’t quite do it, you might need to target more specific elements. In that case, use your browser’s inspect tool to identify the exact classes you need to modify.

Remember, always backup your site before making changes. Good luck with your site!