Changing background color in wordpress element - css

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

Related

Menu Background Colour Wordpress for homepage only

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.

Wordpress (Genesis child theme) fs background image hidden by white background in "Home 2" Area

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)

SquareSpace: Change section background color (Eamon / Ethan template)

Example template:
https://eamon-demo.squarespace.com/#overview-eamon
Is there any possible way to change the background color of a single white section with text in the Ethan / Eamon theme? I've had no luck with
<style>
.body {
background-color: lightblue;
}
</style>
in the Advanced section of the page editor. I am looking to change only one of the section's background colors, I do not want to change them all. Thanks.
Solution!
I was able to make it work on a section called "titles" adding the following to the CSS Editor:
section#titles {
background-color: lightblue !important;
}
Yes, it is possible by targeting via the CSS attribute selector. For example:
[data-url-id='titles-eamon'] .content, [data-url-id='titles-eamon'] .content-inner {
background-color: lightblue !important;
}
The above code would be inserted via the CSS Editor. The data-url-id value corresponds the URL Slug of the index page section (see image).
You can inspect the code of the page user your browser's developer tools (often by hitting F12 or CTRL+SHIFT+I). That will help you explore the code of the page for this and other similar issues/customization.

Header-Menu bar background-color

I cant find the option to change the header primary background color from white to black, and the menu links from white to black.
Can anyone help?
link to site
You could edit the background-color attribute in the .color-overlay class directly in the according .css file, if there is really no option by default.
I am sure that there will be a color setting into your theme options from the wp-admin section. And you need to check there the options there will be a header setting.
if you want from coding part please add CSS rule below into your theme style.css
#menu-main-menu li a {
color: #fff;
}
.content.top.style-none {
background: #000 none repeat scroll 0 0;
}
if this code does not work then use !important CSS another rule.
After that, it will look like this

Change the color of menu bar in a premium theme - Wordpress

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

Resources