Results 1 to 10 of 10

Thread: Flexable internal content

  1. #1
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default Flexable internal content

    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
    Code:
    min-width and right and left margin
    and make the
    Code:
    .content {width:100%;}
    it pushes the
    Code:
    #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.
    Last edited by itivae; 10-31-2012 at 11:00 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,937
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    It is done dynamically.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,937
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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)?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,937
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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 -
    Code:
    <?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 -
    Code:
    <?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 } ?>
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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:

    Code:
    <?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.

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,937
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    can I initiate another size here do you think? i.e.
    Code:
    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
    Code:
    add_filter()
    ?
    Last edited by itivae; 11-01-2012 at 03:25 PM.

  9. #9
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    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.

  10. #10
    Join Date
    Nov 2009
    Posts
    107
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Default

    Here is the code. Hope it helps someone else.

    Code:
    //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>';
    		}
    }

Similar Threads

  1. Ajax Tabs Content Scripts Internal load data
    By why not in forum JavaScript
    Replies: 0
    Last Post: 01-03-2012, 10:44 PM
  2. AJAX Tabs - How to make an extra link to another internal div (content) ?
    By TheSailor in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 06-16-2010, 11:07 PM
  3. Use only internal content in Ajax Tabs Content Script
    By ytsedrummer in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-30-2008, 09:28 AM
  4. Ajax Tab Content v.2.0 + Internal Divs Problems
    By Ruven in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-04-2008, 05:25 PM
  5. Tab Content Script internal URL
    By taras in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 09-10-2007, 03:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •