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!
A 3-column template system with spectacular typography and customizable, rotating images
{ 59 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?
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:
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.
Chris,
A HUGE THANKS for your rapid responses to my questions. My site looks like I want it to and it functions the way I want it to. You have helped a ton and I really appreciate it. You are a man of your word and that is an important thing. I can only imagine how many e-mails you recieve daily and your dedication to Thesis and supporting us makes you a special dude. THANKS A TON FOR YOUR HELP!
Eric — Hey, it’s my pleasure! I’m just thankful for the opportunity to help more people through a framework like Thesis.
Chris,
I’m about to go insane - Under ‘Link Catagories’ in the dashboard, I added a new catagory. I then went to change it because I didn’t like the title. Instead of deleting the new link catagory that I had just created, I accidently deleted the first catagory on the link catagory list.
The first catagory in the link catagory section is now blank showing posts without a link catagory title and all the other catogories I have in are listed are below the blank one. Posts are being sent to the blank catagory (first on the list). Since then, my posts are showing up all over the place. It’s as if my links don’t know where to go as the parent in the Links Catagory section is there, but blank. I can’t get around this. Any suggestions?
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,
When I click on one of my catagories, say, “Instruction,” can specific blogs tagged under Instruction be posted under ‘Instruction’ in a new window? When I click a catagory, my ‘recent posts’ show up instead of specific posts assigned to specific catagories.
I’d love for this to work. Is it possible? Any suggestions?
Thanks man
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.
Eric — That type of thing is possible, but it would require the creation of a clever custom function to pull it off. This type of thing may find its way into the theme in the future, but for now, it’s something that has to be handled by the users.
Works Great!
Leave a Comment