thesis body padding

In this session we show how to style the backgrounds for the the Body and Footer in Thesis 2.0 by editing the existing packages for those areas. We then add and customize the options for background colors and images. The next thing to do is to style the backgrounds. So we’ll come back over to our Thesis 2.0 Skin Editor and we’re going to start with the body. Edit Body CSS Package The body has background styles and the first thing we’re going to do is add a background color. That color is a green color and I also want a background image. Let’s save that and go back to my images because I haven’t uploaded my background image yet. Add Background Image in Image Editor We’ll choose an image, come down here to my dark paw prints, open that up, add the image, copy the URL. Go back to CSS, open up the body, look at options, background, background image then we just get rid of the extra stuff. Background position will be top center. Background repeat will be repeat and I think we’re good to go with that. Hit save and compile, come back over and take a look at it. Oh yes, it is a circle, Cynthia. Very good catch. I don’t know why I did that but yes, it was the circle. So come back over to body and there we go, background. Save, save and compile, refresh. Now that’s not what’s supposed to happen though because I thought the little feet print were transparent which means the green should show through. Troubleshoot Background Color Issue Let’s just double check that. Maybe I missed the color. No, I definitely did not. So let’s just repeat in the x direction and see if the green shows up there real quickly because I might be using the wrong image then. No, my body is not getting the green color. And it should be getting the green color just fine. Let’s see what they say here. Something is killing the background color. I see, the background color, for whatever reason in this.
Whoops, you've found some premium content! Watch the opening clip of this video to preview it, the full video is available to paid members. In this session we show how to adjust column padding and margins in the Thesis theme by creating new dimensions for the width of the elements in CSS to get the desired padding and margin. Video Transcript Rick: Okay and so your problem here is that you want this to move over. Right, this is the default amount of margin that exists in the way Thesis deals with this 3-column layout and you actually want more margin over here. Is that right? Did I lose you? Member: Yes. If you go to the top and click on the navigation mention there and you click fertilization. Once you click that, you’ll see the content. You’ll see the sidebar 1, sidebar 2. I’ve actually went into and told it to put some padding in there to get all of the content to move and get in line with the B up above and baby. So it’s perfectly in line with that B coming down. What I would love to see happen is week by week calendar line up with subscription, subscribe now and then whatever the distance from the outside left side of the page to the week by week calendar, do that on the right side on sidebar 2 from the right side, same padding from the edge of the page. Does that make sense? Rick: It does make sense but you don’t really have enough room for all that at the moment with your graphic or with your site. Because I see what you did was you added a style, a margin left 50 pixels to the content that you put in here. Member: Yes. Rick: And really, it would be a whole lot easier just go get these things to line up the way you want them to line up. Member: Yes, thank you. Rick: And so you essentially want to add a little bit of margin to sidebar 1 and when you add margin like that, you’re going to break the thing unless you also widen out the other parts of it. Because.
DIYtheme’s  Thesis Theme for WordPress is one of the best overall themes you can use in your WordPress applications. Thesis offers  all the SEO elements you need, incredible design flexibility, and because it is completely CSS driven, a WordPress site running Thesis provides  lightning-fast loading times. It’s only downfall? It’s pretty plain looking out-of-the-box.This post will reveal some simple steps one can take to customize Thesis, providing your WordPress driven web site a custom look and feel.Before you can customize anything in Thesis, you will need to change the name of the folder where the ‘custom.css’ and ‘custom_functions.php’ reside. These two files, when customized, help determine how Thesis functions as well as how it appears. By default, the folder which resides in the theme folder itself (i.e. /wp-content/themes/thesis_18/) is named ‘custom-sample.’ Simply change it to ‘custom’ and you will be on your way to customizing Thesis.Additionally, I recommend adjusting three default settings within the Thesis Design Options admin panel within WordPress itself.1. Under the HTML Framework option, select “Full-width framework”2. Under the Outer Page Padding option, select “0.0”3. Under the Body (and Content Area) option, uncheck the “Show interior layout borders” optionHeader Above Navigation / Custom FooterOne of the very first things that needs to be done, at least in my opinion, is to fix the scenario where the navigation appears above the header. This is poor usability in my mind’s eye but easily fixable. At the same time, we will also allow you to customize the footer area of your site.Within the Thesis / Custom File Editor option within WordPress, select the custom_functions.php file and click on the “Edit selected file” button. Once you do this, you will see the default code of that file.Do not delete any of the existing code but rather on a new line.
Part 4 of the Thesis 2.0 guide will cover all the options available to you in the Single Element Styles package. By the end of this guide you will have a complete understanding of all the options available to you in the default theme and what they do so that you can decide whether these options are useful to you. If you haven’t read them already you can find the rest of this guide below. Thesis 2.0 Getting Started Site – Options Part 1 Thesis 2.0 Getting Started Part 2 – HTML Editor Thesis 2.0 Getting Started Part 3 – CSS Editor Overview You ready? Let’s begin! The complete list of CSS options When you open up your CSS options You will find a variety of options available to you and some of them you will understand clearly but some not so much, if this is the case then you will find this guide super useful and a great reference for the future. Each CSS package comes with it’s own options and some differ from others, the first package we will look at is the Single Element Style’s Package. You will be able to see what type of package it is when you click on it and the options panel opens like so. As you can see in Big Bold letters it says Single Element Styles. There are a number of Packages available for you to select when create a new package but this is the one you will use more than the others. We will look at the remaining package further down but first when to use a Single Element Styles package. To keep it simple, if the box your looking to style is one of the following or is related to: Menu’s Input Form’s Links Comment areas including the comment box Widgets Post formatting Layout in terms of Columns Don’t use a Single Element Style package. Why? Because all of the above require unique styling properties, you could use a Single Element Styles package, but you would be waisting your time. As well as pulling your hair out when it comes to say, styling a menu.
Applies to Version(s): Thesis 1 Customizing your background is one of the most high-impact visual changes you can make to your theme. Armed with just a few lines of code and a custom stylesheet, you can literally change your background to just about anything you want. In the following tutorial, you’re going to learn about the code that makes this happen, and you’ll even be able to download a background “starter kit” that you can use to hit the ground running. Bad puns aside, if you’re ready, read on! How Thesis Backgrounds Work Out of the box, Thesis comes equipped with a markup structure that can accommodate background changes with ease. Three HTML elements are involved in the production of the background: