A minimalistic skin for the Thesis theme

A minimalistic skin for the Thesis theme

Mini is a minimalistic skin for the Thesis WordPress theme. Originally designed for use with Helvetica (or in its absence, Arial) and a greyscale colour scheme, but fonts and text and link colours can be edited via the Thesis Design Options panel.

Features

  • Works in both Page and Full-width frameworks
  • Widgetised Multimedia Box and Footer
  • Styles for multi-level dropdowns and threaded comments
  • Unique list, blockquote, pullquote and comment styles
  • Custom archives template, listing posts by category
  • Unique styles for the Thesography EXIF plugin

Mini requires Thesis 1.6 or above.

Download skin View demo

Installation instructions

  • Upload custom.css and custom_functions.php to your Thesis custom folder
  • Set font and colours: this can be done by inputting the colours into the Thesis Design Options page or by uncommenting the last section of CSS in custom.css
    • To set the font and colours in custom.css remove the /* and */ from before and after the section headed /* === COLOUR & FONT OVERRIDES === */ at the end of the file.
    • To set the fonts and colours in the Design Options copy them from this screenshot or enter the following items under Fonts, Colors and More!
      • Body (and content area)
        • Helvetica
        • Site background color: FFFFFF
        • Page background color: FFFFFF
        • Primary link color: 999999
        • Uncheck “Show interior layout borders”
      • Nav Menu
        • Link text color: 111111
        • Link text hover color: FFFFFF
        • Current link text color: 111111
        • Current parent link text color: 111111
        • Link background color: FFFFFF
        • Hover background color: 555555
        • Current background color: FFFFFF
        • Current parent background color: F5F5F5
        • Nav border width: 0
      • Header
        • Header text color: 111111
        • Tagline text color: 888888
      • Headlines
        • Headlines text color: 111111
        • Sub-headlines text color: 111111
      • Bylines and Post Meta Data
        • Bylines and Post Meta Data text color: 888888
      • Code
        • Code text color: 111111
      • Multimedia Box
        • Text color: 111111
        • Image box background color: F5F5F5
        • Video box background color: 000000
        • Custom box background color: F5F5F5
      • Sidebars
        • Sidebar text color: 111111
        • Sidebar headings size: 16pt
        • Sidebar headings text color: 000000
      • Footer
        • Footer text color: 888888

{ 69 comments… read them below or add one }

1 James November 18, 2009 at 22:20

When I deployed this skin, I removed the default RSS feed, then added it back as a link to my Feedburner feed. In this way, the RSS link behaved like the rest of the links in the navigation menu. I think it enhances the minimalist look and feel of this great skin.

2 kristarella November 19, 2009 at 07:37

That’s a good idea James. It might make it hard for some people to find because they lok for the icon, but it’s right up the top there, so hopefully not. You could also have used .custom ul.menu li.rss a {background-image:none;} and added the feedburner link in the Thesis Options.
Your blog looks great!

3 James November 19, 2009 at 22:08

Would there be a way to style the default Thesis feedburner link so it matches the rest of the nav bar? I’m thinking a dark gray RSS icon to replace the orange, and that would look really tight.

4 kristarella November 20, 2009 at 08:31

Sure, if you downloaded a greyscale rss icon, 16x16px, and put it in you custom/images folder, you could use .custom ul.menu li.rss a {background-image:url(images/rss.png);}

5 Alison Moore Smith November 24, 2009 at 07:27

Very nice, thank you!

6 Ben November 30, 2009 at 00:29

This is fantastic. Quick question. I like how I have my content laid out but I’d really like to use your header/nav layout. Would you be alright If I used your source code to build my site’s header like the mini header?

Thanks.

7 kristarella November 30, 2009 at 11:19

Ben — Sure, that’s fine ;-) Both my current skins work with any of the Thesis settings, so you can have any sidebar layout etc that you want. If you back-up your files feel free to copy bits of Mini into your custom files or copy your customisations into the Mini files: most of the custom files are marked out with comments so it shouldn’t be too hard to find which CSS relates to what.

8 Ben December 1, 2009 at 08:25

Thanks, that’s so awesome of you.

9 Robin December 4, 2009 at 11:30

Thanks for skin.., very nice

When i’m done installation your skin i look any different at top menu.
I your demo nav menu in right, but at my blog still at top
What need to edit this so my blog like your demo.

10 kristarella December 4, 2009 at 15:46

Robin — You’re using an old version of Thesis. You need version 1.6 or above, or you can try renaming all the ul.menu elements to ul#tabs in custom.css.

11 Robin December 4, 2009 at 21:37

Thanks for help
i will update my thesis theme

12 nwng December 18, 2009 at 04:54

the skin is VERY nice but I have a suggestion:

It shows 1 error for xhtml strict and 5 errors for css 2.1 (http://validator.w3.org/)

13 vieux December 19, 2009 at 06:51

great skins, thanks. i especially like the bars at the top and bottom of mini. nice touch.

14 Adam December 22, 2009 at 11:20

Great theme I’ve used it on my site http://www.knowphoto.com but I’m hoping I could move the search box above the media box rather then below. Is there an easy way to move this?

15 kristarella December 28, 2009 at 10:26

Adam — Thanks for sharing your site! Looks good. Looks like you’ve figured it out, but had you not I would have said you need to use thesis_hook_before_sidebars.

16 kristarella January 5, 2010 at 11:36

nwng — Thanks for checking, but I don’t think there are any errors in the skin. I found a few errors on my test site, one set of errors was regarding the dropdown to change the skin view in the sidebar, which does not come with the skin and is only used on that site, the other was in the comment form, which is produced by Thesis and has nothing to do with the skin. The only CSS error I found was the CSS for the rounded corners on the download button, which is CSS3 or browser specific and therefore not intended to be CSS2 valid, and is also not available with the skin download. The CSS file that comes with the skin is completely valid.

17 Owen Marcus January 19, 2010 at 01:27

I love your skin! It is exactly what I was looking for. You took a great theme and made it better.

In the process of setting up the site – http://unwrappedlove.com it crashed so I reloaded, WP, Thesis then your skin. The site is back working, but I can’t get the footer to return, there might be other features that aren’t working I don’t know about.

This problem has exceeds my skill – can you help?

Thanks,

Owen

18 kristarella January 19, 2010 at 10:25

Owen — I’m not sure where it’s gone just by looking at the site. I would try downloading a fresh copy of the skin and comparing the custom_functions.php files to see if there’s a bit missing, or just uploading a fresh copy of that file from the skin if you haven’t made any other changes to that file.

19 Owen Marcus January 19, 2010 at 10:52

Your suggestion was right on. It was one of those obvious thing you don’t think of.
Thanks,
Owen

20 Kory Mathewson January 21, 2010 at 03:36

I really enjoy the skin, so much so the I deployed it at http://www.korymathewson.com, everything looks great and I am really happy with it… except one thing:

The Multimedia box hides the navigation menu, I have been fiddling around, but I can not seem to get the navigation to the top, in front of the video.

Please help!

21 vieux January 21, 2010 at 05:51

kory, i just viewed your site (looks nice!) and i don’t see any conflict btwn the mm box and the nav menu, it looks fine. i see about an inch of white space btwn the two. mac, snow leopard, if that helps.

22 Kory Mathewson January 21, 2010 at 07:30

I should have clarified. The menu and mm box do not interact unless you mouse over the navigation. Particularly the ABOUT Parent Heading on the Nav menu has several children, once the child list is visible, that one inch of white space does not fit the whole list and that leads to some overlap between the mm box and the Nav.

Is that a little more clear?

23 kristarella January 21, 2010 at 13:31

Kory — Which browser is that in? It looks fine in Chrome, Safari and Firefox. The dropdown goes over the Multimedia Box, but if you have dropdowns long enough they’ll have to go over something.

24 Kory Mathewson January 22, 2010 at 03:05

It was on FF3 and IE7 in Windows. I finally figured it out. It was a combination solution. Setting the Z-Index of the navigation to a very high positive value, and then setting the wmode of the embedded player to opaque. Looks good now for me, hope I didn’t muck things up in the browsers it worked in.
Thanks again for the great skin.

25 kristarella January 22, 2010 at 10:30

Kory — Cool, glad you got it sorted! Good to know about the wmode thing, yeah sometimes flash embeds go a bit crazy with z-indexes even though it seems fine with other HTML content.

26 Lawrence February 12, 2010 at 07:54

Hi Kristarella

Many thanks for theme! I’m using it for my first attempt at any serious Thesis customisation (I’ve used the ‘out of the box’ version for ages on my own site).

I’ve never got the hang of teasers! I’ve created a static home page, which I want to contain the main bulk of text, then below it, 6 teasers pulling posts from Lifestyle and Alexander Technique categories, and showing thumbnails. Is this possible, and if so, how?

Sorry to ask what will really be a basic question!

27 kristarella February 12, 2010 at 14:33

Lawrence — To use a static page and show posts or teasers on the home page you would need to write a custom loop, which is not really for beginners. It would be much easier to use a normal blog home page, set your site to show 6 posts under Settings > Reading and set them all to be teasers under Thesis Options > Home Page Display > 0 feature posts. Then put the text you want above the teasers in a custom function, e.g.,

function custom_home_page() {
?>
<div class="post_box post top">
	<div class="format_text">
		<p>Put your extra content here.</p>
	</div>
</div>
<?php
}
add_action('thesis_hook_before_content','custom_home_page');

Oh, and the menu on this skin is not really designed to be so long, but if you have trouble fittin what you want in you might want to change the width of the menu to not cover the title, try changing the width for .custom ul.menu to 50% on line 23 of custom.css.

28 Lawrence February 12, 2010 at 22:01

Many thanks for this, Kristarella. I’ve set up a dummy site in the meantime to do all the customisation. I’ll stack pages to shorten the menu. Really enjoying the skin!

29 Lawrence February 14, 2010 at 10:10

Hi Kristarella. Back again! Nothing shows up on my home page except the post teasers, even without me amending your code at all. This is the html for what I wanted to put in the Put your extra content here that you suggest:

“The Alexander Technique gives unparalleled health benefits! I am no longer plagued by headaches and I have begun to use my body differently! A month’s sessions with Julie have revolutionised my life!”

Can you help. please?

30 Lawrence February 14, 2010 at 10:11

Ah! It has, of course, translated the html: Sould have and read:

style=”padding-left: 30px;”>”The Alexander Technique gives unparalleled health benefits! I am no longer plagued by headaches and I have begun to use my body differently! A month’s sessions with Julie have revolutionised my life!”

31 Lawrence February 14, 2010 at 10:14

Darn! Never mind – you get the idea … sorry to cluter the comments!

<p style="padding-left: 30px;"><span style="color: #048ea8;"><span style="font-family: tahoma,arial,helvetica,sans-serif;"><span style="font-size: x-large;"><span style="font-size: xx-large;">"<span style="color: #ff6600;">The </span></span><span style="color: #ff6600;"><span style="font-size: xx-large;">Alexander Technique</span></span> gives unparalleled health benefits! I am <span style="color: #ff6600;">no</span> longer plagued by <span style="color: #ff6600;">headaches</span> and I have begun to use my body differently! A month’s sessions with <span style="color: #ff6600;"><span style="font-size: xx-large;">Julie</span></span> have revolutionised my life!<span style="font-size: xx-large;">"</span></span></span></span></p>

32 Lawrence February 14, 2010 at 12:20

Embarrassed: had put it in the custom CSS rather than function! Problem solved! Thanks. Please delete spurious posts!

33 Kory Mathewson February 21, 2010 at 04:34

Is there a way that I can remove the custom footer for the landing page of the website?

I do not want the four column footer on the front page, seems like this should be an easy fix?

34 Mark February 21, 2010 at 09:58

I cant seem to get this theme looking like the demo.

A few things.

1) Cant drap the SEARCH widget into the sidebar
2) The footer looks all messed up, see http://wellnessync.com. Scroll to the bottom. Why does the text appear after the hr tag and the text is almost touching the line? I dont get why this is happeneing since i have followed the instructions as posted.

Thanks

35 kristarella February 21, 2010 at 10:35

Kory — In custom_functions.php you need to wrap the contents of the footer widget function (it should be clearly marked) with if (!is_front_page()) : at the start and endif; at the end.

Mark — The skin should not affect widget behaviour in any way. The link you gave seems to be using Cappuccino, not Mini and there is no footer, so I don’t know what was wrong with your footer.

36 Lawrence February 22, 2010 at 10:26

Hi Kristarella

Changing the text colour for the navigation hover menu via the Design Options doesn’t work – I still get the original format and colours (http://testing.urc.org.uk). Am I doing something wrong or there some over-ride happening?

37 kristarella February 22, 2010 at 13:17

Lawrence — Yes, the bottom of custom.css (lines 137 to 156 in your file) is overriding layout.css. To use the design options that section (which is originally commented out) should be commented out or deleted and the settings in the install instructions above should be entered into the Design Options page.

I know it’s of no help to you right now, but it might be good to know that Thesis 1.7 will have a nice export/import settings thing, so in the future we won’t have this kludgy way of implementing skins, we can just give you an import file for the Design Options.

38 Aldy February 25, 2010 at 12:52

Kristarella,
Thanks for this skin. I Can talk more, because my english to bad. I’m from Indonesia.
Terima kasih.

39 Eduardo March 22, 2010 at 05:09

AAAHHHHH, FANTÁSTICOOOO!!!

At last my brand new (and empty) blog looks nice. I love the minimalistic design, BEAUTIFUL!!

Thank you very much for this skin :)

I have two big beginner questions:

1) Why can’t I see the footer in my blog??

2) I woul like to put thumbnail also in the box teasers, is it possble?

Bye Kristarella, and excuse me for my English!!

Ciaooo!! :)

40 kristarella March 22, 2010 at 08:02

Eduardo — Your footer is not there because something is breaking the loading of your page after the “TODO!!” widget. To have post thumbnails see the video about in-post options, in particular the bit about post images and thumbnails.

41 Eduardo March 22, 2010 at 09:22

THANK YOU!!
OK, I’ll try it…but not now…
It’s almost midnight in theCanary Islands!! :)

Ed.

42 Eduardo March 22, 2010 at 10:27

Sleepy…..but problem fixed!! :)
Gracias!!

Ed.

43 Babusel April 7, 2010 at 23:49

Kristarella,

Any way to buy from you the secret of organizing the comments section the same way you have: I like it a lot!

I don’t have any web-design skills but can ask a friend to help…

Thanks,

Babusel

44 kristarella April 8, 2010 at 09:29

Babusel — Beyond what I said in my other comment about checking out the CSS, no there’s no option to buy it (I just don’t have the time to implement it or write out the instructions for you right now). However, this site design is likely to be available as a skin sometime soon, so you may be able to harvest it from that when it’s available.

45 Babusel April 8, 2010 at 09:42

Kristarella,

Thank you for taking the time to answer my question.
You are an incredible artist & a great person.

All the best,

Babusel

46 Max April 23, 2010 at 12:42

Hey Krissy,

I just upped the Mini theme onto my webserver and I see just one of the footers. Any of my added widgets wont show up in the footer widget as well!
I re-downloaded the file, but I get the same results. What could be the reason? I’m not much of a programmer but can manage a bit on my own. I am on Thesis 1.7

Thanks,
M.

47 kristarella April 23, 2010 at 13:03

Max — I’m not sure I know what you mean, I would have to look at it. Do you have any other custom sidebars registered?

48 Max April 23, 2010 at 16:46

Hey Krissy,

I do not have any other custom sidebars registered. Please check http://www.hollybollysongs.com to confirm.

49 kristarella April 23, 2010 at 17:23

Max — Try clearing your cache.

50 Thiet ke logo May 12, 2010 at 15:13

Thanks for sharing kris

51 Aaron June 6, 2010 at 03:30

Great skin, Kris, and thanks so much for making it freely available! I was curious if there’s a way to extend the black border in the header so that it goes all the way around the blog, similar to http://www.kottke.org

Is that an easy addition?

52 kristarella June 6, 2010 at 12:44

Aaron — In the CSS the lines that create that border are at the very top of the file:

.custom #page, .custom #header_area .page {border-top:0.5em solid #000; padding-top:1em;}
.custom #page, .custom #footer_area .page {border-bottom:0.5em solid #000; padding-bottom:1em;}

To make the border go around the content you can change it to:

.custom #page, .custom #header_area .page {border:solid #000; border-width:0.5em 0.5em 0; padding-top:1em;}
.custom #content_area .page {border:solid #000; border-width:0 0.5em;}
.custom #page, .custom #footer_area .page {border:solid #000; border-width:0 0.5em 0.5em; padding-bottom:1em;}

As for http://www.kottke.org/, if what you’re after is a multiple gradient-like border, that is not as simple. You either need to use multiple divs with background images (as he has done) or wrap the page/content in multiple divs giving those divs borders, or borders and padding with a background colour…

If you’re using the page framework you can get three colours by giving #page a border, then #container a background colour and padding and border (which is almost done entirely for you by choosing the shadow option in the Design Options under the Body options — you may need to add the padding and border to the top and bottom though).

53 Aaron June 7, 2010 at 13:30

This is really helpful. Thanks!

54 Sonia July 17, 2010 at 22:41

Hi kristarella, I’m glad to find your blog finally. I was Sydneysider too but now live in Melbourne. I just bought Thesis Theme few days ago and struggling with web-designing. I came across to your blog and you’ve provided an awesome tutorials. Thanks heaps for that! They’re really helpful for a newbie like me! :)

Btw, I really love your this custom-mini skin and downloaded it. But when I try to install in my wp-admin, it shows error. Does this skin compatible with Mac only? I’m using Windows Vista. Sorry for dumb Q! I tried 2 times but found no success!
What should I do? Your help will be appreciated! :)

55 kristarella July 18, 2010 at 12:33

Sonia — No, these files have nothing to do with Windows or Mac. If you see some weird mac files in the folder they can be deleted, they’re because of the way Macs create zip files, I’ll be fixing that next time I upload updates. The only files you need are custom_functions.php and custom.css.

What does the error say?

Also, this is an addon for the Thesis theme. It won’t do anything if you don’t have that installed. I’m not sure how you can install it in wp-admin; the only way to install Mini is via FTP into the Thesis custom folder.

56 Sonia July 18, 2010 at 14:05

Kristen, I have copy-pasted (saved the old backup files, of course! :) ) the custom.css and custom_functions.php files and now it works! It looks simple yet clutter-free and beautiful blog. :) I still need to do a lot to this skin as my blog is related food recipes. :)

And yeah, I meant to install the Mini via FTP only. :) Thank you for help dear!

57 Sonia July 18, 2010 at 14:15

One more Q: how I suppose to get a thumbnails images in my teaser posts? I just saw James website (1st commenter in this post here). How do I get that? Thanks in advanced!

58 kristarella July 18, 2010 at 15:23

Sonia — The thumbnails are automatically created when you have a Post image specified, or a post thumbnail image (these settings are on the post edit page below the content entry box).

59 Sarah July 19, 2010 at 14:20

Hi,
Love your site by the way….. and your skins. And your tutorials!!!
Quick question – do you know an easy way (apart from paying for a skin) to implement a magazine style home page?
Thanks so much

60 kristarella July 20, 2010 at 11:51

Sarah — Depends exactly what you mean by magazine theme, but the first step would be to have teasers on your home page and use the Thesis Post Image and thumbnail features. All of that is available in the options and on the post editing screens.

61 Sarah July 20, 2010 at 14:00

Thank you so much for the reply.
What I mean by magazine theme is that it groups recent posts within its own category.
Does that make sense?

62 kristarella July 22, 2010 at 15:42

Sarah — Unfortunately, in that case, the answer to “do you know of an easy way?” is no. However, it can be done, and if you’re willing to venture into a bit of code wrangling it mightn’t be too hard.

For starters you need a custom query to get the posts in categories you need. Then you need a loop to create the new teasers for each category. There’s a forum thread with code for custom teasers.

I have this code that displays one teaser for each category, but haven’t yet got the categories labelled on each teaser… it sort of depends exactly what you’re after and whether there should be more than one post per category and whether you want to show teasers or just titles etc.

function custom_teasers() {
	$teaser_count = 1;
	$offset = 0;
	$do_not_repeat = array();

	$cats = get_categories();
	foreach($cats as $cat) {

		$recent = new WP_Query('cat='.$cat->term_id.'&showposts=1&offset='.$offset);
		if (in_array($recent->post->ID,$do_not_repeat)) {
			unset($recent); $offset++;
			$recent = new WP_Query('cat='.$cat->term_id.'&showposts=1&offset='.$offset);
		}
		while($recent->have_posts()) : $recent->the_post();

		$post_ID = get_the_ID();

			if (($teaser_count % 2) == 1) {
				$top = ($post_count == 1) ? ' top' : '';
				$open_box = "\t\t\t<div class=\"teasers_box$top\">\n\n";
				$close_box = '';
				$right = false;
			}
			else {
				$open_box = '';
				$close_box = "\t\t\t</div>\n\n";
				$right = true;
			}

			if ($open_box != '') {
				echo $open_box;
				thesis_hook_before_teasers_box($post_count);
			}

			thesis_teaser('teaser', false, $right);

			if ($close_box != '') {
				echo $close_box;
				thesis_hook_after_teasers_box($post_count);
			}

			$teaser_count++;
			$offset = 0;
			$do_not_repeat[] = $post_ID;

		endwhile;
		wp_reset_query();
    }
}
add_action('thesis_hook_after_content','custom_teasers');
63 robert phillips August 1, 2010 at 02:06

Good morning, Kris!

I’m thinking of using this skin as a starting place for some serious tweaking.

What I want to know is this:
1. Given that the content area is essentially two columns subdivided into four
2. Would it break the skin’s infrastructure if I changed the widths of the two columns to, say 599 and 361 px. (left to right)?
3. By “break” I mean things that can’t be remedied by css-ing.

tnks!

%%robert
P.S. My life hasn’t ben the same since I discovered cmd-tab tnks to you and our email exchange of last December. Likewise for Coda!

64 kristarella August 2, 2010 at 15:00

Robert — You can use this skin with any content layout that Thesis is able to use; you can switch the column sizes and positions in the Thesis design options as much as you like.

65 robert phillips August 2, 2010 at 23:36

Thanks, Kris!

I had kinda doped out from looking at the two files that would be the case. But double-checking in this business is a very good idea.

%%robert

66 Wouter August 13, 2010 at 05:52

Hey Kristarella,

Your skin is just what i was looking for. Is it possible to lower the tagline at the top of the screen so that the background is visible? (When you click at the mini picture your see that the tagline is a few cm under the top of the page)

67 kristarella August 13, 2010 at 10:20

Wouter — I’m guessing you mean the top border. It’s not actually below the top in the screenshot, it’s just that the image popups have a white border ;-)
You can move it down by adding .custom {padding:2em 0;} to the CSS.

68 Wouter August 29, 2010 at 03:02

Im still loving your skin but i have a small problem atm. My footer just moved from the bottom to the right and i have no idea why it did that. I already uploaded a fresh copy of custom_functions.php so that didn’t work. Hope you can help

69 kristarella August 29, 2010 at 11:26

Wouter — The end of your custom.css file is missing, including the footer CSS.

Leave a Comment

Want to show PHP or XHTML code in your comment? Encode it first so that WordPress doesn't strip it away.

Read the comment policy.