I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.
Related
total beginner here, so apologies if this is not the place to post.
my site has a white background throughout but woocomerce has an annoying gray background around the edges of its pages (cart, checkout, product pages), and i was able to figure out that by adding the following code to Customize CSS section of my site fixed the problem
.woocommerce-cart, .single-product { background: white; }
BUT I cannot find the value to use for "checkout page" to change its background to white. i tried .woocomerce-checkout and woocomerce_checkout and .checkout. no luck :( any advice?
The body class of the woo-commerce checkout page is correct what you have mentioned (.woocommerce-checkout).
Please try adding !important flag to CSS property.
.woocommerce-checkout { background: white !important; }
I've inherited management of an existing Wordpress site that uses a custom Genesis child theme. I have attempted to set a full screen background image using the "Full Screen BG Image" plugin. However, the Home 2 area, used for a widget displaying latest posts, seems to have an irreversibly opaque background and the background image hides behind it. When I pull that section of the page down, I see the background image peek out from behind at the top. See It Here.
I am not a Wordpress expert, and I'm learning as I go. It would be amazing if there were a simple solution that would get our background image to display on our front page.
Thanks in advance, with apologies for my lack of knowledge!
The solid white background is set by your child theme's style.css file like so
.home-widgets-2 {
background-color: #fff;
...
}
You can just change that background-color statement to background-color: transparent; or background-color: rgba(255,255,255,.5); where .5 can be anywhere from 0 - 1 and controls the opacity.
You can either edit that in your style.css file itself (recommended if it's a child theme you manage/made) or you can add it in the Appearance > Customizer > Custom CSS section like so:
.home-widgets-2 {
background-color: transparent;
}
Using transparent makes it hard to read, so I'd suggest using the transparency options like rgba(255,255,255,.65)
I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.
I'm trying to change the colour of the footer and I've used
.site-footer {
background: #4E5754;
color: #f29e0f;
}
This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.
What might be overriding the CSS?
You can use this style for this.
.site-footer {
background: #4E5754 !important;
color: #f29e0f;
}
Or put your style under the default stylesheet.
After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner
Thanks for the help everyone!
I'm working on a site for our clinic, here: www.markshoushadentistry.com
I am trying to change the background on the pages (not home page) from white to a textured image background. I've located using Inspect in Chrome the CSS is:
.site-content {
background: #FFF;
}
But I can't seem to find where it is to change it. There is an option in customizer that changes the color of the background, but I'm trying to change the background to an image.
Can anyone tell me where the code is to change the background color to an image?
Thanks so much in advance
Your .site-content is overriden by another top CSS
.home .site-content {
background: none;
}
if you change your CSS with:
.home .site-content {
background: #fff !important;
}
it should work
To change background color in a wordpress you can follow the following steps :
Login to wordpress and open dashboard
Go to Customizer (Appearance > Customize) -> Additional css
Enter the CSS to change the background color. Below is sample code:
site is the css class for the whole site.
XXXXXX is the hex code for the color you want to use.
you can choose your color code from here
Click Update File
And your background color will change . Hope this helps you
It's being imposible for me to change the color of the menu bar of my website: vayapollo.com
I want to change it, but I've tried all. At the css archives of my theme I can't find this code:
#branding, .post-afterbar-a.in-post-top, .horizontal-vote a.up span {
background-color: #ededed;
}
I want to change the color #ededed to #000 (black). I've tried to find it at PHP or javascript archives but nothing!
The route that google chrome is giving to me is (index):64 but at the index.php file isn't the code.
Thanks, it will be a help for me!
Actually this css comes from admin
If you are not able to find it you can add new css to overwrite this css in your css file
#branding, .post-afterbar-a.in-post-top, .horizontal-vote a.up span {
background-color: #000 !important;
}
Hope it will work