Flexible Widget Classes Question

[Tom]

I have started playing around with the Flexible Widgets from Showcase Pro. For the First Widget Area on the Front Page, I'm trying to achieve a Widget layout like so:

100% Full Width
25% 25% 25% 25%
100% Full Width

As soon as I add the 6th Widget, the class .flexible-widgets.widget-halves .widget {width: 50%;} is added to the 2nd, 3rd, 4th and 5th Widgets.

How would I go about achieving a layout like this?

[Victor Font]

Depending on your content, you may be better off using text widgets and column classes rather than flexible widgets. Here is a link to the flex widget layouts: http://my.studiopress.com/setup/cafe-pro-theme/home-page-setup/home-page-widget-layout-configurations/. You'd have to change a lot of code to make flex widgets work the way you want.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Tom]

Hi Victor,

Thanks for the input, I found a solution in the end by playing around with the PHP for Flexible Widgets. This is probably not the best practice:

Before:

//* Flexible widget classes
function rmo_widget_area_class( $id ) {

	$count = rmo_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 even';
	}
	return $class;

}

After:

//* Flexible widget classes
function rmo_widget_area_class( $id ) {

	$count = rmo_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 % 5 == 1 ) {
		$class .= ' widget-fourths';
	} elseif( $count % 2 == 0 ) {
		$class .= ' widget-halves uneven';
	} else {
		$class .= ' widget-halves even';
	}
	return $class;

}

[Author]

Posts