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 
{ 160 comments… read them below or add one }
← Previous Comments
Hi, After searching online I found a similar Theme, I do not know if that’s the point to ask but I could not figure out how to work it, and did not find any explanation for this on network. Perhaps you could help with instruction or a link that explains how to run it? Your guide is very clear and focused, so I turn to you. The theme that I found is called Monokrome.
It’s very off-topic – let’s discuss it in my brand new forum over here: http://wpguru.co.uk/forum. I’m testing it out right now, let’s see if it works
Hi Jay!
I Would Like to say thank you very much!
And I asked about deleting the sidebar at the right side sometime ago! And I would let you know that I figured out by myself (more or less).
Now i’ve got an “dynamic” few for the posts.
Naah just take a look that you know what I ment!
Hi Lexadus,
I completely forgot to get back to you – thanks for remembering. And well done for getting rid of the sidebar – your pictures are amazing! The thumbnail gallery works really well on those posts.
Keep’em coming and happy shooting
great documentation! helped me alot so far.
however, i was wondering if it is possible to embed the facebook like box into the nav bar?
i already tried copying the embed code into the nav.php at different positions (i have no clue about html) but without any result…
i also noticed that after activating Mansion on our test-blog, that not all posts get shown on the mainpage. all of those have featured images tho. i don’t really know why some might get exluded?
nevermind my previous questions, i found the solution right after posting this comment. as usual.
i put the embed code into the header.php and it works.
and about the posts not showing up, re-uploading the image and setting it as featured solved this problem.
Excellent Alex, glad to hear it’s all sorted now
trying to figure out why the nav box wont take the padding, text size or show my categories if anyone can help. I am not the greatest when it comes to this but love learning
Thanks! Love the amout of info in this article!
hi again,
so, as of yesterday the like button on the front page within the grey box on the left doesn’t show up anymore. it does however show up within a post/article.
i didn’t change anything so i wonder why that is?
however i thought about implementing the like box instead of the like button for the page, but for this i need to change the behavior of the grey box. (what’s it called by the way)
as you might know, the height of the grey box gets halfed whenever someone reads a post. how can i make it stay the same size?
Hi Alex,
I just had a look at your site, and the Facebook Button works fine for me – here’s a screenshot: http://db.tt/xVvoJwLJ
Perhaps it’s your browser cache, clear it or types wit a different browser.
To be honest tweaking that menu box to stay a certain size is a bit of a nightmare – I never managed to do that. Besides the Facebook Box (as displayed in the sidebar on this side) is going to look messy in that place in your front page IMO. What about adding that box to your sidebars? That way it would show up when people click on a single post? I’m using a plugin called Facebook Fanbox for this.
i think the problem with the like button was that i used the html5 version for this. after changing to the iframe code it works as before again.
the sidebar is a good idea, i will look into that and see if it looks good with our design.
thanks for the help and have a nice day
alex
yea…me again, with yet another problem, yay…
so THIS time none of the articles i publish make it to the mainpage. first i thought it’s related to the wordpress-software. but then i tried different themes and the posts all show up there.
)
if you look at the homepage, you will see that the first post there uses the small thumbnail, but its actually still tagged with feature. but because the newest post has the feature tag, it gets small again. so the post somehow does get recognized, but it just won’t show itself!
this problem occured all of a sudden, i didn’t do any changes to the .php files (except for the fb like box ofc
on this thread ( http://wordpress.org/support/topic/new-post-not-showing-up-on-homepage?replies=4 ) someone suggests taking a look at the “query_posts” command. i did that, but i couldn’t find anything unusual like excluded categories. (i also did tests with several cat. and none of them worked)
just in case thats the part from my index.php that should be responsible for the frontpage-post-showing-behaviour:
query_posts(“cat=&paged=$paged”);
$count = 0; if (have_posts()) : ?>
array( ‘featured’ ), ‘default_size’ => ‘featured’, ‘width’ => ’401′, ‘height’ => ’301′, ‘image_class’ => ‘featured’ ) );
else :
get_the_image( array( ‘custom_key’ => array( ‘thumbnail’ ), ‘width’ => ’200′, ‘height’ => ”, ‘image_class’ => ‘thumbnail’ ) );
endif; ?>
i hope you have at least a clue what might cause this problem and can help me (again).
best regards
alex
just some additions:
the post(s) are not private, i cleared the cache several times and problem occured last week for the first time when i wanted to publish something.
i then published two other articles since then, they showed up without problems.
today i wanted to publish the article from last week, didnt work.
and now i can’t seem to publish any article.
Hi Alex,
If this problem started without any changes to the blog (i.e. new plugins or upgrades) then my first thought is the cache. Try disabling cache altogether and see if that works.
Also, just checking you’re not using any category excluder plugins right? They can cause some trouble at times.
I’m looking at your site – when was you latest post, and what’s it called?
i think i never had the cache activated in the first place. switching it on/off and clearing it doesn’t change anything.
also i’m not using any category plugins. i tried disabling all plugins but it didn’t change anything.
the latest post is called testpost2 here’s the link http://2groove-concept.net/blog/2012/04/testpost2/
i noticed that the frontpage is now called “Home page / Archives” at the Site Stats tab from jetpack. it was always only called “Home page” i wonder where the Archives comes from? might that be related to it?
well, i figured it out i guess.
the problem is that you have to upload a new image for the new article. choosing an already uploaded images results in not recognizing it and therefore it won’t appear, since mansion needs a thumbnail/featured image to show the post.
i always used already uploaded images for my testposts, hence the problems….
weird, but ok. glad it works again.
however, one last question: i uploaded a fresh install of the theme, so the changes i made are gone of course.
the only thing that still needs to be changed and i cant figure out is the underlining of the text in the nav box.
i want to use the code “text-decoration: none;” but i dont know where to put it.
it belongs in the style.css right?
/* Navigation styles */
#nav {padding: 10px; font-size: 13px; position: relative; padding-bottom: 40px;}
#nav li a {color: #ddd;}
#nav li a:hover {color: #fff;}
#nav .pagenav, #nav .categories, #nav .subscribe {padding-top: 10px; }
#nav span.navtitle {text-transform: uppercase; color: #999;}
#nav li ul, div.search {margin-left: 10px;}
#nav li.search, div.search {position: absolute; bottom:10px;}
#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;}
#s:hover {color:#ccc;background-color: #444;}
where?
thanks for your great help so far! i hope it’s the last time tho…my nerves…
That’s odd – I could have sworn earlier versions Mansion had a fallback image that gets shown in case there’s no image in the post. But you’re right, version 1.2.3 excludes posts from the front page if they don’t have an image. Ah well, guess now we know.
You’re right about how to remove the underlining from the menu – put this at the end of your style.css file:
.menu a {text-decoration: none;}Properties at the end of the style sheet will re-define and overwrite existing ones. Hope everything is back to normal at 2 Groove Concept
yep, everything back to normal, thanks again!
i was playing around with sidebarwidgets and was wondering if its possible to change the width of the sizebar. its currently at 200px, i tried changing that value in the stylesheet.css but the results were rather weird i.e. the widget appearing at the bottom of the post etc…
i guess i missed something?
but its not that important, so if you don’t really know how to do it dont bother wasting your time on this.
So how many images can you have ‘featured’ at any given time? Obviously only one image is ‘leading’ on the frontpage but there are other leaders within the other categories that you’d like to make bigger too, no?
Only one post will show up as featured with the large image. You can declare several posts as featured of course, but only the latest one will show up as enlarged. This can be overridden with a sticky post which will show before all other posts.
← Previous Comments
{ 1 trackback }