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.
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
{ 2 trackbacks }
{ 25 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, 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);}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.