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:
/* Blog */
.box, .page-template-page-blog-php .box {background: #222;padding-bottom: 4px;}
.blog a, .page-template-page-blog-php .blog a {text-decoration: none; font-weight: normal;}
.box h2.posttitle, .page-template-page-blog-php .box h2.posttitle {padding:10px;font-size: 15px; font-weight: bold; padding-bottom: 0; margin-bottom: 0;}
.box p, .page-template-page-blog-php .box p {padding:5px 10px 10px;font-size: 12px; line-height: 16px;}
.col2 h2.posttitle, .page-template-page-blog-php .col2 h2.posttitle {font-family: Georgia, Times; font-size: 20px; font-style: italic; font-weight: normal;padding-top: 15px;}
.col2 p, .page-template-page-blog-php .col2 p {font-family: Georgia, Times; font-size: 16px; font-style: italic; line-height: 20px;padding-top: 10px;}
.datediv, .page-template-page-blog-php .datediv {font-family: arial;margin: 10px 10px 0; float: right; color: #666; border-bottom: 2px solid #333;}
span.day, .page-template-page-blog-php span.day {font-size: 30px; text-decoration: none;font-weight: bold;display: block; padding: 3px 0;}
span.monthyear, .page-template-page-blog-php span.monthyear {font-size: 10px; text-transform: uppercase;}
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 span.day {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
wp-content/themes/mansion/images/default-thumb.jpg
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 😉
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
Thanks.
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??
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!
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/