First of all, you shouldn’t be editing the theme’s style.css file. If the theme ever gets upgraded, either because of feature enhancements or security patches, you will lose your changes. Usually what’s recommended is to create a child theme, but it’s just as effective, and easier, to use a CSS plugin. This is especially true for the themes created by the WordPress development team (like Twenty Eleven, Twenty Twelve, etc), which get upgraded more often than other themes for security patches because the WordPress team is very diligent about fixing potential problems.
OK, now to your question. The most important thing you are missing in your CSS is a property that points to the image that you want to use. If you want the image to show up along the margins, then you’ll probably want to set the background property of the body element, like this:
body {
background: transparent url(/images/my_background.jpg) 0 0 repeat-y;
}
Unless the image is very wide, you might want to repeat the image both x & y instead of just y.
CrouchingBruin thanks for the advice! I have been trying to create a child theme all day, but when I preview it some things like the nav menu and other things are not there. The page title and tagline are off center and the margins/borders are not there. I will keep trying, I am very new to this! At least the images and content were there so that’s a start.
I have become frustrated with working on that so I decided to do some testing of the background image. So, right after the body tag I added the image to look like this:
}
body { background: transparent url(http://2brokevegans.com/wp-content/uploads/2014/04/Victorian-era-brick-wall-margin-photo.jpg) 0 0 repeat }
{
color: #141412;
line-height: 1.5;
margin: 0;
}
Then I previewed it but the image is not there. Do I need to add it to the
.site {
background-color: #fff;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
margin: 0 auto;
max-width: 1600px;
width: 100%;
}
section as well?
Thank you again!
Eureka! I figured the image out by doing this:
{ background: url(http://2brokevegans.com/wp-content/uploads/2014/04/Victorian-era-brick-wall-margin-photo.jpg) repeat }
But now I want to figure out the child theme that you spoke of CrouchingBruin. I followed the instructions from http://codex.wordpress.org/Child_Themes to a T. I got a bit confused on the function.php part but I made the style.css but it does not look right when I preview the theme. Is this common or did I do something wrong?
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://2brokevegans.com/twenty-thirteen-child/
Description: Twenty Thirteen Child Theme
Author: 2 Broke Vegans
Author URI: http://2brokevegans.com
Template: twentythirteen
Version: 1.1
Tags: Responsive, Black, Brown, Orange, Tan, White, Yellow, Light, One Column, Two Columns, Right Sidebar, Fluid Layout, Custom Header, Custom Menu, Editor Style, Featured Images, Microformats, Post Formats, RTL Language Support, Sticky Post, Translation Ready
Text Domain: twenty-thirteen-child
*/
@import url("http://www.2brokevegans.com/twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
The only problem with your child theme’s style.css file is the @import line.
Change this:
@import url("http://www.2brokevegans.com/twentythirteen/style.css");
To this:
@import url("../twentythirteen/style.css");
or this:
@import url("http://2brokevegans.com/wp-content/themes/twentythirteen/style.css");
But the first one is standard.
Ok, thanks again CrouchingBruin. I am now fully operational on a child theme. The only problem is now on each post there is an overlap of the “Leave a comment” butter with the “Like” button to the point where you cannot even see most of the “Leave a comment” button. Any idea how this happened or how I might be able to fix it?
Add this to the end of your child theme’s style.css file:
body.home div.jetpack-likes-widget-wrapper {
height: auto;
}
Ok, I added it to the child theme style.css file but it did not seem to fix it.
You have to add it to the very end.
This is what I see at the end of your style.css file. It looks like the new rule was pasted into the end of another rule:
...
.comment-author .fn,
.comment-reply-link,
.comment-reply-login {
color: #333;
{} body.home div.jetpack-likes-widget-wrapper {
height: auto;
}
It should look like this:
...
.comment-author .fn,
.comment-reply-link,
.comment-reply-login {
color: #333;
}
}
body.home div.jetpack-likes-widget-wrapper {
height: auto;
}
Ok, I copied and pasted it exactly as you have it but it still did not fix it.
Oops, it did fix it! I am sorry, I had loaded the page before the changes were saved! Thank you very much CrouchingBruin!
Marking this topic as resolved…
I guess it is not fixed. Very odd that it appeared fixed in one browser but not in Chrome.
It looks fine for me in Chrome. Try clearing Chrome’s cache then reload your site.
