Category Archives: Wordpress CSS

wordpress css, tutorials, blog css, style sheet css

Images Displaying Too Big or Small When Using the WP eStore and Thesis Theme

When using the WP eStore and Thesis Theme you may run into the issue of your images displaying too big or small. There is a simple fix for this as I will explain in this cheat sheet.

The Thesis theme specifies a width for the input fields in it’s theme CSS. This makes it so images have a specific size and will cause them to be¬†stretched¬† or smooched.

To fix this issue all you need to do is override the CSS of the theme by adding the following CSS code in the Custom CSS file of the Thesis Theme.

.custom .format_text input {
border-width:0.067em;
padding:0.2em;
width: auto;
}

To add this to the Custom CSS file of the Thesis them all you need to do is click on the “Custom File Editor” menu from your “Thesis Options” menu and paste the CSS code I provided above.

WordPress CSS Basics: Changing Body Background Image

Customizing your WordPress theme can be pretty simple once you master some WordPress CSS basics. In this tutorial you will learn:

How to Change the Body Background Image in WordPress

The first thing a lot of people want to customize in WordPress is the background image. With the right background image your blog will certainly stand out from the crowd.

Below is what the typical body background CSS code looks like in your WordPress stylesheet:


body {
background: #fff url(images/tile.jpg) fixed;
}

When editing the background image you will want to keep a few things in mind:

  • Sometimes the background image and/or the CSS styles is located within the header of a theme.
  • Seamless tile background works best when adding it to your theme, and is the simplest form of editing the background image.
  • Be creative by using the background-repeat, and background-attachment properties.

Adding Image URL

As you will notice in the code above, you will see how the image URL is coded into the CSS file. Really all you need to do is create the image, upload it to your sever via FTP to your themes “image” or “img” folder.

Then you can code the image into your CSS file with the following code:

url(images/NameOfYourBackgroundImage.jpg)

Once you have uploaded and coded in your background image to your theme you will want to edit the image properties – this just tells the image what to do.

Background-repeat

The background-repeat simply tells your image which way to go.

The background-repeat property can be added after the image URL in the “background” property before the “;” like this:

background: #fff url(images/tile.jpg) repeat;

Or you can create an entirely new body background property like this:


body {
background: #fff url(images/tile.jpg);
background-repeat: repeat;
}

  • If you want your image to repeat horizontally (across the width of the page) you will code in: repeat-x
  • If you want your background image to repeat vertically (across the length of the page) you will code in: repeat-y
  • If you want your background image to repeat both horizontally and vertically you will code in: repeat
  • If you do not want your image to repeat, then really it’s not necessary to code anything, but if you want you can code: no-repeat

Background-attachment

Background-attachment just tells whether or not the body background image scrolls with the body of the website as someone scrolls the page, or if it stays fixed and doesn’t move. This is great to use if you have an image that needs to cover the background of the page, but it isn’t designed to repeat. Or in other words it’s not a seamless background, or it’s a full body background.

You can code the background-attachment property the same way you code the background-repeat property (see above.)

If you would like to add a totally new body background property you can do so with the following code:


body {
background: #fff url(images/tile.jpg) repeat;
background-attachment: fixed;
}

  • If you would like the image to scroll you will want to code: scroll
  • If you want the image to be fixed you will code: fixed

Thesis Theme Tips

You can certainly use what you’ve learned in this tutorial to add a custom background image to the Thesis Theme. To add the background image to your theme you will want to edit your custom css file.

When editing your Custom CSS file you will want to be sure to add the custom “body” class like this:


body.custom {
background: url(images/tile) repeat;
background-attachment: fixed;
}

Once you add the body.custom class to your custom CSS stylesheet in the Thesis Theme you will then be able to edit your Thesis Theme background!

I sure hope you enjoyed this tutorial. Be sure to leave a comment letting us know you’ve been here!

Disclosure: Some links used within this post are affiliate links.

Check out the how to use a background image for your WordPress theme tutorial.