Change Background Color

Jasmine333

New member
Has anyone been able to change background color on a WP theme without having to make what's called a child theme? I went to CSS stylesheet and entered a code where it said background, but it did not change the color. I think WP has changed some things, because years ago I could go into the editor and get things changed without a child theme, but that does not seem possible now.
 

Genesis

Administrator
This is what I usually do.

I first check if there is an option to do so with the theme customizer. I just checked Thirteen Twenty and there isn't.

I then use cPanel to download a copy of the styles.css to my computer as a backup just in case I make a mess of things.

Then I open the styles.css in my cPanel File Manager Code Editor.

Then search for "background" and then play with colours.

Or you could try the DashBoard in WordPress but I find it very clumsy and messy to work with the WP editor most of the time.

Other tip that may help is to Google the WordPress.org forum for the theme as I'm dead certain someone else must have asked the same question.
 

Jasmine333

New member
Genesis said:
This is what I usually do.

I first check if there is an option to do so with the theme customizer. I just checked Thirteen Twenty and there isn't.

I then use cPanel to download a copy of the styles.css to my computer as a backup just in case I make a mess of things.

Then I open the styles.css in my cPanel File Manager Code Editor.

Then search for "background" and then play with colours.

Or you could try the DashBoard in WordPress but I find it very clumsy and messy to work with the WP editor most of the time.

Other tip that may help is to Google the WordPress.org forum for the theme as I'm dead certain someone else must have asked the same question.

Yes, there are other similar topics regarding the one about changing background color, but none with the suggestions you gave. I'll go to cpanel and see what that does. I can change text color on WP with the toggle toolbar, but I'd like a pale pastel for the background instead of the generic light gray.

In the past I made a copy of the css stylesheet and saved it on notepad or wordpad, and that worked too in case I wanted the original back.
 

Jasmine333

New member
Happy to say I've made some progress, but still working on it too. I made a child theme of twenty thirteen, and it seems to be the only way really to get changes made. Honestly it was much easier years ago when all one had to do was go into style.css and make the changes.
 

Genesis

Administrator
Jasmine333 said:
Honestly it was much easier years ago when all one had to do was go into style.css and make the changes.
One probably still can do that, except it's a pain, as when there's an update of the theme one would have to overwrite the CSS file every time with the updated one. Ditto any changes to the templates. Child theme seems to be easier, but within limits, as not all themes lean themselves well to child themes. I've had at least two experiences with trying to get a child theme to work and it not being text book easy. Twenty thirteen is excellent for a child theme. One of the best themes there is for tailoring things just the way you want them to be. You made a good choice!
 

Jasmine333

New member
Genesis said:
This is what I usually do.

I first check if there is an option to do so with the theme customizer. I just checked Thirteen Twenty and there isn't.

I then use cPanel to download a copy of the styles.css to my computer as a backup just in case I make a mess of things.

Then I open the styles.css in my cPanel File Manager Code Editor.

Then search for "background" and then play with colours.

Or you could try the DashBoard in WordPress but I find it very clumsy and messy to work with the WP editor most of the time.

Other tip that may help is to Google the WordPress.org forum for the theme as I'm dead certain someone else must have asked the same question.


I have gone to the style.css and there are numerous selections for background, andI've tested several of them but none have changed the screen background of the theme. Do you remember which subtitle in the css you selected that changed the theme background? I tried body, and that changed text color only.
 

Genesis

Administrator
I fiddled a bit with it and found the following solution - added to the child theme:

#main {
background-color: #ccccff; /* light blue */
}

Replace the color with the one you want.

I just added that at the bottom of the child theme.
 

Jasmine333

New member
Genesis said:
I fiddled a bit with it and found the following solution - added to the child theme:

#main {
background-color: #ccccff; /* light blue */
}

Replace the color with the one you want.

I just added that at the bottom of the child theme.

Thanks for your info, but it did not change the background at all. I even looked up wp articles about how to change twenty thirteen specifically and tried their code suggestions as well, but still have the whitish background. Something must be blocking changing the background, so I don't know why it did change text color. I guess I'm just stuck with the white.
 
Correct me if I am wrong. I am having issue with pages loading correctly today. Is your background color white right now?
I think I have narrowed it down. You have a major conflict with CSS files.

But I think the main issue is this right here. Its not in any CSS file, it may be in your index file. The text/css is being rendered before the other CSS file.
In other words, they are cancelling themselves out.

</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
 

Jasmine333

New member
strokerace said:
Correct me if I am wrong. I am having issue with pages loading correctly today. Is your background color white right now?
I think I have narrowed it down. You have a major conflict with CSS files.

But I think the main issue is this right here. Its not in any CSS file, it may be in your index file. The text/css is being rendered before the other CSS file.
In other words, they are cancelling themselves out.

</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
[/quote


Yes, my color is white, or whitish. I'll look in the index file, and if nothing found there I'll either just keep the white page or change themes. Thanks.


I looked in the index file and saw nothing about colors or backgrounds.
 
It will be code exact like I posted it. See where it says background none. I believe that is the issue.
It looks like its in the same file as the @media screen info
 

Genesis

Administrator
Jasmine333 said:
Genesis said:
I fiddled a bit with it and found the following solution - added to the child theme:

#main {
background-color: #ccccff; /* light blue */
}

Replace the color with the one you want.

I just added that at the bottom of the child theme.

Thanks for your info, but it did not change the background at all. I even looked up wp articles about how to change twenty thirteen specifically and tried their code suggestions as well, but still have the whitish background. Something must be blocking changing the background, so I don't know why it did change text color. I guess I'm just stuck with the white.
Can you describe step by step what you did? As last night before I made the above suggestion I activated my twenty thirteen theme and tried the above code on my child theme. So I know for a fact it works. Here's a link to my sandbox Website:
http://gigagenesis.tk/

Question 1
Have you tested your child theme successfully, i.e. does it work with other formatting?

Question 2
Can you copy and paste the contents of your Child Theme Code page here so we can see what it looks like?
 

Jasmine333

New member
Genesis said:
Jasmine333 said:
Genesis said:
I fiddled a bit with it and found the following solution - added to the child theme:

#main {
background-color: #ccccff; /* light blue */
}

Replace the color with the one you want.

I just added that at the bottom of the child theme.

Thanks for your info, but it did not change the background at all. I even looked up wp articles about how to change twenty thirteen specifically and tried their code suggestions as well, but still have the whitish background. Something must be blocking changing the background, so I don't know why it did change text color. I guess I'm just stuck with the white.
Can you describe step by step what you did? As last night before I made the above suggestion I activated my twenty thirteen theme and tried the above code on my child theme. So I know for a fact it works. Here's a link to my sandbox Website:
http://gigagenesis.tk/

Question 1
Have you tested your child theme successfully, i.e. does it work with other formatting?

Question 2
Can you copy and paste the contents of your Child Theme Code page here so we can see what it looks like?

I will make a copy of my files when I made my child theme. I added some code I got off the net from a site about how to make a child them by wp that they said was enqueing or whatever. It's at the bottom of the file, and at the top of the functions file. Don't know if I needed to but I also included the rtl.css in ftp.

I'll send those files soon.


I tried to send a copy of my style.css but the forum says the message is too long. If you give me some kind of email address I'll email these files from wordpad.
 

Genesis

Administrator
Let's do it the other way round. I've downloaded my twentythirteenchild theme and style.css. It's enclosed with this post as a zipped folder. Just upload with your cPanel File Manager to your public_html/wp-content/themes folder and unzip it and it should work. Remember you need to activate the childtheme first in order for it to work.

I changed both footer and background colors. You can use your own colors of course.
 

Jasmine333

New member
Genesis said:
Let's do it the other way round. I've downloaded my twentythirteenchild theme and style.css. It's enclosed with this post as a zipped folder. Just upload with your cPanel File Manager to your public_html/wp-content/themes folder and unzip it and it should work. Remember you need to activate the childtheme first in order for it to work.

I changed both footer and background colors. You can use your own colors of course.

Ok, thanks, will do. Tell me if I need to take the rtl.css and functions.php out of the twenty thirteen child directory in ftp or leave them there.

I unzipped the file you sent, and it's all in one big block, not in a neat scaled list-like file. Will it be ok to upload it to ftp like that?
 

Genesis

Administrator
For now I suggest you take them out. Only have the style.css file in the folder. And preferably start it from scratch, or you can upload my folder exactly as it is. Once you've unzipped it it should show in your themes dashboard and all you need to do is activate it. The rest should be easy.

If you want to change any of the templates, only load a COPY of the template you want to change into your child folder, and make changes to it. Only have files in your child theme that you are working with. The less the better.
 

Jasmine333

New member
Genesis said:
For now I suggest you take them out. Only have the style.css file in the folder. And preferably start it from scratch, or you can upload my folder exactly as it is. Once you've unzipped it it should show in your themes dashboard and all you need to do is activate it. The rest should be easy.

If you want to change any of the templates, only load a COPY of the template you want to change into your child folder, and make changes to it. Only have files in your child theme that you are working with. The less the better.


Will let you know when it's all done. When I saved the file in wordpad the file straightened out.