Don’t miss this special offer from DIYthemes, which ends on August 31, 2008!

Check Out These Easy Image Styles and Get Your Updated Stylesheet

by Chris Pearson on May 20, 2008

Incorporating images into your posts is one of the most stylish and effective things you can do to enhance the appeal of your content. Thesis comes pre-equipped with sexy image styles that you can apply on-the-fly, and you’ll love how easy it is to tweak your images to get the exact results you want.

Check out the newest section of the user’s guide, entitled How to Style Images in Blog Posts, and learn how to rock your images like a pro!

Important Note: As of Thesis 1.0, the updated stylesheet is obsolete. The new version of the theme has everything you need to rock the image styles discussed above!

Finally, be sure to subscribe to the Thesis feed—you’ll receive all the news you need about theme updates, extensions, new documentation, and tips that will help you run a truly killer site.

{ 1 trackback }

Top Color Blogs » Blog Archive » Thesis Theme CSS - Setting Up the custom.css Stylesheet
07.02.08 at 9:38 pm

{ 27 comments… read them below or add one }

1 Bruce Keener 05.20.08 at 7:12 pm

Thanks for writing this, Chris. I had noticed the new nomenclature in the WordPress image uploading box, but did not realize there was actually a new set of classes to go along with it.

Thanks also for clarifying the widths, especially with respect to the max suitable size for the aligned right and left ones. I have not ever gone beyond 220px on such images (all were unframed) , and it’s good to know I “got it right” without really knowing it.

I really should make more use of pictures, and of frames when I do use pictures. Thanks for the good reminder of the value they bring to the table.

2 Gary Ham 05.21.08 at 6:13 pm

I purchased your thesis Theme. I paid for it. I have a receipt. I have a charge on my AMEX Card. I have a user id on your site “hamgva.” When I log in, however, it says “Oh My God, You have not purchased any themes.” I cannot get to the download. I also sent a message with receipt attached to sales at diythemes dot com. What gives? How do I get the download and recognition that I actually paid for your theme?

3 Chris Pearson 05.21.08 at 7:15 pm

Gary — For some reason, my membership software thought your transaction was still pending. However, one look at PayPal indicated otherwise, so I manually adjusted your user settings to mark the transaction as completed.

I’m truly sorry for the inconvenience! You should be able to download the theme without a problem now.

4 Robert Simplicio 05.22.08 at 1:01 pm

Chris — You may want to look and see if clicking vs. not clicking the “Return to Site” link on the PayPal checkout page affects whether or not aMember recognizes and logs the completion of the transaction. I do know that this is an issue with some other e-commerce services/packages I use that integrate with PayPal, so it’s worth a look. You may want to add some text to the page before the user gets sent to PayPal related to your findings on this.

5 Chris Pearson 05.27.08 at 9:07 am

Robert — Thanks for the tip! I’ll be keeping an eye out for this.

6 Nick 06.04.08 at 11:05 pm

Hello Chris I was wondering if I could just get the thing you’re offering to create your own because I would rather get that then buying the whole template.

7 Chris Pearson 06.06.08 at 9:09 am

Nick — Everything contained in this demo site is intended to serve as supplemental material for people who’ve purchased the theme. If I were to give you the stylesheet, then I would really jeopardize my own integrity with my customers. Of course, I’m not even willing to think about going there, so unfortunately, I can’t help you out.

Despite this, one thing to consider here is the fact that when you purchase Thesis, you are really purchasing a membership to the theme. Supplemental styles, detailed how-tos, and downloadable add-ons are all membership benefits, and based on the feedback I’ve received, people feel like the theme is an outstanding value.

Don’t let the price tag scare you—I’ve charged clients over $10,000 for a single site before, so $87 is borderline larceny :)

8 Christine 07.07.08 at 11:18 am

*sigh* I just wish those images were 500 pixels wide - that is the default “medium” size for Flickr. I often post photos there, and then copy over and post them to my blog. I hate editing CSS (which makes my eyes bleed, as has been documented online before - just Google it), so I’m stuck either resizing all of my images to a smaller size or with bleeding eyes.

*pout*

Just had to share in case it made a difference in options in future versions.

9 Chris Pearson 07.07.08 at 11:30 am

Christine — In addition to the myriad options available to users in Thesis 1.0, the new version of the theme is also much, much easier to modify. In your case, it would be quite simple to increase the size of the content column to accommodate your standard, 500px-wide images. In fact, I’d love to work with you on nailing down a solution that will make your image-handling life easier. If you’re interested, simply drop me a line: diythemes – at – gmail dot com.

Also, it’s worth noting that the image rotator (in the upper right) works off of standard image size ratios, so it will gracefully handle your 500px images without you actually having to do anything!

10 Eric 07.21.08 at 11:51 pm

Chris,
A couple of questions:
Is there a link that describes specifically how to create a static home page in Thesis that I can check out. I know you have them for Cutline and so fourth, but does applying the tips on your other themes work in Thesis as well?
Also, with regard to the Nav links in the header, I’m wondering about the same thing. Is Thesis different? I use Copyblogger on one of my domains and I can make the Nav links, but I can’t add content to them. When I click on them, I get a 404 message.
Thanks

11 andrew 07.23.08 at 9:58 pm

Chris,
Is there an easy way to make the images selected for the rotator link to specific blog posts?

I can’t seem to find it via google or the normal tutorial routes.

Only if you get a chance,
Andrew

12 Chris Pearson 07.24.08 at 12:41 pm

Eric — In Thesis 1.0+, you control the contents of the nav menu entirely from within the Thesis options panel. Also, creating a static home page is a standard WordPress procedure. The only caveat here is that Thesis will detect the fact that you’re using a static home page, and it will automatically make the “home” link point to that particular page. Therefore, you won’t have to include this page in your nav menu; you’ll just need to include the other pages that you want in there.

Oh, and it looks like you got that 404 issue resolved… If not, let me know, and we’ll work it out.

Andrew — In Thesis versions up to and including 1.0.2, there is no easy way to link the rotating images. I’m going to add this functionality to the next release, though, so keep an eye out for that.

13 andrew 07.24.08 at 3:43 pm

Chris - I appreciate the reply. You are good to your customers. It makes the product worth every penny.

I’m curious though, you said “no easy way,” is there a difficult way I should spend midnight-to-6am looking for in the templates? Or are you saving me the trouble by just saying, “wait till next time.”

I know my site isn’t much yet, but it’s got big hopes and dreams.

14 andrew 07.24.08 at 3:46 pm

I noticed you probably said “no easy way” because my question clearly asks for an “easy way.” Point taken.

15 Chris Pearson 07.24.08 at 4:03 pm

Andrew — In this case, even the hard way is a total pain. I’m gonna fix this in the next release, though!

16 andrew 07.24.08 at 8:47 pm

I’ll definitely take your word for it. I look forward to the next release, it would also be good if you could relate the image in the rotator to specific posts. But anyway, I’ve taken up enough comment space as it is. Thanks for everything.

17 Eric 07.25.08 at 1:25 pm

Chris,
I was wondering how you can change the colors from the standard yellow, when I place Your alert text goes here! tag in thesis.

As far as the 404 message goes, I don’t have that problem on Thesis. I use copyblooger on another domain. When I created new nav links in the header, they are visible, but the problem is that when I click on them, I get the 404. I don’t know where or how to add content in those 404 pages - I’m definitly missing something there.

Thanks for your help - again. I’m trying to solve these issues on my own, and I kind of feel bad writing you with my newbie questions, but I’m learning alot thanks to you. Soon, I hope to be independent. I’m really happy with my site and I’m getting alot of compliments on the design. Couldn’t have happened without your time creating this absolute gem.
Thanks very much

18 Eric 07.25.08 at 1:27 pm

Chris,
Whoops - that would be the p class=”alert”Your alert text goes here! tag…that didn’t post to the message I just sent you - more newbie action.

19 Chris Pearson 07.28.08 at 8:45 pm

Andrew — Using the custom fields defined in the Multimedia Box section of the Thesis options panel, you can assign specific images to individual posts and pages. If your server supports direct URL access, you can use the image key, input your image’s URL into the value field, and then Thesis will do the rest for you. If your server doesn’t support this setting, you’ll need to workaround the issue by utilizing the custom key, and then you can input a valid img tag reference in the value field.

Eric — You can change the colors of the alert and note boxes with your custom stylesheet. Add these two declarations, and then you can tinker with different color schemes to find one that’s right for you.

.custom .format_text p.alert { background: #your-hex-value; border-color: #your-hex-value; }
.custom .format_text p.note { background: #your-hex-value; border-color: #your-hex-value; }
20 Lawton Chiles 07.31.08 at 2:27 pm

Chris, what about changing my header graphic? There are no instructions for this inside the User Guide, unless I am being an idiot.

ROCK ON!

Lawton

21 Kari 08.01.08 at 9:17 am

Chris,
Hello - I have no idea what a lot of these words mean and so I’m afraid my questions may be so basic that they’re laughable. But here goes:
A)
I currently have a personal blog that is hosted on Lunar Pages. I want to move it to a free wordpress blog.

If I buy Thesis, will I still be able to transfer all of my current blog content over to the thesis template? I use wordpress already as my, um, blog writing place. (sorry to sound so lame!)

B)
Also, I have looked through all of the other folk’s links who are using thesis and none of them seem to be on a free hosting site, they are all dot.coms. Will thesis work with a free blog?

C)
Will there be a way to change the font used for blog titles etc?

D)
Will all of that be easy for someone who has no idea about the “inside” of website to figure out?

E)
Is there a trial period in case I can’t grasp it all?

F)
What does “magazine style mean?

Thank you.
Kari

22 Andrew 08.04.08 at 6:46 pm

Chris,

Thanks, man. That did the trick. I really appreciate the help and I especially appreciate the time out of your busy schedule. Thesis has great support (as the buttons suggest).

Have a good one!

23 Chris Pearson 08.07.08 at 12:29 pm

Lawton — There are a couple of good threads in the forums that cover header images. You can read up on clickable header images, or you can simply check out the general header image thread.

Kari — Here we go, in order:

  1. Thesis will not work on a free, hosted version of WordPress at WordPress.com. It will, however, work on your current site at Lunar Pages.
  2. As mentioned in #1, Thesis is not intended for (and in fact, not allowed on) free blogs.
  3. Thesis 1.1, which should be out in the next couple of weeks, will allow you to control the fonts all over the theme. Best of all, you won’t have to touch any code to make it happen.
  4. If it’s not the easiest thing you’ve ever done, it’ll still rank way up there.
  5. Unfortunately, there is no trial period. On the upside, the options panel makes things a lot easier to understand.
  6. “Magazine style” is fancy lingo for a site that has more images and thumbnails on its home page. Typically, these sites only feature the blog-style reverse chronology on interior category pages, and the result is a site that feels a lot less like a standard blog.
24 lawton chiles 08.07.08 at 1:00 pm

Chris, what about changing the custom coding on the multi-media box?

Where can i change the sizes to match say a 300×250 size Thesis ad?

25 Chris Pearson 08.07.08 at 1:20 pm

Lawton — Please post your questions to the Thesis forums. Thanks!

26 Terry B 08.09.08 at 7:52 pm

Chris, I’m thisclose to migrating my blog from Wordpress.com, using Blue Host and Wordpress.org. I love the wonderful typography of Thesis—and many other elements. It’s truly a beautiful, flexible theme. What I’m hoping might be easy to do [I know next to nothing about editing CSS—actually, make that nothing] is replace the rotating photo with a similarly sized space that could include linkable text and photos. Although I could also just build an image with type in PhotoShop and have the whole thing linkable. Is something like this either currently doable or on the horizon? Thanks!

27 Chris Pearson 08.10.08 at 11:57 am

Terry — In Thesis versions up through 1.0.2, the rotating image space can be used for images, videos, or custom HTML. The latter is exactly what you would need to accomplish what you’ve described. The text wouldn’t be styled by default, but you could certainly solicit the help of users on the forums to figure that out.

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>