Add color to the sides of my blog

You have to apply a color to the background and then apply white to the center content so that it looks as though the “sides” have been colored.

Place the following CSS code in the custom CSS box of your theme. If this theme doesn’t have one use PC Custom CSS plugin.

body {
background-color: #000000;
}
.wrap {
background-color: #FFFFFF;
padding: 0 90px 0px 20px;
}

The padding is to ensure that the Facebook box comes into the main content section. Its syntax is

padding: top right bottom left;

Hi Jesin,
I tried what you said but I don’t have any change on my main page, I went to appearance editor and copy your code, nothing happened.

It is something else I should try, please somebody can help?
Thank you.

Hello,

You have edited the theme’s stylesheet which will be overwritten when the theme is updated. So first open the editor and remove the code which was added.

Go to Appearance > Customize > Miscellaneous and paste the following code in the Custom CSS box.

.wrap { background-color: #FFFFFF; padding: 0 90px 0px 20px; }

Click Save & Publish.

Go to Appearance > Background and choose your desired background color under Display Options.

PS: Please update your theme. The current version is 0.5 and you are using 0.3.6

I don’t know where to update my theme and I am afraid that all my information, post and everything is going to dissapear.

Hi SDM,
If you have added the suggested CSS to either the Custom CSS box of the theme, or by way of a plugin, you are in no danger of losing anything when you update the theme. The only way you may have a problem is if you’ve made changes to the css directly in the parent theme or structural changes to any of the template files themselves.

If you need more help, please ask.

PS – the proper way to modify your theme is by using a child theme. There are tons of great tutorials on how to do this, but it can be as simple as merely using a new style.css and contain it within a new theme folder that you name for the child. Here is the codex to help you get started.

https://codex.www.ads-software.com/Child_Themes

Here by the way is a post on Support forums that goes through it step by step for Oxygen: https://www.ads-software.com/support/topic/oxygen-theme-questions-1?replies=3

Best!
Steve

Thank you very much I will try that, also I am trying to put my logo in the center, do you know where I could do that?… I don’t have any website designing experience but I love everything I have learned.
Thanks again Steve.

Great SDM!

It’s not hard when you are willing to stretch a bit outside your “comfort zone” ??

Here is the CSS you need to center your logo:

#branding {
float: none;
width: 45%;
overflow: hidden;
margin: 0 auto;
}

Add this to the custom css plugin box and save again.

This removes the float to the left of the image, and it adds a new margin where the first value is for vertical (equal to 0) and the second is set to “auto” which tells your site to make the left and right margins automatically equal. The size of the image is left at 45% of the width of the total page container.

Ta da! Fun with WP!

Best!
Steve

Wow, I have been trying to do this for over a year :-), I just go to the appearance > customize> ???, same place as the CSS theme box? I can’t find the CSS plugin box.

Do you know any WordPress class I could take to learn more about it?.
This is awesome, Thank you very much.

Have a great day.

my blog is https://www.sabiduriademami.com

Johanna

Hi SDM… I’m sorry I wasn’t clear. I mean yes, you can add this css to the child theme you just created, or in the CSS theme box ??

There is also a plugin you can use to add custom css if you didn’t otherwise have this option.

There are tons of great tips and training available for WordPress… you can google Freelance WebDesign Training and get free tips and even some courses ??

I’m happy to help you more here as well… you’ve got a great site, and I can see that there are ways I would suggest you can make some “magic” happen if you are interested in any further feedback ??

Best!
Steve

It is something else I should try, please somebody can help?

@johanna The Custom CSS box is found under Miscellaneous on the left bottom when you go to Appearance > Customize.

Since it is a single line text box paste Steve’s code without newlines like this –

#branding { float: none; margin: 0 auto; }

Child themes aren’t necessary if you are only going to make CSS changes.

Before learning WordPress I suggest learning HTML and CSS from https://www.w3schools.com/

I don’t know where to update my theme and I am afraid that all my information, post and everything is going to dissapear.

In WordPress the content, plugins and themes are all separate things. Updating one will not erase another. If a theme update messes up only the design will be lost. Your content, posts, articles will remain unchanged.

Hi Steve,

I did it ?? My blog looks so different now, THANK YOU, I will love to hear any feedback I am beginner and I know I want to do so much I just don’t know how. My Blog is a mommy blog in Spanish focused on Natural and Simple living.

I will like to make the letter from the navigation bar uppercase I think, centered and a little bit bigger, among other things.

I really appreciate you are taking the time to guide me.

Have a great day, So happy and excited about learning more.

Johanna

Hi Jesin,

Thank you very much for helping me to do the background,I have been thinking about learning HTML I just thought it was very hard for somebody who is not technical at all, but I will check the link you send me and I will start learning more. Thanks A lot.

I did upgrade my theme version and my WP version too, I was just afraid to touch or made changes I dint’t want to lose it or know how to fix:-(

My blog is in Spanish and I am still having issues with the theme being in english do you know how can I translate the bars as (recent articles, More articles and others?, also I want to change the date of my post and the slider to be in spanish as well as the subscribe plug in, I tried to find one in Spanish and I couldn’t. I would like to have the theme completely in Spanish.

Thanks Again for all your help.

Have a great day

Johanna

The text in those bars are in English because your WordPress installation is in English.

Edit the wp-config.php file which is found inside the public_html directory.

Find

define ('WPLANG', '');

and change it to

define ('WPLANG', 'es_ES');

This will change the entire WP-Admin area to Spanish and also those strips of text on the theme.

Note to others reading this thread: The .mo file for this language should also be downloaded and placed in wp-content/languages but OP already has them so I have skipped this step.

Hi Johanna,

I just wanted to say how proud I am of you and your amazing site… you’ve truly “inspired” me! I really think you’ve got a site there that is not only delivering a great message and value, but one that you can likely turn into a nice sideline business with just a few tweaks…and not via ads either .. via delivering some valuable content to your fan base.

Because you moved me, I went and created a very detailed tutorial for you that will answer some of your questions above, and also give you a few new “tricks” to try yourself to bring your site and your business ideas to a new level. I hope this is ok, and that you likewise continue to take actions. I LOVE IT when someone is succeeding as you obviously are.

The video is here: https://sf-1.wistia.com/medias/k2kfbkcuxo

Best!
Steve