Altitude-Theme widget areas

[mika]

I use "Featured Pages Widget" on front page of the Altitude theme and want to show 5 Items from one category.

Unfortunately those 5 Items were showed in a vertical orientation what means all 5 items are displayed under each other with enormous vertical spacing between them. Result is an abnormal height of the whole widget area and a nasty and destroyed look of the whole site.

How can I change the orientation of the displayed items within featured pages widget to be displayed next to each other?

And In footer I´d like to have also 3 areas next to each other but all widgets i´m placing in footer area are displayed one below the other with enormous vertical spacing.

So I´m looking also for a solution for this.

[Tom]

Hi Mika,

Altitude Pro theme has unique home page styling that makes it easy to add multiples of widgets to a widget area. This makes Altitude very flexible for adding content.
See: http://my.studiopress.com/setup/altitude-pro-theme/front-page-setup/front-page-layout-configurations/

For example, with 5 Featured Pages placed in the "Front Page 2" Widget area, you will automatically get 1 page full-width with the 4 remaining equal across the page underneath the 1st. You should not have to change any orientation or styling. Perhaps you can provide more details (i.e. exact widget areas, exact widget used, etc.) A link to your site would also be helpful.

Altitude does not include multiple footer widget areas, rather it has one single widget area, full-width. If might be possible to style multiple widgets in the one widget area, but it will depend on your widgets and style requirements. You could modify the footer to include more widget areas using this tutorial: http://my.studiopress.com/tutorials/add-footer-widgets/

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jstuartj]

I needed something similar. I didn't care for the 6 widget layout and wanted it to be ( 1 over 5). The widget layout is driven mostly though by CSS and the altitude_widget_ares_css() function in the function.php.

What I did was add a filter to the output of the function, so I could override the CSS manually as I'm using the theme on several sites that need custom layouts.

function altitude_widget_area_class( $id) {
	$count = altitude_count_widgets( $id );
	$class = '';

	if( $count == 1 ) {
		$class .= ' widget-full';
	} elseif( $count % 3 == 1 ) {
		$class .= ' widget-thirds';
	} elseif( $count % 4 == 1 ) {
		$class .= ' widget-fourths';
	} elseif( $count % 2 == 0 ) {
		$class .= ' widget-halves uneven';
	} else {
		$class .= ' widget-halves';
	}

       //* Allows Overriding widget area class.
       $class = apply_filters('widget_area_class', $class, $id, $count);

	return $class;

}

Then I added a filter to the front-page.php

//* Custom front page widget layout handling for 6 widgets.

add_filter ('widget_area_class', 'jsj_five_widget_area',5,3);   
function jsj_five_widget_area($class, $id, $count) {

            //* limit to a specific front page section and only if there are 6 widgets.
            if (($id === "front-page-2") && ($count == 6)) {

             //* Don't forget to add a space to separate the existing classes.
             $class = " widget-fifths";
            }

            return $class;
}

Then I added some CSS to my styles.css to handle the widget-fifths.

.flexible-widgets.widget-fifths .widget {
	width: 17.333333%;
}

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2)
.flexible-widgets.widget-fifths  .widget:nth-child(5n+2) {
	clear: left;
	margin-left: 0;
}

It might need some tweaking, I'm still working on my site.

Hope this helps - make a backup before you try it.

[Author]

Posts