How to put background color

which page/section are you trying to change its color? please provide url to the page or the section at the homepage.

The site URL is https://www.afataslinkcoy.com. I want to change the white background color of the home page as well as the sub pages under the services.

Ok. the HTML markup on the site is poorly written, but let me give you an example anyway, for this page for this page add the following code at the end of the “enigma-theme.css”

.page-id-154 > div:first-child{
 background: #cccccc!important;
}

That will give it a gray background instead of white, now you can change the hex code to whatever you want.

I can’t find enigma-theme.css on the editor page, I can only see style.CSS. Should I include the code at the end of the style.CSS?

Yes, place it at the end of the file.

Hi @motaz Shazly
Thanks for your reply. I’ve placed the code at the end of the style.css file and also change the hex code to #e5f2ff but nothing changes on the site after

Can you post a link to the specific pages you’re trying to change? Each page has a specific numeric ID that you can use. For example, the ID for the home page is 2, so you’d use this code:

.page-id-2 > div:first-child {
  background: #e5f2ff;
}

Also, be aware that if you edit the theme’s stylesheet directly, you’ll lose these changes if the theme is ever updated in the future, to fix bugs or security issues or to add new features. You should use a custom CSS plugin or your theme’s built-in custom CSS option, if one exists.

Hi @stephencottontail
Thanks for the reply. I installed a custom css plugin and paste the code inside by specifying the page with the ID
`/* Enter Your Custom CSS Here */.navbar-logo img {
2
max-height: 150px;
3
}
4
.page-id-223 > div:first-child {
5
background: #e5f2ff;
6
}

Update Custom CSS

The above code is what I have after I pasted. But the bg color still didnt change.

I checked your site at 1:25pm Mountain time and the page in question has a light-blue background. If you’re using a caching plugin, you need to temporarily disable it and flush the cache before you’ll see any changes. Also, have you tried force-refreshing your browser (see your browser’s documentation)?

Hi @stephencottontail
Thank you very much I got it now. I deactivated the custom background plugin and after refreshing the page the color shows. But the text color is showing black, please how do I change it to white?

Try this code:

.page-id-223 > div:first-child {
  background: #003f80;
  color: #fff;
}

And to change the color of your headings on that page:

.page-id-223 strong {
  color: #fff;
}

Hello @stephencottontail,
I have tried the codes, it works but later after refreshing the pages, it no more there. Moreso, there’s a change I noticed on the front page; The sub pages under services page is not display again, it’s only showing the drop drown down arrow buton. I have removed all added css codes to check if it could be the cause but issue still remain the same. Please what else can I do?

I installed your theme on my local WP install, there’s a file named menu.js that handles the dropdown menus, but I don’t see that file being loaded on your site. It should be located at wp-content/themes/enigma/js/menu.js. For now, though, you could use this custom CSS to

.navbar li:hover > .dropdown-menu {
	display: block;
}

@stephencottontail
The navbar css code works. Thanks a lot.

But the bg color isn’t working again after adding the code back. It only displays a background color on the topmost of the page.
See below the codes:
/* Enter Your Custom CSS Here */.navbar-logo img {
max-height: 150px;
}
.navbar li:hover > .dropdown-menu {
display: block;
}
.page-id-223 > div:first-child {
background: #00254d;
color: #fff;
}
.page-id-223 strong {
color: #fff;

I checked your site at 4:23pm Mountain time and everything appears to be working correctly: https://imgur.com/OqxRu4o

If you’re using a caching plugin, you need to temporarily disable it and flush the cache before you’ll see any changes. Also, have you tried force-refreshing your browser (see your browser’s documentation)?