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.

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

215 thoughts on “How to modify MANSION by GraphPaper Press

  1. Excellent advice. Good to highlight how adaptable Mansion is. Wish I’d found this page a year ago – would have saved me lots of time.

    Last year I used Mansion to make a website for a friend. Turned the post pages into long horizontally scrolling ‘gallery’ pages in order to make it less a blog and more a portfolio website. Just thought you might be interested.

    http://www.rebeccathornephotography.co.uk

    1. Hi !

      On the one hand, I would like to say thanks to Mr. Jay for sharing tips with us !

      On the second hand, I would like to ask to Mr. Cy if it was complicated to modify css or anything else in order to make Mansion theme as a portfolio (horintally scrolling) ?

      And finally, I would like to know if it’s possible to have two kinds of scroll, because I would like to keep vertical scroll for blogging, and have horital scroll if I do a portfolio one day (maybe in page, not post) ?

      Thanks !

        1. Hi Franck C,

          my solution to force horizontal scrolling is not very elegant because I ended up using a fixed width for, in my case, the ‘single posts’ pages. (This is not the solution I wanted because it puts a limit on the number of photos you can put on one post page; alternatively, if you only put a few photos up, it leaves blank unused space to the right. I’m just an untrained, amateur web designer and it was the best I could come up with.)

          It’s not very complicated though, and I kept vertical scrolling for ‘page’, so you could do it the other way round if you like. In Mansion both ‘page.php’ and ‘single.php’ (single post) start with the ‘#content’ div. Change the name of one of them in the php file (I just used ‘#content1″) and then, in the stylesheet, give the new div a much wider fixed width. (After that go through all the other lines of css that style ‘#content’ and reproduce the same css but this time for ‘#content1’.)

          I also had to increase the width in the css for ‘.single #container’ – but if you were re-styling ‘page.php’ rather than ‘single.php’ I think you would change ‘.page #container’.

          I say it’s not very complicated but when I try to explain it sounds complicated.

          (Explaining stuff is not easy is it Jay?)

          Actually it suddenly occurs to me that you might not need to change the .php files at all. Possibly just have these lines of css (if you want to change the page to horizontal scrolling):

          .page #content {width: 5750px;}
          .page #container {width: 6000px;}

          …but I might be wrong. WordPress is a bit of an adventure isn’t it?

          I’m sure there are much better solutions for horizontal scrolling. Suggestions would be welcome.

        2. That’s a very clever and very simple trick to do it, thanks for sharing Cy! I think amending the CSS is probably the easiest way to do.

          You’re right… Explaining stuff isn’t easy 😉

    2. Hi cy, I visited your site and its very impressive. I wanted to ask how u fixed the pages so it dont move when scrolling?

      1. Hi Etti,

        sorry to take so long to reply, I hadn’t checked my email for ages.

        If you are asking how do I make the post-pages scroll horizontally and the page-pages scroll vertically, I mention above that you can define the post widths by defining, for the posts,

        .single #container, .single #content
        (and .single #footer – I removed the footer from my post pages so I forgot about that)

        and for the pages

        .page #container, .page #content, .page #footer

        I also discovered something new that I hadn’t figured out in the above comment: you can set widths for individual pages and posts by using the .page-id or .post-id body classes that WordPress sets up for each page and post. Each one is assigned a specific number automatically and you find the number by looking at the line of html in the source code that starts the ‘body’ section.

        E.g. for my ‘About’ page, that particular line of html reads,

        body class=”page page-id-263 page-template-default”

        so I can define the width of that specific page by defining .page-id-263 in the css.

        Similarly with the post body classes; e.g. for my ‘Ireland’ post,

        body class=”single single-post postid-1561 single-format-standard”

        I’ve changed the width of that particular post, and only that post, using,

        /*Ireland*/
        .postid-1561 #container {width: 4280px !important; overflow: hidden;}
        .postid-1561 #content {width: 4030px !important; padding: 40px opx 5px 20px; overflow:hidden; float:left;}

        I was pleased with this discovery because it meant that it solved my problem regarding unused black space when there were not many photos on a post, and also meant that an individual post could be defined to be much wider and so accommodate many more photos if necessary.

        However my friend who runs the website has recently told me she wants to start using a different theme – so I’ve stopped worrying over it. (There’s no pleasing some people! Only joking – it will just be a new journey for me.)

        1. Thanks for the response, but my understanding of the language of CSS quite low. I tried to understand your explanations but without success. I’ll keep trying to work according to your explanations with hope to succeed. In any case, I have another question, do not know if that’s possible at all, but I want to move the nevigation bar to the right. Is that possible?

    1. Hi Tim, you mean you want to remove the 1 pixel wide black line between images on the front page? You can do this by finding this line in style.css:

      .box { padding: 0px; margin: 0 0 1px 1px;float: left; }

      Replace it with this:

      .box { padding: 0px; margin: 0 0 0px 0px;float: left; }

    1. Oh I see, that is a different issue altogether.

      I’m not sure what to make of it. At first I thought that perhaps your images sizes are set too small under Settings –> Media. But looking closer I’m not sure if that’s the case. The Mansion Documentation suggests

      • 200×150 for thumbnails
      • 495×0 for medium images
      • and 950×0 for large images

      These settings only take effect for new images though. If you previously had a different theme installed and uploaded images prior to setting those sizes then your images are not formatted properly for use in Mansion. To combat this there’s a marvellous plugin called Regenerate Thumbnails: http://wordpress.org/extend/plugins/regenerate-thumbnails/

      Once you run that it will go through all your images and size them up correctly. Give it a try and see if that works.

    2. On second thought… I’ve noticed that your category links seem to work OK: http://sarah-mundzek.de/category/natur/ produces images I’d expect. Did you make any adjustments to the theme? If not I’d try downloading a new version of Mansion from GraphPaperPress. Rename your old version to something else and activate the fresh version – see if that brings joy to your homepage.

    1. Sadly not, the only way to exclude certain posts from specific categories is to use a plugin like . You can set which category you want to exclude from being displayed from the front page.

  2. Hi cy, I visited your site and its very impressive. I wanted to ask how fixed the pages so it dont move when scrolling, and another question, what plugin you used to view the gallery?

  3. Hi,
    my blog has only ten post on home page. How could I have more?
    I have to use image with exactly same dimension?
    Now, my image has same width (500 px), but not same height?

    Davide, Italy

    1. Hi Davide, you can change the amount of posts shown on the front page in WordPress under Settings ==> Reading (blog pages show xx posts). The default is 10.

      Not sure what your other question was about.

Add your voice!