Add theme option: layout & combine 3 layouts into one stylesheet

[GoogleCodeExporter]

I was just blabbing about this in the forums when I realized this is probably a 
better place for it. Working on a project where I needed to change layouts 
often made me wish 
there was an easier way than filtering thematic_create_stylesheet() 
conditionally. The body classes have been there from the start  so why not use 
them to combine 3 stylesheets 
into one and add an option to set a default layout. There is a large amount of 
duplicated code in the three layout stylesheets so there is the added benefit 
of trimming the weight 
of the framework.
 I have seen several cases in the forums where someone wanted multiple layouts across their site. It'd be less wasteful for users and developers to filter the thematic_body_class() 
and put the burden on css rather than filter the thematic_create_stylesheet() 
and add yet another style sheet, http request and cached file. I believe the 
benefits of this method 
are worthy but does it come with a cost. Here's the rub... I don't know how you 
would add this to the framework with backward compatibility. I foresee upgrade 
issues where 
people have their layouts switch suddenly or 404ing the request for their 
stylesheets. I'll leave that to you all to think on. 

-Gene

Anyway here is some code to demonstrate.

heres an array that could be added to the options.php :

array(  "name" => __('Choose a default layout','thematic'),
    "id" => $shortname."_bodyclass_layout",
    "std" => "two-c-r-f",
    "type" => "select",
    "options" => array("two-c-r-f" => "Two Column Right Fixed", "two-c-l-f" => "Two Column Left Fixed", "three-c-f" => "Three Column Fixed", "three-c-r-f" => "Three 
Column Right Fixed", "three-c-r-f-p" => "Three Column Right Fixed Primary") ),

and an example of the code that could be added to the dynamic-classes.php :

function thematic_body_class( $print = true ) {
    global $wp_query, $current_user, $options;

    foreach ($options as $value) {
        if (get_option($value['id']) === FALSE) {
             $$value['id'] = $value['std'];
                  } else {
              $$value['id'] = get_option( $value['id'] );
                }
    }

    // It's surely a WordPress blog, right?
    $c = array('wordpress');

    // Set default layoout from theme options
    $thm_bodyclass_layout == 'Two Column Right Fixed'        ? $c[] = 'two-c-r-f'       : null;
    $thm_bodyclass_layout == 'Two Column Left Fixed'             ? $c[] = 'two-c-l-f'       : null;
    $thm_bodyclass_layout == 'Three Column Fixed'                ? $c[] = 'three-c-f'       : null;
    $thm_bodyclass_layout == 'Three Column Right Fixed'          ? $c[] = 'three-c-r-f'     : null;
    $thm_bodyclass_layout == 'Three Column Right Fixed Primary' ? $c[] = 'three-c-r-f-p': null;

and the new singular stylesheet

/* ------------------------------------------------------------
     Thematic Body Class Based - Combined Layouts 
-------------------------------------------------------------- */

body {
    min-width:960px;
}
    body.two-c-l-f  {   
        min-width:940px;
    }

#header {
    position:relative;
}

#branding {
    width:940px;
    margin:0 auto;
}

#access {
    position:relative;
    overflow:hidden;
}

.menu {
    width:940px;
    margin:0 auto;
}

#main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
    .two-c-l-f #main {  
        width:940px;
    }

#container {
    float:left;
}   
    .two-c-l-f #container {
        float:right;
        margin: 0 0 0 -310px;
    }
    .two-c-r-f #container {
        width: 620px;
    }
    .two-c-l-f #container, .three-c-f #container  { 
        width:940px;
    }
    .three-c-r-f #container, .three-c-r-f-p #container  { 
        width:540px;
    }
    .three-c-f #container, .three-c-r-f #container, .three-c-r-f-p #container {
        margin: 0 0 0 10px;
    }

#content {
    overflow:hidden;
}
    .two-c-l-f #content {
        margin: 0 0 0 320px;
        width:620px;
    }
    .two-c-r-f #content {
        margin:0 0 0 10px;
        width:540px;
    }
    .three-c-f #content {
        margin: 0 240px;
    }

.hentry {
}
    .two-c-l-f .hentry {
        width:630px;
    }

.main-aside {
}
    .two-c-l-f .main-aside, .two-c-r-f .main-aside {
        width:300px;
        position:relative;
        float:left;
    }
    .two-c-r-f .main-aside {
        float:right;
        right:10px;
    }

#primary {
}
    .two-c-l-f #primary, .three-c-f #primary, .three-c-r-f-p #primary  {
        float:left;
    }
    .three-c-r-f #primary {
        float:right;
    }
    .three-c-f #primary {
        width:220px;
        margin: 0 0 0 -940px;
    }
    .three-c-r-f #primary, .three-c-r-f-p #primary {
        width:220px;
        margin:0 10px 0 20px;
    }
    * html .three-c-f #primary {
        left: 20px;
        position: relative;
    }

#secondary {
}
    .two-c-l-f #secondary {
        clear:left;
    }
    .two-c-r-f #secondary {
        clear:right;
    }
    .three-c-f #secondary {
        width:220px;
        float:left;
        margin: 0 0 0 -220px;
    }
    .three-c-r-f #secondary, .three-c-r-f-p #secondary {
        width:140px;
        float:right;
        margin:0 0 0 10px;
    }

#footer {    
    clear:both;
}

#subsidiary {
    width:940px;
    margin:0 auto;
    overflow:hidden;
}
    .two-c-l-f #subsidiary, .two-c-r-f #subsidiary {
        width:940px;
    }

#subsidiary .aside {
    width:300px;
    float:left;
    margin:0 10px 0 10px;
}
    .two-c-l-f #subsidiary .aside, .two-c-r-f #subsidiary .aside {
    margin:0 20px 0 0;
    }

#subsidiary #third {
    margin:0 0 0 10px;
}   
    .two-c-l-f #subsidiary #third, .two-c-r-f #subsidiary #third {
    margin:0;
}

#siteinfo {
    clear:both;
    width:940px;
    margin:0 auto;
}

Original issue reported on code.google.com by eugene.m...@gmail.com on 1 Oct 2009 at 3:20

[GoogleCodeExporter]

found a error in the css - sorry

#subsidiary {
    width:960px;

Original comment by eugene.m...@gmail.com on 1 Oct 2009 at 3:35

[GoogleCodeExporter]

I'd rather not add another option to the options page (I'd like to remove the 
options
page entirely to a wp-plugin or theme-plugin [like a folder you could drop in 
your
child theme]). Especially one for layout.

However: is it possible to make use of that css document in another way? Maybe 
with
the existing styles? Maybe with a custom field (add a custom field for 
additional
body classes)? 

Original comment by ian%them...@gtempaccount.com on 1 Oct 2009 at 11:55

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Yeah, the more I think about the parent options page the more I see potential 
for breaking the priority a child theme. I see 
the value of a wp-plugin as being greater than that of a theme-plugin if only 
for the repository based admin update feature. 
Did the thematic options plugin ever get any traction?

Custom Fields would be a great solution, then the layout could be set on a per 
page/post basis. 

The only problem with the stylesheet I provided is that is has no default. When 
I wrote that I was thinking more on 
minimizing the three and using the options array[std]  to create the default.

I'm thinking either the stylesheet would probably need to be rewritten with a 
default setting in mind or a body class would 
need to be set by default.

Original comment by eugene.m...@gmail.com on 1 Oct 2009 at 2:20

[GoogleCodeExporter]

I ran through this and tested it briefly. It probably would need someone who 
knows these layouts better to look it over.

/* ---------------------------------------------------------------------
     Thematic Body Class Based - Combined Layouts - Default is Two Col Fixed Right
--------------------------------------------------------------------- */

body {
    min-width:960px;
}
    body.two-c-l-f  {   
        min-width:940px;
    }

#header {
    position:relative;
}

#branding {
    width:940px;
    margin:0 auto;
}

#access {
    position:relative;
    overflow:hidden;
}

.menu {
    width:940px;
    margin:0 auto;
}

#main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
    .two-c-l-f #main {  
        width:940px;
    }

#container {
    float:left;
    width: 620px;
}   
    .two-c-l-f #container {
        float:right;
        margin: 0 0 0 -310px;
    }
    .two-c-l-f #container, .three-c-f #container  { 
        width:940px;
    }
    .three-c-r-f #container, .three-c-r-f-p #container  { 
        width:540px;
    }
    .three-c-f #container, .three-c-r-f #container, .three-c-r-f-p #container {
        margin: 0 0 0 10px;
    }

#content {
    overflow:hidden;
    margin:0 0 0 10px;
    width:540px;
}
    .three-c-f-r #content, .three-c-f-r-p #content {
        margin:0;
        width:auto;
    } 

    .two-c-l-f #content {
        margin: 0 0 0 320px;
        width:620px;
    }
    .three-c-f #content {
        margin: 0 240px;
    }

.hentry {
    width:auto;
}
    .two-c-l-f .hentry {
        width:630px;
    }

.main-aside {
    width:300px;
    position:relative;
    float:right;
    right:10px;
}
    .three-c-f .main-aside, .three-c-r-f .main-aside, .three-c-r-f-p .main-aside {
        width:auto;
        position:static;
        float:none; 
    }
    .two-c-l-f .main-aside {
        float:left;
        right:0;
    }

#primary {
}
    .two-c-l-f #primary, .three-c-f #primary, .three-c-r-f-p #primary  {
        float:left;
    }
    .three-c-r-f #primary {
        float:right;
    }
    .three-c-f #primary {
        width:220px;
        margin: 0 0 0 -940px;
    }
    .three-c-r-f #primary, .three-c-r-f-p #primary {
        width:220px;
        margin:0 10px 0 20px;
    }
    * html .three-c-f #primary {
        left: 20px;
        position: relative;
    }

#secondary {
    clear:right;
}
    .two-c-l-f #secondary {
        clear:left;
    }
    .three-c-f #secondary {
        clear:none;
        width:220px;
        float:left;
        margin: 0 0 0 -220px;
    }
    .three-c-r-f #secondary, .three-c-r-f-p #secondary {
        clear:none;
        width:140px;
        float:right;
        margin:0 0 0 10px;
    }

#footer {    
    clear:both;
}

#subsidiary {
    width:940px;
    margin:0 auto;
    overflow:hidden;
}
    .three-c-f #subsidiary, .three-c-r-f #subsidiary, .three-c-r-f-p #subsidiary {
        width:960px;
    }

#subsidiary .aside, .two-c-l-f #subsidiary .aside {
    width:300px;
    float:left;
    margin:0 20px 0 0;
}
    .three-c-f #subsidiary .aside, .three-c-r-f #subsidiary .aside, .three-c-r-f-p #subsidiary .aside {
    margin:0 10px 0 10px;
    }

#subsidiary #third, .two-c-l-f #subsidiary #third {
    margin:0;
}   
    .three-c-f #subsidiary #third, .three-c-r-f #subsidiary #third, .three-c-r-f-p #subsidiary #third {
    margin:0 0 0 10px;
}

#siteinfo {
    clear:both;
    width:940px;
    margin:0 auto;
}

and then pulling the custom field into the body class:

// Generates semantic classes for BODY element
function thematic_body_class( $print = true ) {
    global $wp_query, $current_user, $post;

    // It's surely a WordPress blog, right?
    $c = array('wordpress');

    // Set default layoout from custom field
    $c[] = get_post_meta($post->ID , 'thm-layout', true);

Original comment by eugene.m...@gmail.com on 1 Oct 2009 at 3:32

[GoogleCodeExporter]

I reversed some abbreviations  in the prev version... tested thouroughly and 
all should be good now.

/* ---------------------------------------------------------------------
          Thematic Body Class Based - Combined Layouts - Default is Two Col Fixed Right
--------------------------------------------------------------------- */

body {
    min-width:960px;
}
    body.two-c-l-f  {   
        min-width:940px;
    }

#header {
    position:relative;
}

#branding {
    width:940px;
    margin:0 auto;
}

#access {
    position:relative;
    overflow:hidden;
}

.menu {
    width:940px;
    margin:0 auto;
}

#main {
    width:960px;
    margin:0 auto;
    overflow:hidden;
    position:relative;
}
    .two-c-l-f #main {  
        width:940px;
    }

#container {
    float:left;
    width: 620px;
}   
    .two-c-l-f #container {
        float:right;
        margin: 0 0 0 -310px;
    }
    .two-c-l-f #container, .three-c-f #container  { 
        width:940px;
    }
    .three-c-r-f #container, .three-c-r-f-p #container  { 
        width:540px;
    }
    .three-c-f #container, .three-c-r-f #container, .three-c-r-f-p #container {
        margin: 0 0 0 10px;
    }

#content {
    overflow:hidden;
    margin:0 0 0 10px;
    width:540px;
}
    .three-c-r-f #content, .three-c-r-f-p #content {
        margin:0;
        width:auto;
    } 

    .two-c-l-f #content {
        margin: 0 0 0 320px;
        width:620px;
    }
    .three-c-f #content {
        margin: 0 240px;
        width:auto;
    }

.hentry {
    width:auto;
}
    .two-c-l-f .hentry {
        width:630px;
    }

.main-aside {
    width:300px;
    position:relative;
    float:right;
    right:10px;
}
    .three-c-f .main-aside, .three-c-r-f .main-aside, .three-c-r-f-p .main-aside {
        width:auto;
        position:static;
        float:none; 
    }
    .two-c-l-f .main-aside {
        float:left;
        right:0;
    }

Original comment by eugene.m...@gmail.com on 1 Oct 2009 at 4:45

[GoogleCodeExporter]

First off, I want to apologize for being impetuous and littering a bunch of 
crippled code thats not been well 
tested, secondly for being a dork and pasting in half the document the second 
go round. I'm pretty new to web 
development and open source collaboration, so thanks for bearing with me while 
I find my way here.

This go round I'll attach a well tested and complete document.

-Gene

Original comment by eugene.m...@gmail.com on 5 Oct 2009 at 1:03

Attachments:

• bodystyle.css

[GoogleCodeExporter]

Original comment by eugene.m...@gmail.com on 22 Apr 2010 at 4:00

• Changed state: WontFix