Hero theme – display blogs in 2 columns
-
Hi, I have 3 levels in one nav menu: Destinations>South America>Argentina then all blogs display in one continuous page.
I’d like my blogs to display on one page but in 2 columns with the
thumbnail (feature image), blog title, a thread of blog text. Think this would be easier than to vertical scroll endlessly. I’m told this is possible for this theme and needs to be edited through the CSS. Any help would be great. Many thanks
Site: http://nillasite.wordpress.com/
(Have not been building this long so haven’t a Domain yet.)The blog I need help with is: (visible only to logged in users)
-
This can be done with the following CSS, but know that older browsers, and in particular, IE9 and older do not support this, so they will display only one column.
@media screen and (min-width: 621px) { .blog #content, .archive #content { column-count: 2; column-gap: 40px; -moz-column-count: 2; -moz-column-gap: 40px; -webkit-column-count: 2; -webkit-column-gap: 40px; } }I’ve also limited this to screens/windows 621px and wider since that is when Hero changes to the touch screen device layout. Also, at widths narrower than that, the post content becomes very narrow and harder to read.
-
Hi,
Thanks the sacred path for the super fast reply! I’ve plugged the CSS in and although it works, it’s not exactly what I meant and don’t think I explained myself properly.
This page is an example of what I’m after:
http://www.bemytravelmuse.com/category/destinations/asia/china/i.e. At the Argentina page, all blogs split in 2 columns, with the blog’s feature image, title, a text feed – then you click on one of the images to display that blog. I’m thinking from a usability aspect, this is 4 clicks to get to the info (max of 3 is ideal).
Maybe I need to change themes? I’m reluctant to do this as this is my 2nd one already and all my CSS code may not work in a new theme. WP did send me a link to the Museum theme but I’m still not sure this works how I want it to.
-
We can’t change the content into a summary using CSS, but what you can do is to edit your posts and add the Read More tag to them to split the content and have an excerpt on the categories pages and blog pages.
Hero does not display a featured image with posts on blog and category/archive pages, and that is not something that can be done with CSS alone. It would require editing the theme PHP script files, and we cannot do that here at WordPress.com.
You may want to consider the Visual theme, which does display the posts on categories pages in columns (3 instead of 2). See here for a category page on the Visual Demo site. Visual displays the featured images on categories pages, and you can use the Read More tag I mentioned above to limit the content on the categories pages. Visual does not display the sidebar on all pages, only static pages (such as about) and on single post pages.
Another one you might consider would be The Columnist which has featured images and excerpts on the categories pages: http://thecolumnistdemo.wordpress.com/category/featured/ .
You may want to try setting a Read More tag on several of your latest posts to see what Hero looks like with those. One other suggestion would be to add the featured image right at the very top of the content on your posts so that it appears right below the post title and meta data in the categories pages.
Let me know what you think.
-
I’ve added the Read More tag to my Hero theme and although it displays better, I do like the look of the Visual theme’s post page better (shame I can’t combine the 2 themes). However, before I change to my 3rd theme since starting a couple of weeks ago, can you please answer the following about Visual?
*Can I still have a home page with my main image as in my Hero theme? Also, my current nav menu?
*Can I change the post page content from existing white text on grey background to black text on a white background but still leave the rest of the site at the default grey colour?
*Is it possible to display social media buttons next to the “Category Archives:Books” title?
BTW Happy New Year! -
Just noticed in the Hero theme, if I click Settings>Reading and check *Show related content after posts
* Show a “Related” header to more clearly separate the related section from posts
*Use a large and visually striking layoutthen this layout is exactly what I was after for my actual posts.
I don’t understand why Hero has this option for ‘Related Posts’ within a Post page but not for the actual post page itself, seems strange bizarre. -
I don’t understand why Hero has this option for ‘Related Posts’ within a Post page but not for the actual post page itself, seems strange bizarre.
I don’t know of a theme that shows related posts on the blog posts page. The reasoning, in general I think, is to keep that page cleaner and with less clutter to allow your content to shine (less distractions).
However, before I change to my 3rd theme since starting a couple of weeks ago, can you please answer the following about Visual?
Sometimes it takes a few tries to find one that fulfills your needs.
*Can I still have a home page with my main image as in my Hero theme? Also, my current nav menu?
Take a look at my test site where I have activated Visual, and hidden the site title and tagline and inserted a header image. Visual accepts any size header image (flexible header feature) so your existing header image should work just fine (recommended minimum size: 1020px x 250px). We can easily float the menu to the left also.
*Can I change the post page content from existing white text on grey background to black text on a white background but still leave the rest of the site at the default grey colour?
Absolutely. We can use the CSS body classes to target individual pages for customization.
*Is it possible to display social media buttons next to the “Category Archives:Books” title?
That is harder to do, but we can put social icons in the menu quite easily, and if you wish, we can even limit those to showing on category and single post pages, if that is what you want. Also, social icons can be put into a text widget in the sidebar, and the Widget Visibility feature can be used to limit where that widget would appear.
-
Thank you for all the info. However, I can’t get into your test site i.e. when I click your above link it takes me to the CSS forum – Need Help? Support…
-
Wow, how did I mess up that link? Try this one to my test site: http://flippintestblog.com/ .
-
Thanks, that one works and gives me a better idea of the theme. I will be replacing the Hero theme with the Visual theme so, hope this will be the last one! Thanks again.
-
Forgot to ask, can I get the CSS code that you played around with in your test link? Thanks!
-
I’ve changed to the Visual theme and have the following problems so far:
*changed content font colour in CSS to black but can’t change the background colour to white
*moved my About menu to before Say Hi menu! but this doesn’t update on my site (i.e. still Home, About, Destinations, Say hi!)
*I’ve lost my sub-menus (levels 2 and 3) in my Destinations menu although the structure is still in my menu Dashboard.
Hope you can help! -
For visual, the only thing I did was go to Appearance > Customize > Site Title and hide the text. No CSS involved.
*changed content font colour in CSS to black but can’t change the background colour to white
Let’s start with this on the color change and then go from there.
body, .hentry { background: none repeat scroll 0 0 #fff; color: #000; } .masonry .entry-title a, .entry-meta a, footer.entry-meta a, [class*="navigation"] .nav-previous a, [class*="navigation"] .nav-next a, div.jp-relatedposts p { color: #000; } .masontry footer.entry-meta a { text-shadow: none; }*moved my About menu to before Say Hi menu! but this doesn’t update on my site (i.e. still Home, About, Destinations, Say hi!)
You can rearrange the items in your custom menu into any order you want them at Appearance > Menu.
*I’ve lost my sub-menus (levels 2 and 3) in my Destinations menu although the structure is still in my menu Dashboard.
I see you have them back now.
-
*Thanks again! I’ve changed the colour with your code but think the default theme colours look better (I’ll think about that one for a couple of days).
*Do you know whether I can reduce the space before and after the nav menu? It’s takes up a lot of space.
*You mentioned above: “That is harder to do, but we can put social icons in the menu quite easily”. What did you mean in the menu, left-side of nav menu on same line or something else? -
-
-
On the menu, it looks like you have changed the padding for .navigation-main a. Are you still wanting to tighten things up or are you happy with that part now?
On the social icons, they would be part of the menu. You would add Custom Links for each social service you wanted to add and arrange those where you wanted them in your menu. Then we can use CSS to add icons (in the form of images) to the backgrounds of those menu items using the specific menu item IDs and make the text (labels) invisible.
-
-
-
- The topic ‘Hero theme – display blogs in 2 columns’ is closed to new replies.
WordPress.com Forums 