Flexable internal content

[itivae]

Hello I am working on a project that uses a template with a fixed width.

Wrapper width is 860px.
the content div has a minimum width of 460px.

Here is a link to the page. http://criterioninstitute.org/leadersshapingmarkets/

Please be aware that the div classes carry through the entire site (i need a solution that will work for 1,2,or 3 column layout).

What I am trying to accomplish is if one, or both of the the sidebars are removed, the content will flex to 100% of the space allowed (so if there are two sidebars the content will be around 460px, if one or more, of the sidebars are removed it will move to fill that space). When I remove the
min-width and right and left margin and make the
.content {width:100%;} it pushes the
#sidebar to the bottom of the wrapper. Any thoughts on this? I don't know if this can be solved with css or if it will need javascript or a php function to accomplish it. Any help is most welcome.

Thanks in advance.

[Beverleyh]

You say "when the sidebars are removed..." - can I just ask , is this something that is being done dynamically or do you just mean that you're manually deleting the sidebar divs from the HTML?

[itivae]

It is done dynamically.

[Beverleyh]

Ok - so how is it being done dynamically? And who is altering the layout of the page? The end user by way of personalising their layout view (temporary: js/cookies/css classes) or is this done by the admin in the CMS backend (permanent: database layout selection)?

[Beverleyh]

If the layout depends on the page name, and otherwise wouldn't change, you could always do something like this;

Say if your contact.php page had 3 columns -


<?php
$page = basename(substr($_SERVER[PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get page name and strip file extension
if ($page == 'contact') {
?>
<style type="text/css">
#col_left{width:200px}
#col_mid{width:600px}
#col_right{width:200px}
</style>
<?php } ?>


And then your about.php page had 2 columns -


<?php
$page = basename(substr($_SERVER[PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get page name and strip file extension
if ($page == 'about') {
?>
<style type="text/css">
#col_left{width:200px}
#col_mid{width:800px}
#col_right{display:none}
</style>
<?php } ?>

[itivae]

This layout is done through a CMS (Wordpress genesis). I believe that this is the switch that drives the size (I had to do a bit of digging to find it:


<?php
/**
* Controls layout structures.
*
* @category Genesis
* @package Structure
* @subpackage Layout
* @author StudioPress
* @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
* @link http://www.studiopress.com/themes/genesis
*/

add_filter( 'content_width', 'genesis_content_width', 10, 3 );
/**
* Filters the content width based on the user selected layout.
*
* @since 1.6.0
*
* @uses genesis_site_layout() Gets the site layout for current context
*
* @param integer $default Default width
* @param integer $small Small width
* @param integer $large Large width
* @return integer Content width
*/
function genesis_content_width( $default, $small, $large ) {

switch ( genesis_site_layout() ) {
case 'full-width-content':
$width = $large;
break;
case 'content-sidebar-sidebar':
case 'sidebar-content-sidebar':
case 'sidebar-sidebar-content':
$width = $small;
break;
default:
$width = $default;
}

return $width;

}

add_action( 'genesis_meta', 'genesis_load_stylesheet' );
/**
* Echo reference to the style sheet.
*
* If a child theme is active, it loads the child theme's stylesheet,
* otherwise, it loads the Genesis stylesheet.
*
* @since 0.2.2
*/
function genesis_load_stylesheet() {

echo '<link rel="stylesheet" href="'.get_bloginfo( 'stylesheet_url' ).'" type="text/css" media="screen" />'."\n";

}

add_filter( 'body_class', 'genesis_custom_body_class', 15 );
/**
* Adds custom field body class(es) to the body classes.
*
* It accepts values from a per-post / page custom field, and only outputs when
* viewing a singular page.
*
* @since 1.4.0
*
* @uses genesis_get_custom_field() Get custom field value
*
* @param array $classes Existing classes
* @return array Amended classes
*/
function genesis_custom_body_class( $classes ) {

$new_class = is_singular() ? genesis_get_custom_field( '_genesis_custom_body_class' ) : null;

if ( $new_class )
$classes[] = esc_attr( sanitize_html_class( $new_class ) );

return $classes;

}

add_filter( 'body_class', 'genesis_header_body_classes' );
/**
* Adds header-* classes to the body class.
*
* We can use pseudo-variables in our CSS file, which helps us achieve multiple
* header layouts with minimal code.
*
* @since 0.2.2
*
* @uses genesis_get_option() Get theme setting value
*
* @param array $classes Existing classes
* @return array Amended classes
*/
function genesis_header_body_classes( $classes ) {

if ( ! is_active_sidebar( 'header-right' ) && ! has_action( 'genesis_header_right' ) )
$classes[] = 'header-full-width';

if ( 'image' == genesis_get_option( 'blog_title' ) || 'blank' == get_header_textcolor() )
$classes[] = 'header-image';

return $classes;

}

add_filter( 'body_class', 'genesis_layout_body_classes' );
/**
* Adds site layout classes to the body classes.
*
* We can use pseudo-variables in our CSS file, which helps us achieve multiple
* site layouts with minimal code.
*
* @since 0.2.2
*
* @uses genesis_site_layout() Returns the site layout for different contexts
*
* @param array $classes Existing classes
* @return array Amended classes
*/
function genesis_layout_body_classes( $classes ) {

$site_layout = genesis_site_layout();

if ( $site_layout )
$classes[] = $site_layout;

return $classes;

}

add_filter( 'body_class', 'genesis_style_selector_body_classes' );
/**
* Adds style selector classes to the body classes.
*
* Enables style selector support in child themes, which helps us achieve
* multiple site styles with minimal code.
*
* @since 1.8.0
*
* @uses genesis_get_option() Get theme setting value
*
* @param array $classes Existing classes
* @return array Amended classes
*/
function genesis_style_selector_body_classes( $classes ) {

$current = genesis_get_option( 'style_selection' );

if ( $current )
$classes[] = esc_attr( sanitize_html_class( $current ) );

return $classes;

}

add_action( 'genesis_after_content', 'genesis_get_sidebar' );
/**
* Outputs the sidebar.php file if layout allows for it.
*
* @since 0.2.0
*
* @uses genesis_site_layout() Returns the site layout for different contexts
*/
function genesis_get_sidebar() {

$site_layout = genesis_site_layout();

/** Don't load sidebar on pages that don't need it */
if ( $site_layout == 'full-width-content' )
return;

get_sidebar();

}

add_action( 'genesis_after_content_sidebar_wrap', 'genesis_get_sidebar_alt' );
/**
* Outputs the sidebar_alt.php file if layout allows for it.
*
* @since 0.2.0
*
* @uses genesis_site_layout() Returns the site layout for different contexts
*/
function genesis_get_sidebar_alt() {

$site_layout = genesis_site_layout();

/** Don't load sidebar-alt on pages that don't need it */
if ( in_array( $site_layout, array( 'content-sidebar', 'sidebar-content', 'full-width-content' ) ) )
return;

get_sidebar( 'alt' );

}

Then I believe it is pulled through the layout functions below. Can the same logic be assigned here? Thanks for taking the time to help.

[Beverleyh]

I imagine so although I'm not a Wordpress expert so there are probably much more elegant solutions.

Try changing the $page == 'content' part to $width == $large, etc in the if statements in my code suggestion and customise the CSS according to your needs.
You'll not need the $page variable line so delete that.

[itivae]

can I initiate another size here do you think? i.e.


add_filter( 'content_width', 'genesis_content_width', 10, 3 );

function genesis_content_width( $default, $small, $medium, $large ) {

switch ( genesis_site_layout() ) {
case 'full-width-content':
$width = $large;
break;
case 'sidebar-content':
case 'content-sidebar':
$width = $medium;
break;
case 'content-sidebar-sidebar':
case 'sidebar-content-sidebar':
case 'sidebar-sidebar-content':
$width = $small;
break;
default:
$width = $default;
}

return $width;

}

$width=$medium

will i need to alter the
add_filter()?

[itivae]

Thanks for the help Beverleyh. It was much appreciated. This framework is function driven so I made a function following your general guidelines to reach a solution. Gratitude.

[itivae]

Here is the code. Hope it helps someone else.


//changes content width for sidebar-content layout
add_action( 'genesis_before_content', 'content_width_changer' );

function content_width_changer() {
$site_layout = genesis_site_layout();
if ($site_layout == 'sidebar-content' ) {
echo '<style type="text/css">';
echo '#content {margin-right:5px !important; max-width:650px !important;}';
echo '.content-sidebar #content, .sidebar-content #content {max-width:650px !important;}';
echo '</style>';
}
}


//changes content width for content-sidebar layout
add_action( 'genesis_before_content', 'content_width_changer2' );

function content_width_changer2() {
$site_layout = genesis_site_layout();
if ($site_layout == 'content-sidebar' ) {
echo '<style type="text/css">';
echo '#content {margin-left:5px !important; max-width:650px !important;}';
echo '.content-sidebar #content, .sidebar-content #content {max-width:650px !important;}';
echo '</style>';
}
}