Ian Walters

#4728

Is it possible to have the Home Page Panes as a single column?

Josh

#28941

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.

Ian Walters

#28942

I know, I like the columns too but my client wants to have the excerpts in one column.

Blink Colony provides a unique blend of branding, marketing, advertising and related business services to a wide range of local, regional and national clients.

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.

Josh

#28943

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;

}

Ian Walters

#28944

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.

Josh

#28945

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]

Kenneth John Odle

#28946

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.

Ian Walters

#28947

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

Prasanna SP

#28948

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.

Prasanna SP

#28949

This custom CSS is working in my site,

.two-columns .homepage_pane {

width: 97.5% !important;

}