How to modify MANSION by GraphPaper Press

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.

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

215 thoughts on “How to modify MANSION by GraphPaper Press

  1. Does anyone know how to change the header/logo box width without completely screwing up the thumbnail grid as well? Having a really tough time finding the variables to adjust the grid in relation to a modified header width (ideally I’d like the header twice as wide as the standard thumbs).

  2. What if I just want to make the pictures on the home page larger in the Mansion theme? For instance, to display only 3 across and 2 down (6 total). Right now the client feels that it’s too busy considering that it’s currently showing 24 photos. I know to remove the “featured images” to cut down on the amount of photos, but then how do I then increase the photo size so that those 6 photos take up more room. I’m thinking that it may even be a lot easier just to strip the code for that page and just use a standard table. I’d lose the mouseover effect, but it’s be easier to accomplish possibly.

  3. I’d like to install a rating post plugin on my Mansion theme based blog. I already tried to install some but none of them work, so I deactivated them. Can anyone suggest a rating post plugin that works on Mansion, please?

    1. Head over to Settings – Reading and set the amount of displayed posts to 30 or more. This will display more thumbnails on your front page. Note that there is a natural limit in the amount of posts WordPress is willing to display – so if you set this value to 100 you’ll see a maximum of something like 30.

      1. Thanks!

        I’m also trying to use the ‘featured’ tag. I’ve managed to adjust the size of thumbnails on some pages but not the main page. What do I have to do to get the ‘featured’ tag to work on the main page?

        1. Hi Joshua,

          the featured tag works out of the box, as long as a post is tagged with “featured”. This does however mean that only your latest “featured” post will show up with a large image. If you wrote another post which is not featured, then the featured post will be moved one slot down and display with a standard thumbnail on the home page.

          If you’d like to avoid this, then you can also make your featured post “sticky”, which means it will always be shown in the first position.

          Hope it helps – and I hope this makes sense 😉

  4. Hey Jay,
    I wanted to ask if there is a way in whicha post that i wrote will not appear on the home page? I want to associate it to other page…

    1. Hi Etti,

      There are a couple of plugins which can exclude posts from the front page. One is called “Simply Exclude” and another is called “Advanced Category Excluder”. You can get them on the WordPress Plugins Repository.

  5. Hi there,

    I have just started using the mansion theme and for some unknown reason I can’t get the grid to show the featured image for that post – it just shows the default template image?

    Hope you can help, thanks

    1. I am having the same problem! I can’t get it to show my thumbnails, it only shows a template over and over. Any help from anyone??

  6. Basically, I started my site today and I am totally lost. First, every time I upload a pic, it just shows up on the main page as their default image (with the building and the fog). How do I get my thumbnails to show up there? Second, how can I edit the box with my site title so the box is bigger and the words aren’t put onto the next line? And finally, how do I edit it so there isn’t a huge gap between pics? I want little to no gap. I’ve read all the other responses to this question, but none have worked for me. Thanks!

    1. Hi Colton, Mansion isn’t the easiest theme to get going I must admit. Did you read the instructions, and did you set up the image sizes in the Media settings correctly? It’s explained here: http://graphpaperpress.com/support/instructions/?theme=mansion

      To make images show up on the front page instead of the default image you have to set a “featured image” per post. Without it, only the default image shows up. If you set the images sizes for thumbnail correctly (under Settings – Media) then all your front page images will be the same size, and hence there won’t be any gaps between images. This works for new posts, but if you already have uploaded pictures you’d like to use without having to upload them again then you need to use the AJAX Thumbnail Rebuild plugin I mentioned. This will re-create all thumbnail images and resize them correctly. Sadly there is no way to change the text box and make it larger without destroying the rest of the layout.

      And finally, the developers have a support section on their site here: http://graphpaperpress.com/support/

Add your voice!