Single pane for posts on home page?
-
Is it possible to have the Home Page Panes as a single column?
You can get the homepage panes into a single row doing some custom css modifications. But if you want a single row… why not just use a normal blog?
It seems kind of pointless to me to have a single row of homepage panes. But maybe I don’t understand what you are trying to accomplish.
I know, I like the columns too but my client wants to have the excerpts in one column.
He doesn’t like the extra white space under an excerpt when the one in the next column is longer or has an image.
I tried disabling the homepage panes and using a few post to page plugins but they aren’t as elegant as the Graphene theme and in one particular case the pagination didn’t work if the plugin short code was on a page with other text.
I’ve tried looking at the CSS and noticed the Alpha and Omega but I wouldn’t know where to begin to write the custom CSS.
any guidance would be gratefully received.
Ian.
You are correct with the alpha and omega. The alpha displays panes on the left side and the omega displays panes on the right side. Basically, we want to change the omega to display on the left side, and then expand the entire width section for homepage panes.
Give this a try in your custom css:
.homepage_panes .omega {
clear: both;
float: left;
margin-left: 0;
}
.container_16 .grid_4 {
width: 480px;
}It didn’t work for some reason when I put it in my child theme CSS but I made the changes direct in the parent theme and it works great.
Thank you so much.
You’re welcome.
Changing parent theme files is strongly frowned upon. This is because any modifications you make there will be removed whenever you update the theme.
This is why we stress the importance of using a child theme.
Perhaps we need to add the !important declaration to the css above. Try this (if you like):
.homepage_panes .omega {
clear: both !important;
float: left !important;
margin-left: 0 !important;
}
.container_16 .grid_4 {
width: 480px !important;
}Mod
If you have added some of this code to Graphene’s custom CSS feature as a test (I do it all the time), be sure to remove it if you add something different to your child theme. This may explain why child theme changes don’t appear, because custom CSS gets loaded after the child theme.
I just added the code “as is” to my child CSS, I didn’t use the custom feature, but when I viewed the site in FireFox the debugger didn’t show the changes to the omega pane.
What is the significance of the !important declaration?
Thank again
See custom CSS of my site. I’m also using full width panes. I’m on mobile now. So I cannot give you the exact code. Take a look at my child theme style sheet or I’ll give you the custom CSS code when I’m back on desk tomorrow.
This custom CSS is working in my site,
.two-columns .homepage_pane {
width: 97.5% !important;
}
- You must be logged in to reply to this topic.
