How to Add Custom Backgrounds

I paid $164 for the Developers Version of Thesis. I like the look. I think it would be great for my site (Get Rich Slowly). I’ve installed it in my sandbox area, but have just spent a frustrating hour having nothing work right.

First of all, all sizing is specified in ems. Maybe I should learn ems, but I know pixels. I suspect most Wordpress users know pixels and not ems. I went back to check the Thesis site to see if there’s any indication that layout isn’t in pixels; I couldn’t find any. If I’d known it was in ems, I wouldn’t have spent $164.

Because I have nearly 2000 posts containing images up to 500px in width, I need a 500px main text area. The current main text area is 480px (or whatever that is in ems). There’s another thread about resizing columns in which the advice is “don’t — it’s complicated”. That’s frustrating, too. I need to be able to modify the layout. Can somebody tell me how to get a 500px main column width?

I made some changes to the config file, but nothing seems to have happened. I made some changes to the custom.css file, but nothing seems to have happened. (Though this may be because the config.php file didn’t load.) I’m sure the changes didn’t happen because if they had, the blog background would be green and the text would be red. (I had similar frustrations with the whole custom.css thing on another theme before. I like the idea, but I can’t make it work. I’m not stupid, but I must be doing something wrong.)

Basically, these three things have me very frustrated right now. I’ve bought themes before that I haven’t used, but it’s always been because I changed my mind regarding the look I was after. This is the first time that I feel like I wouldn’t have purchased the theme if I’d known the frustrations ahead. And I’m just getting started? Are there more roadblocks to be found?

In short: HELP!

I have a question regarding licensing and the phrase “the buyer may not re-sell the theme or any modification thereof”. Just so that we’re 100% clear, does that mean that the license is not transferable?

For example, if someone purchased Thesis and later decided not to use it, could the license (and future support, etc.) be transferred to another user or not?

I just want to make sure I understand this point. It could be considered slightly differently than “re-selling” where someone would be selling copies, etc.

Chris, I too love the theme, as you can see I’ve actually used it for what the developer’s license was developed for, before there was one (I believe your original license allowed for multiple sites). I am going to purchase the add-on to upgrade to developer, because that’s The Right Thing To Do, but I’m curious, is there any case where you’d allow removal of the link in the footer? I’m all about attribution, but there may be instances where this is more appropriate in a colophon or similar instrument, or where my professional development of sites for hire (e.g. a law firm I am working with right now) may not be too keen on having a link to DIY Themes in the footer of every page. Also, considering some of your posts regarding PageRank / relevance leakage, and how concious of these issues you are, I’d like to hear your opinion on this matter, and if you’d be open to an even more flexible license that would allow modification or removal of the footer text and link.

On a side note, I really hope that this new launch (DIY Themes) has been all you’ve dreamed of and more. You may want to write something up that talks about how this launch has enabled you more freedom or something, or allowed you to develop your business, as I’m also a small business owner and really enjoy buying from other small or one-person business and knowing how my support helps out their overall business.

I agree. Thanks for really providing value to the theme. I look forward to seeing more updates.

Hey Chris, thanks bro! Quite useful for a newbie like me. How do you add those little notes into the post? In Academic writing we call it footnotes. Thanks!

Hi Chris, love the tutorials. I just learned about the photo framin. Love it! Now I’d like to play with the background. I’m a newbie at this stuff and where is my custom.css file. When I’m in the Theme Editor in the Wordpress Dashboard all I see are ie6.css, ie5.css, and style.css. Is style.css what your are referring too? Thanks so much!

excellent…thanks

Miguel — Are you talking about the footnote at the bottom of this page? If so, that’s something that I code manually. There is a plugin you can use to handle footnotes, but I can’t speak to its effectiveness or ease of use (since I don’t use it).

Lee — Loved your post on your new design! Also, I like how you’ve really taken to customizing your theme, especially with liberal use of in-post styling elements. Nicely done!

Sasha — The custom stylesheet is not included with the regular theme download, but you can pick it up here. After uploading custom.css to your server, you’ll need to edit your configuration file (config.php) in order to activate it. Here’s how it works.

Tony — Have you activated the custom stylesheet in your config.php file yet? If not, you can find detailed instructions here.

yeah, about the footnotes, a feature I would like to use. So, how’s it done without the plugin. Thanks!

Chris, I get complimented on my blog’s design at least several times a week. I am SO happy I bought this theme! It’s been the best. And I agree with the others, thank you so much for taking the time to add all these tutorials. I feel spoiled.

Following you on Twitter, by the way. Sorry about your experience with the movers…

Chris – theme looks great. Probably will get a single license to test it out. Only thing holding us back from a developer’s license would be that attribution link. Most of our b2b clients get sketchy about attribution – guess they want people to think they do everything in-house. Saw someone already posted but wanted to chime in that it would be good to have that option available.

Chris, could you tell me how did you show your code?
You used any WordPress Plugins for code show? Or you named one and custom it in your style.css?

Chris Pearson-Thank you for answering my question. I am searching for some plugin that can fulfill the code-show function.

And if you like I suggest you to try one WP plugin named “Wordpress Thread Comment”. It enables users to reply on a exist comment, and the discussion will be displayed threaded or nested. That’s the best plugin I ever found.

Good luck!

Miguel — Replacing the header text with an image is probably the most talked about item over in the forums, and because of this, I’m going to dedicate an entire post to the topic here on the demo site. Stay tuned!

hey Chris, thanks! I was able to get the header situation worked out but now need to adjust the header because it’s sticking out on the left side. As always, thanks for your help and support.

Toblerone — The “Share Your Thoughts” widget in your right sidebar is too wide for the column in which it sits. As a result, IE6 will obscure your sidebars thanks to the following line in your ie6.css file:

#content, .sidebar { overflow: hidden; }

You can try removing .sidebar from the above code, and this way, IE6 will allow wider content in the sidebar area. Because the renegade widget is in the rightmost sidebar, you shouldn’t have any problems at all. You’d run into trouble, though, if it were in the content column or the left-hand sidebar. Anyway, here’s how your new ie6.css definition ought to look once you’ve edited it:

#content { overflow: hidden; }

Toblerone — I noticed this yesterday but forgot to mention it… In your post titled “10 Surprising Side Effects to Money Management,” you’ve got a horizontal rule that consists entirely of underscores. This rule behaves like an unbroken URL, which is one of the most notorious IE “layout-breakers.”

* * *

Instead of using a long line of underscores, try using something shorter like the asterisks above or anything else that suits your fancy

Chris,
Don’t bother to reply to my earlier comment. I removed one of the analytics plugin and I don’t see the page load delay any more

Chris, I just applied your lovely theme. How do you add your colored boxes in the posts, and how did you color the text box: “Read the Manual!”

Shashikiran — You can read up on notes and alerts (the boxes in the posts) in the user’s guide. The “Read the Manaul” box, on the other hand, is a custom style that I whipped up for this site. You can grab the HTML from the source, and you can find the associated CSS by searching this file for .custom li.must_see.

Jazz — I haven’t been “for hire” in well over a year, and lately, I’ve been working on Thesis and a couple of other small-scale coding projects full time.

Toblerone — Unfortunately, the code you’ve added in the sidebar appears to be culprit here. Based on the IE6 and 7 source code, the HTML quits being compiled once the JavaScript “resources” have been called in the sidebar.

In order to go about solving this, you can try replacing the two sidebar files with their default versions (after backing up your current sidebars, of course!). From there, you can add in your sidebar elements piece-by-piece, and hopefully, you’ll be able to nail down the exact widget and line of code that is causing your problem.

Shashikiran — Anytime! Great to hear that you’ve got some customization happening!

Richd — I just attempted to check out your custom stylesheet, but no file was found at the location referenced in your header. Perhaps your upload did not finish properly, or maybe you uploaded the file to the wrong directory.

As soon as you get that custom stylesheet reference worked out, your styles will appear.

The two best resources for building quality Websites that I know of are Copyblogger and SEObook. The former is run by Brian Clark, who is also the mastermind behind Teaching Sells, which is yet another unbelievably good site-building resource. The latter is the brainchild of Aaron Wall, who is not only a seasoned Web veteran, but also one of the smartest guys I know.

Richd — The Google Analytics code only belongs in footer.php, just before the closing </body> tag. It won’t do any good in your custom.css file because your custom stylesheet can only contain CSS declarations.

Chris,

What is the best way to employ the css themes from CFormII into Thesis. The Thesis css does not handle it well and I’ve just cut & pasted the CFormII theme css into custom.css and that works fine, but makes for a large file. Any sugestions?

Thanks

Chris..
Thank for the response. I did just cut & paste the CForm css directly into custom.css. I think my little endeavor here with forms really underscores the value of your custom.css concept and implementation.

hey Chris, I want to increase the size of my content box? Please help, take a look at my site. http://beyondadiet.com

I just want a bit more room. Thanks!

Eric — Because the file structure in 1.0 is different, the image folder references in the custom background kit are incorrect. I’m going to change the tutorial tomorrow morning, but in the meantime, here’s what you can do:

1. Take all the images out of the /custom_background folder and place them in the /custom/images folder.
2. Paste the applicable custom CSS from the custom_background.css file in your new custom.css file (located in the /custom folder).
3. Keep in mind that Thesis 1.0 does not have a config.php file; instead, everything is controlled from the new Thesis options panel, which should be much easier for you to use.

Finally, regarding the “stylesheet missing” error—I have no idea what’s going on there. Generally, that kind of error is the result of an incomplete upload, so you may want to try erasing the existing theme files and then re-uploading the /thesis folder.

Chris,
Thank you for that – The background works…However, a leak has occured with the fix.
2 of the 5 custom images I uploaded worked in v.03 but are now rotating out of scale and are hanging to the right of the rotator box. Their oversized. I re-sized them and they still hang over to the right. I’ve placed different images to test it it’s the same problem. Am I missing something here?

Also, there is a Google search bar in the bottom of the theme. Does that come standard with the upgrade? I’m not sure I want that there.
Thanks very much for your speedy replies. I really appreciate your responses! I hope I’ll be done with them.

Eric — The Thesis image rotator is only “intelligent” if your images fit the aspect ratios outlined in the Thesis launch post. The two images you have that aren’t rendering correctly do not fit any of the pre-defined aspect ratios, so they render in their default size. Right now, you have two choices for workarounds:

1. Crop the offending images to one of the pre-defined aspect ratios, or…
2. Crop them to be 420 pixels wide, which is the standard image width in the default multimedia box.

While looking at your site, I noticed that your sidebars are a little wonky. In particular, your search boxes are behaving strangely because you can only use 1 instance of the default search widget between both sidebars. Right now, you’ve got a search widget in both sidebar 1 and sidebar 2. This is causing the search box to render in sidebar 1 but not in sidebar 2 (underneath the “Search this Site” heading).

Finally, your Google search widget is something I’ve not encountered on the WordPress Widget interface before. Have you installed a plugin to add Google Custom Search functionality? If so, you should delete it, simply because Thesis 1.0 provides you with a “Google Custom Search” widget that you can use instead (if you like).

If not, simply remove that widget from your sidebar, and it will disappear. Also, keep in mind that working with the WordPress Widget interface is an annoying, imperfect art. The interface itself is horrible, and oftentimes, people find themselves making changes to the wrong sidebars and/or not saving their changes. Again, I don’t think this is the fault of the user—crappy interfaces produce crappy results.

Eric — Hey, it’s my pleasure! I’m just thankful for the opportunity to help more people through a framework like Thesis.

Eric — I’m not sure I understand your issue entirely, but it looks as though you may have edited both your link categories and your post categories. The WordPress dashboard does a poor job of separating the two adequately (IMO), so it seems likely that you may have simply not realized which categories you were editing.

Did you manage to get this resolved?

Chris,
You can disregard my question on ‘Notes and Alerts’ I found the difference in the coloring by typing either Note or Alert. Thanks man. Hopefully, I beat you to the punch in responding to this question, saving you some time.

Works Great!

Hi does this template have options for ads, link buttons or banners, and ad space? It looks and sounds awesome but I blog and I need a template I can put money making stuff on…..thanks, Daniel

I am having trouble with changing the background using the set of predefinded backgrounds, but am unable to get it to work.

I have opened up the custombackground css sheet and have tried copying and pasting the required code into the custom style sheet, but nothing happens and Im wondering what Im doing wrong.

Is this the exact code I have to paste for set 1? -

body.custom {
background: #8db6b6 url(‘images/bg-ocean.jpg’) 50% 0 no-repeat;
}

.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}

.custom #page {
background: #fff;
}

Do I just add this code to the bottom of the custom.css sheet? Does it need to be place within any tags? Ive tried a few combinations,, but nothing seems to work.

Chris, there will be three of us using the developer’s license (from the same company). Am I correct to assume that we’ll receive one login which we could all share? Are there any restrictions as to how the developer’s license works?

I posted this question in the forums and am trying to be patient (I did it like, um, five minutes ago) but I thought I’d mention a couple of things from a non-coder perspective.

The custom background tutorial says that header.php should have the following html in it:

Out of the box, Thesis comes equipped with a markup structure that can accommodate background changes with ease. Three HTML elements (found in header.php) are involved in the production of the background:

But in Thesis 1.3.1, those elements aren’t in the header.php file. I added them manually, and then proceeded with the tutorial, but the result is still not correct. There’s now a grey background and a white page, but the margins are totally wrong.

May need to update that tutorial? Or clarify some of this?

I love Thesis, and appreciate how much I can customize even being a non-coder. But I really, really want to be able to customize.

Myg — That tutorial needs to be updated for Thesis 1.3+, and if you’ve added anything to your header.php file, you should take that out now. All you have to do is add the appropriate CSS to your custom stylesheet—you won’t have to add any HTML at all.

Hello Thesis creators…

I am interested in using the Thesis theme for my existing wordpress site. I have some questions before I make my final decision. Can you contact me by email so I can discuss certain aspects that I want to know before I make the switch to my already active site.

My email address is : chuck@rebeltraders.net

Kind Regards,
Charles Young
President Rebel Systems LLC

Peter — If the sites you use Thesis on are restricted to ones that your company specifically owns and runs, then you’re operating within the terms of the Thesis developer’s option. Your company (the owner of the developer’s option) receives one universal login for Thesis.

Chris,
I noticed that when I click the “About” page on your site, the header within the post says, “About the thesis theme.”

If you go onto my site and click “About” in the Nav menu, you will see the word “About” as the header above my personal information.

How can I write whatever I want to for a title of a post without that same title showing up in the Nav menu when creating a page? For example, I want the Nav menu to say “About,” but I when someone clicks to view that page, I want them to read a different heading other than “About” which is in the Nav menu. What if I wanted it to say “About Me” in the header of the post? How do I do that?

Suggestions?
Thanks

Hello,
Question please?
Am I able to build websites and sell them using the thesis developers option?
Excuse the ignorance I mean if i can build a website for my local butcher(on thesis) and he pays me?
Thanks in Advance Alan

The download link for the custom background files tells me it’s corrupted.

Hi there, I’m a newcomer to Thesis and Wordpress. Just downloaded both and have them installed. I’m having A TON of trouble uploading a custom header/masthead on the page. Can anyone give me some tips on this? Or could you redirect me to a Web site with a good tutorial (I can’t find one!) that is good for people who aren’t tech savvy? Editing code scares me. I wish there was an easy way to upload a new masthead/header in the dashboard area, and frankly, I’m surprised that there isn’t! Any help would be GREATLY appreciated.

Hi. I’m interested in purchasing Thesis but am fairly new to the blog side of life. Will I be able to customize it “before” making it live on my blog or do I have to make the switch and quickly go through and make changes as quickly as possible? I’m trying to keep from having visitors seeing my mess of the change over if I can. Thanks so much. Looking forward to learning more.

Hi,
I am looking to get a Thesis theme
but was wondering if they were compatible with the Apple Mac
and would I be able to download it onto my computer,
I have downloaded a few free ones but with no success.
regards
Jean Nash

Is there anywhere to send in a question? I can’t find a contact link and have a couple of things I need to clarify before I purchase this and I can’t really find anything about them in the documentation.

Thanks.

Chris, I’m unclear with how Thesis uses ems, pixels, 960 grid and a few more layout issues. I was told that Thesis uses the 960 grid. Is this true? If so, I couldn’t figure out what size grid you are using. I want to be able to line up all my elements with existing elements, so it would be good to know if there are some layout rules. Is it important make my page a certain width? I tried making my page 1000 pixels wide, and lots of things got messed up.
As far as ems and pixels, how do my elements sized with ems interact with my elements sized with pixels? If I have a graphic sized in pixels, but the page width is in ems, will I have potential problems?
How can I find out what the width of the container, content_box and content are? This doesn’t show up in Firebug. It would be helpful if all of this layout stuff was explained somewhere for people who want to design custom layouts. Maybe it is, but I haven’t been able to find it.
thanks,
Eliana

Thanks for the info. I’m in the process of shopping around and Thesis looks like my best option. I’ve got several clients, including myself, that this looks like the best of all worlds. I’m actually looking at putting a “watermark” on the page, almost like the WordPress logo on their site. Thanks again!

What happens, when a folk buys single site license thesis theme and implement that in different sites?

Also, is it allowable that one can use the single licence theme in multiple sub-domains?

In a nutshell: Yes … WordPress themes are GPL including premium themes such as ‘Thesis’:

http://wordpress.org/development/2009/07/themes-are-gpl-too/