Want to add a custom background to your theme and learn about using the custom stylesheet in the process? Check out the custom background tutorial in the Thesis user’s guide, and get your style on!
The current Thesis version is 1.6.
Bold red links are for members only!
Solving the fundamental problems of website development and design
{ 4 trackbacks }
{ 88 comments… read them below or add one }
Chris,
Not only does your Thesis Theme rock, but I am shocked how much effort you are putting into providing tweaks and very detailed tutorials after the initial development and launch.
You are the Wordpress Rockstar of the tubes.
Keep up the great work eh!
-Casper
I agree. Thanks for really providing value to the theme. I look forward to seeing more updates.
casper, Daniel — Thanks, guys! Ultimately, providing users with the means to make Thesis fit their site perfectly is what this is all about.
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!
Ditto with everything said here, people have told me I was crazy to pay for a theme, but at every stop you make it worthwhile with updates such as this and the thesis forum which I have found extremely helpful. I am currently putting together a post on my blog about it, I hope it gets you some more business.
Thanks again.
Cheers
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!
Hi,
I followed the instructions but the custom values are not applied. Is there some basic step I have missed? The custom.css is in the theme directory? Version of wordpress is 2.3.2.
cheers
Tony
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.cssto 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.phpfile yet? If not, you can find detailed instructions here.found them
cheers
Tony
yeah, about the footnotes, a feature I would like to use. So, how’s it done without the plugin. Thanks!
Thanks for the info…works great, instructions are very clear which is great for someone like me who doesn’t know a lot of coding. Just learning as I go along. Great theme, so happy I purchased it!
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,
I was tweaking the plain gray scheme to avoid users getting the horizontal scroll bar and worked out this custom css.
It seems to work, but is there a better way to do this without cutting out that little bit of whitespace?
body.custom { background: #44443f; }
.custom #container { margin-top: 1.3em; margin-bottom: 1.3em;}
.custom #page { padding: 1.8em 1.6em; background: #fff; border: 0.4em solid #3e3e3a; }
Hey Chris I’m still having trouble putting in a custom header. Please help! I’ve looked in the forum and I am still unable to get it down. Thanks!
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?
BlueDrifter — Are you talking about the code snippets contained in this post? If so, I have styled all those myself using custom CSS classes that are a real pain in the butt to implement. In other words, everything that you see is handled through my own version of
custom.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!
Tony — Although I knew that people using a max resolution of 1024 × 768 would see a horizontal scroll bar, I chose to preserve the whitespace around the content because it is essential for creating a cohesive, clean look. If you wish to preserve the whitespace and eliminate the horizontal scroll bar (which only rears its ugly head on resolutions of 1024 × 768 or less), you’ll need to modify the width of either the content column or the right side (sidebars).
Either one of those modifications would require more CSS changes along with associated explanations, so I decided not to address them in this post.
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.
Hey Chris, I’ve posted this in the forums, but no suggestions yet. My IE readers say they can’t see the right side of my blog. In other words, they can’t see the sidebars or my ads (where the rotating photo normally is). Any ideas?
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.cssfile:You can try removing
.sidebarfrom 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 newie6.cssdefinition ought to look once you’ve edited it:Thanks so much, Chris. I tried doing this, along with removing the poll altogether and another widget in the same sidebar, and it’s still not working. Hmm.
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
Ah loved the tip and its now live on my weblog. Thanks much Chris !
Meanwhile I am seeing a small delay in page loads after this change
Is this because the browser needs to paint before it starts rendering the content?
(I am using Set 1 with no background image)
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!”
Hi Chris,
I’ve been a regular visitor to your blog and noticed you’ve stated you aren’t “for hire”. Couldn’t help but ask – do you still do individual design projects or are you full time working on creating themes for sale?
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.
Hey there – Just reporting that IE users still can’t see half my site. Any ideas are appreciated!
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.
Thanks a ton, Chris. It worked. I’m amazed at the level of service you offer.
Shashikiran — Anytime! Great to hear that you’ve got some customization happening!
Chris;
I think I did everything, upload Custom style sheet, set config value to true, and I pasted the set 1 code to the css and saved it but it doesnt work. Since I’m the only one saying that, I must be doing something wrong. But what? Do I load the google analytic code to the css also?
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.
Problem was I uploaded it as a file instead of just the sylesheet. Works now. Hey I love this theme and I really appeciate your support. Do you know of training that can help me learn more about blogging especially driving traffic.
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.
Thanks I’ll check them out…..I put the google analytics code onto the custom stylesheet also seem to be working
Richd — The Google Analytics code only belongs in
footer.php, just before the closing</body>tag. It won’t do any good in yourcustom.cssfile because your custom stylesheet can only contain CSS declarations.cool; thanks
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
Ron — The easiest way to deal with the additional CSS is to simply copy and paste the CForm style code from your HTML source into your custom stylesheet.
Generally, the CForm style code gets output between your
<head>tags, but I checked your source and was unable to find anything. I’m assuming (hopefully not incorrectly) that you’ve removed this code in order to decrease the file size.For the record, you can just copy and paste the CForm CSS directly into your
custom.cssfile without modifying it, so it should be pretty easy to accomplish. If you have any trouble integrating the styles into your custom stylesheet, please let me know!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!
Chris,
I love Thesis to death but I have two problems. I’m able to add the custom backgrounds in v.03 but it’s not happening for me in 1.0. I followed the instructions verbatim. I then deleted it from my server, tried again, re-installed, the works. I made sure to changed the config files to “true” where I needed to, but it still isn’t working for me.
The second issue is that I have a “stylesheet missing” error on the dashboard. This message applies to all my avaliable themes listed when I go through them. Both of these issues came up when I installed 1.0. I hope I didn’t screw anything up.
Any suggestions?
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:
/custom_backgroundfolder and place them in the/custom/imagesfolder.custom_background.cssfile in your newcustom.cssfile (located in the/customfolder).config.phpfile; 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
/thesisfolder.Eric — Just wanted to let you know that I’ve updated the custom background tutorial. Hopefully, this will clear up any lingering confusion that you may have had!
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.
hey Chris, I want to expand the borders for my site, and I want a bit more room for my content box?