I wanted to use Mansion for my Miami Beach Huts website. It was ideally suited, however all my images are portrait instead of landscape. Some tweaks were necessary which I thought I’d share with you for endless hours of fun.
I wrote this for Version 0.2 of this theme. A few things have changed since then, especially the documentation. Keep that in mind while I’ll talk you through some tips and tricks of MANSION.
Since we’re playing around with the thumbnail sizes and orientations, the first thing you want to do is install an invaluable plugin called AJAX Thumbnail Resize by Junkcoder. It does exactly what it says on the tin: resize your existing thumbnails. This way you don’t have to worry about posts from the past – they’ll still look great when you upgrade to a new theme like this.
Picture Sizes
For each picture you upload, WordPress automatically creates three different sizes on the fly: Thumbnail, Medium and Large. These are saved with your original image file.
Mansion uses the Thumbnails to generate all pictures on the home page and then links each picture to the post it’s embedded in. To make them look good, the default thumbnail size needs to be set to 200×150 pixels (under Settings – Media). Make sure the box “crop tuhmbnails to exact dimensions” is ticked.
So far so good. If you’re writing a new post and you’ll upload a few pictures with it, all thumbnails will resize correctly. If you’ve previously used a different thumbnail dimension you can use the aforementioned AJAX Thumbnail plugin to rebuild them all to fit Mansion.
The readme file also suggests sizes for medium and large images (495px and 960px) – we’ll see how that affects single posts and pages a bit later.
Orientation: using Portrait instead of Landscape
For my project, all my pictures are portrait instead of landscape – so instead of 200×150 thumbnails I’d like to use 150×200 ones. Changing the size alone and rebulding all thumbnails creates rather big black gaps in between them, so we need to tweak the style.css file a bit.
Find the following code and tweak the WIDTH value to your own needs. Say you have 150 pixel wide thumbnails, set it accordingly.
/* Logo description styles */
#header {background: #333; width: 200px; float: left; }
The Height of the Nav-Box
You may have noticed that when you use a different width for your thumbnails, this will have an effect on the Nav Box. Let’s make sure it’s exactly twice the height of your thumbnails and the front page should have a good grid layout again.
Let’s look at style.css one more time – find this near the previous piece of code:
#header .menu {min-height: 150px;}
#header .logo {height: 150px; position: relative}
These lines together effectively make up the size of the nav box. The bottom one sets a size for your “Logo” (in this case just the text), and the top line will dynamically expand depending on how many pages and categories you’re showing.
Play with these values depending on your thumbnail size. In my case, if you’re showing 8 items in the list, 99px for the “Logo” works fine.
You can also make this size static by replacing “min-height” with “height”, but you may find that if you add more items (categories or pages) some of them won’t be showing. You could then just make the box bigger in multiples of your thumbnail height.
The Width of the Search Box
The integrated search box is made for a 200 pixel wide nav box. Since we just made that a bit slimmer, part of it now gets cut off. Fear not, for help is at hand – take a look at this piece of code in style.css (under Navigation Styles):
#nav #s {background: #2c2c2c url(images/search.png) 1px 3px no-repeat; border: 1px solid #222; width: 157px; color: #666;font-size: 11px; padding: 4px 4px 4px 16px; font-family: "Lucida Grande",Arial;}
The width value is the culprit – set that to something like 110px for 150px wide thumbnails. Feel free to play around with it to find a size that suits you.
seems to work indeed, ill leave it like that for now and worry about the rest first. sorry this is my first time working with HTML or anything like that so im just teaching myself and prone to ask silly questions. But im currently stuck on two things, one is the “blog” category. in the sample page it looks all nice and sorted ( http://demo.graphpaperpress.com/mansion/category/blog/ ) but on the website im making it lacks all the graphicness. how do i get that to work? and also, i want it to only show a said number of pictures per page, and then you just click next page, instead of like it is at the moment where evrything gets postet at once, where can i edit that?
thanks a LOT for your help. your tutorial is very helpful actually, im not gonna change to landscape but still reading the code there etc made me understand how to do the searchbox thing and slowly get into this stuff. great work!
I’m glad it helps – and your site is coming together nicely. The “Blog Category” can be set under Appearance – Theme Options. If you don’t set the category there, it won’t be displayed properly. You can set any other category to be displayed like the Blog if you don’t fancy that word.
The number of pictures displayed per page can be set under Settings – Reading. By default this is set to 10 but you can choose any value here.
hey cheers agan jay
but sorry this time it doesnt work. i read your instructions to change the name of the blog category, will do that sometime not now.
if you look at my “blog” category, it is there. it displays the header the time the abstract etc. ALMOST like in the example. just not quite … the grey underlining, the nice editing is missing (on my pc at leas) click on the blog button youll see what i mean if you compare.
re the other thing, found that too. but it limits POSTS not pics. ie if i have 10 posts with one pic each it will show 10 pics on the first page. if i have 10 posts with 10 pics each itll show 100 if you catch my drift. seeing as things will be organised into diffrent sized posts, id like to limit the number of pictures not posts. any way of doing that at all?
cheers for the help!
That’s also under Appearance – Theme Options. There you can set if you’d like to display the first picture from a post or all pictures.
My instructions on the blog category are a bit outdated and were meant for aolder version of Mansion. The developer has since then added the option to select which category you’d like to use for Blog Display. Not sure why it doesn’t work in your case I’m afraid, I’ve just checked on my test site and it displays fine.
Thanks Jay, I hate to ask but if it is a quick answer…how do you change the menu size? If it isn’t a quick answer let me know and I’ll do the homework myself. Also, are you seeing the two blank spots to the right of the featured image? This just started happening a few days ago. I didn’t change anything…thoughts on the cause?