Mini

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

{ 2 trackbacks }

New Thesis Skins from Kristarella: 6 December 2009 at 13:23
.:: Take4u Site ::. » Blog Archive » 2 Free Thesis Skins by Kristarella: 7 December 2009 at 16:06

{ 38 comments… read them below or add one }

1 James 18 November 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 19 November 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 19 November 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 20 November 2009 at 08:31

Sure, if you downloaded a greyscale rss icon, 16×16px, 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 24 November 2009 at 07:27

Very nice, thank you!

6 Ben 30 November 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 30 November 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 1 December 2009 at 08:25

Thanks, that’s so awesome of you.

9 Robin 4 December 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 4 December 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 4 December 2009 at 21:37

Thanks for help
i will update my thesis theme

12 nwng 18 December 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 19 December 2009 at 06:51

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

14 Adam 22 December 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 28 December 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 5 January 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 19 January 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 19 January 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 19 January 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 21 January 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 21 January 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 21 January 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 21 January 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 22 January 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 22 January 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 12 February 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 12 February 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 12 February 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 14 February 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 14 February 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 14 February 2010 at 10:14

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

"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!"

32 Lawrence 14 February 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 21 February 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 21 February 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 21 February 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 22 February 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 22 February 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 25 February 2010 at 12:52

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

Mini

Features

Installation instructions

Catch me on Twitter

Recent Snippets

Recent Bookmarks

Donate