Mini
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.
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
- Body (and content area)
- To set the font and colours in custom.css remove the
↓


{ 69 comments… read them below or add one }
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.
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!
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.
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);}Very nice, thank you!
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.
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.
Thanks, that’s so awesome of you.
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.
Robin — You’re using an old version of Thesis. You need version 1.6 or above, or you can try renaming all the
ul.menuelements toul#tabsin custom.css.Thanks for help
i will update my thesis theme
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/)
great skins, thanks. i especially like the bars at the top and bottom of mini. nice touch.
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?
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.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.
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
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.
Your suggestion was right on. It was one of those obvious thing you don’t think of.
Thanks,
Owen
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!
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.
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?
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.
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.
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.
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!
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.menuto 50% on line 23 of custom.css.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!
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?
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!”
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>
Embarrassed: had put it in the custom CSS rather than function! Problem solved! Thanks. Please delete spurious posts!
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?
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
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 andendif;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.
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?
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.
Kristarella,
Thanks for this skin. I Can talk more, because my english to bad. I’m from Indonesia.
Terima kasih.
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!! :)
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.
THANK YOU!!
OK, I’ll try it…but not now…
It’s almost midnight in theCanary Islands!! :)
Ed.
Sleepy…..but problem fixed!! :)
Gracias!!
Ed.
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
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.
Kristarella,
Thank you for taking the time to answer my question.
You are an incredible artist & a great person.
All the best,
Babusel
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.
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?
Hey Krissy,
I do not have any other custom sidebars registered. Please check http://www.hollybollysongs.com to confirm.
Max — Try clearing your cache.
Thanks for sharing kris
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?
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
#pagea border, then#containera 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).This is really helpful. Thanks!
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! :)
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.
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!
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!
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).
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
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.
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?
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');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!
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.
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
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)
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.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
Wouter — The end of your custom.css file is missing, including the footer CSS.