How to modify MANSION by GraphPaper Press

The BLOG Category

If you’ve read the documentation, you’ll know this already: if you have a “Blog” Category, all posts in that category will be displayed in a really funky way like in the Mansion Demo. For this to work your category slug needs to be “blog” – its title can be anything you like (say “Chicken Wings” for arguments sake).

You’ll notice that each post is displayed with a title, a date and an excerpt of your post. You may not know this but you can set this excerpt yourself for each post (check underneath your WordPress Post window – there’s a section called Excerpt). If you leave this blank, Mansion will “fake” this value and will output the first 30 words of your post.

Maybe you’ll notice some black gaps between the columns. You can make your posts as wide or as narrow as you like – courtesy of a couple of values in your style.css file:

#nav .current-cat a, #nav .current_page_item a {color: #888;}
.box { padding: 0px; margin: 0 0 1px 1px;float: left }
.col1 {width:200px}
.col2 {width:401px}

See those two width values? They’re responsible for positioning each column. The first for ordinairy posts, the second is for “featured” posts. Play with those values and see what works best for you. Note that the second value should be twice as wide as the first value plus 1 pixel.

I recommend using values in multiples of your thumbnail width for best results.

Using BLOG style for your front page

Ivan was asking if it’s possible to display the front page content like the blog category by default. What a cool idea indeed – this is possible by tweaking a couple of things.

First, copy the entire contents of category-blog.php into the index.php file.

Next have a look at the style.css file and find the block that begins with /* Blog */. Notice that every style tag begins with .category-blog? That’s what makes this styling load only when we’re displaying out blog category. We want this to be executed by default so we need to get rid of .category-blog on every line like so:

Styling sorted. Now we have our frontpage looking exactly like the “blog” page with all posts being formatted “the way of the blog”.

Bigger BLOG Headlines

Fancy some slightly bigger headlines in the blog display? Have a look at style.css again under this section:

/* Blog */
.category-blog .box {background: #222;padding-bottom: 4px}
.category-blog .blog a {text-decoration: none; font-weight: normal}
.category-blog .box h2.posttitle {padding:10px;font-size: 20px; font-weight: bold; padding-bottom: 0; margin-bottom: 0}
.category-blog .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px}
.category-blog .col2 h2.posttitle {font-family: Georgia, Times; font-size: 15px; font-style: italic; font-weight: normal;padding-top: 15px}
.category-blog .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px}
.category-blog .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}
.category-blog {font-size: 30px; text-decoration: none;font-weight: bold;display: block}
.category-blog span.monthyear {font-size: 10px; text-transform: uppercase}

You can pretty much style every element of those post excerpts and headlines here. The one for the headline is the “.category-blog .box h2.posttitle” tag (make it 20 instead of 15px for example).

How to change the default image

Notice the dark grey image of a structure that gets displayed when you haven’t got an image in one of your posts?

As nice as it is, it may not be what you’re looking for. Fret not, you can easily replace that. There’s a small JPG image located in
Change that to your heart’s desire. Keep in mind that for best results this should have the same dimensions as all your other thumbnails (naturally).

As always, enjoy ๐Ÿ˜‰

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. 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:

      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:

Add your voice!