Efficient way for three and two column website [solved]

Gregor · Post by **Gregor** » Thu Jan 12, 2012 10:12 am

Hello,

After searching the forum I decided to raise the following question. Having a website, based on this example http://matthewjamestaylor.com/blog/ulti ... pixels.htm

The home page is three columns, and the following pages should be a two column, where the left part is the small part. The most straight forward way of doing this I think, is creating two templates (three and a two column layout) and three style sheet (one common, one for a three column and one for a two column).

The down side of this approach I see, is the maintenance of two templates and at least two stylesheets. On the forum I read posts about using GCB for this purpose, however I don't see how a selection criteria is made to decide if a three or a two column lay-out should be shown.

Any thoughts how I can make this a workable solution with respect to the maintenance?

Gregor

staartmees · Post by **staartmees** » Thu Jan 12, 2012 10:58 am

personally I would choose the system with 2 templates - two and three column template - and 2 stylesheets - two and three column stylesheet.

just make the two column template your default template.

Gregor · Post by **Gregor** » Thu Jan 12, 2012 11:09 am

Thanks for your reply! Could you explain why you would choose to do so?

staartmees · Post by **staartmees** » Thu Jan 12, 2012 11:40 am

I find it the easiest way and I use it in several websites.

KO · Post by KO » Thu Jan 12, 2012 11:56 am

One option (that I use a lot) would be to have 3-col layout and check with smarty if 3rd col is empty then put certain css class into body, wrapper or whatever and that controls column widths, margins etc. so it looks like 2-col on front end side. Else if it's not empty then it's normal 3-col layout.

Second way is in case you have only front page as 3-col and rest 2-col to print pagealias on body as class that controls column visibility, width, margins etc. on single template. When pagealias is "homepage" then its 3-col else 2-col. It does not remove blocks from admin side thou.

Or maybe Advanced Content where you can put custom checkboxes that controls the layout through smarty (and styles, classes) could be solution. I have not tried this as I never needed.

You don't need 2 or more stylesheets even if you have several templates. I never had more than 1 stylesheet with several templates. Just put unique css classes on those templates that control things. Now days I have as few templates and stylesheets as possible.

Gregor · Post by **Gregor** » Thu Jan 12, 2012 12:18 pm

Thanks for you reply!

KO wrote:One option (that I use a lot) would be to have 3-col layout and check with smarty if 3rd col is empty then put certain css class into body, wrapper or whatever and that controls column widths, margins etc. so it looks like 2-col on front end side. Else if it's not empty then it's normal 3-col layout.

Ok, but what if the content is entered inside the template, f.i. a tagcloud or twitter messages. These don't necessarily have to be entered as content?? Can you show an example?

KO wrote:Second way is in case you have only front page as 3-col and rest 2-col to print pagealias on body as class that controls column visibility, width, margins etc. on single template. When pagealias is "homepage" then its 3-col else 2-col. It does not remove blocks from admin side thou.

This actually is the case, and sounds like a very good option. Would you be so kind to show an example

KO · Post by KO » Thu Jan 12, 2012 12:42 pm

Gregor wrote:Thanks for you reply!

KO wrote:Second way is in case you have only front page as 3-col and rest 2-col to print pagealias on body as class that controls column visibility, width, margins etc. on single template. When pagealias is "homepage" then its 3-col else 2-col. It does not remove blocks from admin side thou.
This actually is the case, and sounds like a very good option. Would you be so kind to show an example

Several ways of doing. Here is one:

Code: Select all

</__body {if $page_alias == "homepage"}class="threeCol"{/if}>

Now you have class "threeCol" in body when page alias is "homepage". Change it accordingly.

Code: Select all

.ThirdCol {display:none;}
.MainCol {normal 2-col styles;}
.threeCol .ThirdCol {display:block;width:something;3-col styles}
.threeCol .MainCol{margin:somethingifferent;width:different;and other 3 col styles}

Sorry but I expect you to know styles etc. for this. 3rd col is always in source code but not visible when layout is 2Col layout and main col is wider or whatever needed. 3Col can be removed from source but makes things slightly more complicated.

Hope this helps.

Gregor · Post by **Gregor** » Fri Jan 13, 2012 9:40 pm

Thanks for you explanation KO. I know a little bit about style, however what you explained is step on the learning curve.

Gregor

KO · Post by KO » Mon Jan 16, 2012 9:04 am

Just let me know if you need help with it.

Gregor · Post by **Gregor** » Thu Jan 19, 2012 6:08 am

I'd like to make use of your offer KO.

The three column frontpage template:

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-NL">
<head>
   {if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}

   <title>{title} | {sitename}</title>
   {* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

   {metadata}
   {* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
   {* <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> *}
   {cms_stylesheet}
   {* This is how all the stylesheets attached to this template are linked to *}

   {cms_selflink dir="start" rellink=1}
   {cms_selflink dir="prev" rellink=1}
   {cms_selflink dir="next" rellink=1}
   {* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}

   <!--[if IE 6]>
   <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
   <![endif]-->
   {* The above JavaScript is required for Menu - NCleanBlue-css to work in IE6 *}

   {* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
   {* IE6 png fix *}
   {literal}
   <__script__ type="text/JavaScript">
   <!--
   //pass min and max - measured against window width
   function P7_MinMaxW(a,b){
   var nw="auto",w=document.documentElement.clientWidth;
   if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
   }
   //-->
   </__script>
   <!--[if IE 6]>
     <__script__ type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></__script>
     <__script__ type="text/javascript">
        // argument is a CSS selector      DD_belatedPNG.fix('.sbar-top-left,.sbar-top-right,.sbar-bottom-left,.sbar-bottom-right,.main-top,.main-bottom,#version');
     </__script>
     <style type="text/css">
        /* enable background image caching in IE6 */
        html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
     </style>
   <![endif]-->
   {/literal}
   {CGFeedMaker action='autodiscovery' feed='news'}
</head>
</__body>
   <div id="header">
      {* start accessibility skip links *}
      <ul class="accessibility">
         <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
         <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
      {* end accessibility skip links *}
      <hr class="accessibility" />
      {* Horizontal ruler that is hidden for visual browsers by CSS *}
      <h1>{cms_selflink dir="start" text="$sitename"}</h1>
      {* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}
      <div id="search" class="core-float-right">
         {* search search_method="post" *}
         {global_content name='google_zoek'}
      </div>
	  {* End Search *}
   </div>   
   {* Start Navigation, stylesheet "Navigation: ShadowMenu - Horizontal" *}
   {* <div id="menu_vert"> *}
      <h2 class="accessibility">Navigation</h2>
      {menu template="schaduw"}
      <hr class="accessibility" />
   {* </div> *}
   {* End Navigation *}
   {* Start Bar *}
   <div id="bar">
      {* Start Breadcrumbs, a bit of letting you know where your at *}
      <div class="breadcrumbs">
         {breadcrumbs starttext='Waar ben ik' root='Home' delimiter='&raquo;'}
      </div>
      {* End Breadcrumbs *}
      <div class="icons">
         {CGFeedMaker action='rsslink' feed='news' imageonly='' image='http://www.uisge-beatha.eu/uploads/images/cms/images.jpg'}
         {* cms_module module="Twitter" *}
         {Twitter action="tweet"}
         {global_content name='twitter'}
         {socialbookmarker sourcetitle='Uisge Beatha - Logboek' sourceurl='http://www.uisge-beatha.eu' brands='twitter, facebook'}
         <div id="print" class="core-float-right">
            <div>{print showbutton=true script=true}</div>
         </div>
      </div>
      <hr class="accessibility" />
   </div>
   {* End Bar *}
   <div id="pagewrapper" class="colmask threecol">
	  <div class="colmid">
	     <div class="colleft">
		    <div class="col1">
               <div id="main">
                  {content}
                  <br />  {* to insure space below content *}
                  {global_content name='SocialMedia'}
                  {* Start relational links *}
                  {* note this is the right side, when you float: divs you need to have float: right; divs first *}
                  <div class="right49">
                     <p>{anchor anchor='main' text='^ Top'}</p>
                  </div>
                  <div class="left49">
                     <span>
                        {cms_selflink dir="previous" label="Vorige pagina: "}&nbsp;
				        {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
           	 	     </span>
           		     <span>
                        {cms_selflink dir="next" label="Volgende pagina: "}&nbsp;
                     </span>
                  </div>
                  {* End relational links *}
                  <hr class="accessibility" />
                  <div class="clear"></div>
               </div>
			<!-- Column 1 end -->
			</div>
			<div class="col2">
			   <!-- Column 2 start / left side -->
               <div id="logboek">
                  <h2>{cms_selflink page="Nieuwtjes" text="Logboek}</h2>
			      {CGBlog pagelimit="3" lang="nl_NL" summarytemplate ="UB_Logbook_frntpg" category="Logboek,Tochten"}
               </div>
               <!-- Start News -->
               <div id="nieuwtjes">
                  <h2>{cms_selflink page="Nieuwtjes" text="Nieuwtjes}</h2>
                  {CGBlog number="3" detailpage="Nieuwtjes"  lang="nl_NL" summarytemplate ="UB_Nieuwtjes_frntpg" category="General,Motor,Te water lating,Binnenboord,Onderhoud,Statistiek,Hardlopen"}            
               </div>
               <!-- End News -->
            <!-- Column 2 end -->
		    </div>
			<div class="col3">
			   <!-- Column 3 start / right side -->
               <div id="menu">
                  {* cms_module module="Twitter" *}
               </div>
               <div id="tagcloud">
                  <h2>Tag cloud</h2>
                  {CGBlog browsecattemplate="Tagcloud" action="browsecat"}
               </div>
			<!-- Column 3 end -->
			</div>
		 </div>
	  </div>
      <span class="util-clearb">&nbsp;</span>
   </div>
   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="foot-wrapper">
     <div id="footer">
      {* stylesheet  "Navigation: FatFootMenu" *}
      <div class="block core-float-left">
          {menu loadprops=0 template='minimal_menu.tpl'  number_of_levels='1'}
      </div>
      {* second foot menu if active page has children *}
      <div class="block core-float-left">
          {menu loadprops=0 template='minimal_menu.tpl'  start_level="2"}
      </div>
      {* edit the footer in the Global Content Block called "footer" *}
      <div class="block cms">
         {global_content name='footer'}
      </div>
      <div class="clear"></div> {* <span class="util-clearb">&nbsp;</span> *}
     </div>
   </div>
   {* End Footer *}
<__body>
</__html>

The two column template for the other pages:

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-NL">
<head>
   {* if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if *}

   {if $canonical != ''}
   {* detail pagina mobiel http://m.xxx.nl/log/99/munge_string_to_url_title/ *}
   {* canonical =  http://www.xxx.nl/blog/99/munge_string_to_url_title/ *}
       <link rel="canonical" href="{$canonical}" />
   {elseif $page_name == 'lbjaar'}
   {* index pagina mobiel www.m.xxx.nl/blog/ *}
      <link rel="canonical" href="http://www.uisge-beatha.eu/logboek/" />
   {/if}

   <title>{title} | {sitename}</title>
   {* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

   {metadata}
   {* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

   {* tracewatch *}
   {autometa}

   {cms_stylesheet}
   {* This is how all the stylesheets attached to this template are linked to *}

   {cms_selflink dir="start" rellink=1}
   {cms_selflink dir="prev" rellink=1}
   {cms_selflink dir="next" rellink=1}
   {* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}

   <!--[if IE 6]>
   <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
   <![endif]-->
   {* The above JavaScript is required for Menu - NCleanBlue-css to work in IE6 *}

   {* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
   {* IE6 png fix *}
   {literal}
   <__script__ type="text/JavaScript">
   <!--
   //pass min and max - measured against window width
   function P7_MinMaxW(a,b){
   var nw="auto",w=document.documentElement.clientWidth;
   if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
   }
   //-->
   </__script>
   <!--[if IE 6]>
     <__script__ type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></__script>
     <__script__ type="text/javascript">
        // argument is a CSS selector      DD_belatedPNG.fix('.sbar-top-left,.sbar-top-right,.sbar-bottom-left,.sbar-bottom-right,.main-top,.main-bottom,#version');
     </__script>
     <style type="text/css">
        /* enable background image caching in IE6 */
        html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
     </style>
   <![endif]-->
   {/literal}
   {CGFeedMaker action='autodiscovery' feed='news'}
</head>
{flush}
</__body>
   <div id="header">
      {* start accessibility skip links *}
      <ul class="accessibility">
         <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
         <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
      {* end accessibility skip links *}
      <hr class="accessibility" />
      {* Horizontal ruler that is hidden for visual browsers by CSS *}
      <h1>{cms_selflink dir="start" text="$sitename"}</h1>
      {* Start Search, the input "Submit" is using an image, CSS: div#search input.search-button *}
      <div id="search" class="core-float-right">
         {* search search_method="post" *}
         {global_content name='google_zoek'}
      </div>
	  {* End Search *}
   </div>   
   {* Start Navigation, stylesheet "Navigation: ShadowMenu - Horizontal" *}
   {* <div id="menu_vert"> *}
      <h2 class="accessibility">Navigation</h2>
      {menu template="schaduw"}
      <hr class="accessibility" />
   {* </div> *}
   {* End Navigation *}
   {* Start Bar *}
   <div id="bar">
      {* Start Breadcrumbs, a bit of letting you know where your at *}
      <div class="breadcrumbs">
         {breadcrumbs starttext='Waar ben ik' root='Home' delimiter='&raquo;'}
      </div>
      {* End Breadcrumbs *}
      <div id="icons">
         {CGFeedMaker action='rsslink' feed='news' imageonly='' image='http://www.uisge-beatha.eu/uploads/images/cms/images.jpg'}
         {* cms_module module="Twitter" *}
         {global_content name='twitter'}
         <div id="print" class="core-float-right">
             <div>{print showbutton=true script=true}</div>
         </div>
         {* socialbookmarker sourcetitle='Uisge Beatha - Logboek' sourceurl='http://www.uisge-beatha.eu' brands='twitter, facebook' *}
      </div>
      <hr class="accessibility" />
   </div>
   {* End Bar *}
   <div id="pagewrapper" class="colmask leftmenu">
      <div class="colmask leftmenu">
	     <div class="colleft">
		    <div class="col1">
			<!-- Column 1 start -->		
               <div id="main">
                  {content}
                  <br />   {* to insure space below content *}
                  {global_content name='SocialMedia'}
                  {* Start relational links *}
                  {* note this is the right side, when you float: divs you need to have float: right; divs first *}
                  <div class="right49">
                     <p>{anchor anchor='main' text='^ Top'}</p>
                  </div>
                  <div class="left49">
                     <span>
                        {cms_selflink dir="previous" label="Vorige pagina: "}&nbsp;
				        {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
           	 	     </span>
           		     <span>
                        {cms_selflink dir="next" label="Volgende pagina: "}&nbsp;
                     </span>
                  </div>
                  {* End relational links *}
                  <hr class="accessibility" />
                  <div class="clear"></div>
               </div>   
			<!-- Column 1 end -->
		    </div>
		    <div class="col2">
			   <!-- Column 2 start -->
			   <div id="logboek">
                  <h2>{cms_selflink page="Nieuwtjes" text="Logboek}</h2>
			      {CGBlog pagelimit="3" lang="nl_NL" summarytemplate ="UB_Logbook_frntpg" category="Logboek,Tochten"}
               </div>
               <!-- Start News -->
               <div id="nieuwtjes">
                  <h2>{cms_selflink page="Nieuwtjes" text="Nieuwtjes}</h2>
                  {CGBlog number="3" detailpage="Nieuwtjes"  lang="nl_NL" summarytemplate ="UB_Nieuwtjes_frntpg" category="General,Motor,Te water lating,Binnenboord,Onderhoud,Statistiek,Hardlopen"}
               </div>
               <!-- End News -->
			<!-- Column 2 end -->
		    </div>
	     </div>
	
      </div>
      <span class="util-clearb">&nbsp;</span>
   </div>
   
   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="foot-wrapper">
     <div id="footer">
      {* stylesheet  "Navigation: FatFootMenu" *}
      <div class="block core-float-left">
          {menu loadprops=0 template='minimal_menu.tpl'  number_of_levels='1'}
      </div>
      {* second foot menu if active page has children *}
      <div class="block core-float-left">
          {menu loadprops=0 template='minimal_menu.tpl'  start_level="2"}
      </div>
      {* edit the footer in the Global Content Block called "footer" *}
      <div class="block cms">
         {global_content name='footer'}
      </div>
      <div class="clear"></div> {* <span class="util-clearb">&nbsp;</span> *}
     </div>
   </div>
   {* End Footer *}
<__body>
</__html>

I set the templates up to make use f different styles to differ between three and two pages. I would be happy if you could help me with a first start so I can take it from there.

Gregor

KO · Post by KO » Thu Jan 19, 2012 9:42 am

Hi, as there is no CSS styles it's a bit of quess work but let's try. If it does not work it's easiest to look at real site and it's CSS directly.

Change:

Code: Select all

   <div id="pagewrapper" class="colmask threecol">

To:

Code: Select all

<div id="pagewrapper" class="colmask {if $page_alias == "home"}threeCol{else}leftmenu{/if}">

Now frontpage alias is "home". Change it if needed. It might work already with that but I don't know the styles so can't tell.

If you add style:

Code: Select all

.leftmenu .col3 {display:none;}

That should hide 3rd col.

You can also try to add this around col3:

Code: Select all

{if $page_alias == "home"}
 <div class="col3">
... rest of the code
</div>
{/if}

to create it only into home page.

There can be mistakes as I can't verify it but I hope this helps!

Keijo

Gregor · Post by **Gregor** » Thu Jan 19, 2012 10:08 am

I thought the css might be needed

Added it underneath. I'll have a look at your post (thanks for that!)

It's a partly css, because of this 'error'

Your message contains 20997 characters. The maximum number of allowed characters is 20000.

Code: Select all

body {
border : 0;
width : 100%;
background : #fff;
min-width : 600px;
font-size : 90%;
margin : 0;
font : 79%/115% "Bookman Old Style";
}
/* georgia, verdana, arial; */

a {
color : #61363c;
}
a:hover {
text-decoration: none;
background-color : inherit;
color : #61363c;
}
h1, h2, h3 {
margin : 0.8em 0 0.2em 0;
padding : 0;
}
p {
padding : 0;
margin : 0.4em 0 0.8em;
}
img {
   margin-top: 5px;
   margin-right: 0;
   margin-bottom: 5px;
}

#p.img{
}
#ads img {
display : block;
padding-top : 10px;
}
.core-float-right {
float : right;
width : 28%;
}
#header {
clear : both;
float : left;
width : 100%;
height : 180px;
  background: #61363c url(http://www.uisge-beatha.eu//uploads/images/cms/Haiku.png) no-repeat right center;
}

#header p, #header h1, #header h2 {
padding : 0.4em 15px 0 15px;
margin : 0;
color : #8af753;
}
#header ul {
width : 100%;
list-style : none;
text-indent : -999em;
display : none;
}
#header ul li {
display : inline;
list-style : none;
margin : 0;
padding : 0;
}
#header ul li a {
display : block;
float : left;
margin : 0 0 0 1px;
padding : 3px 10px;
text-align : center;
background : #eee;
color : #000;
text-decoration : none;
position : relative;
left : 15px;
line-height : 1.3em;
}
#header ul li a:hover {
color : #fff;
   background-color: #369;
}
#header ul li a.active, #header ul li a.active:hover {
color : #fff;
background : #000;
font-weight : bold;
}
#header ul li a span {
display : block;
}
#menu-search {
width : 100%;
}
#search {
width : 178px;
border-style : outset;
position : relative;
bottom : 15px;
}
#search label {
text-indent : -9999em;
display : none;
}
#search input.search-input {
width : 143px;
border-style : none;
font : bold 0.9em Arial, Helvetica, sans-serif;
background : url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/search.png) no-repeat;
float : left;
padding : 7px 0 4px 10px;
}
* {
font-weight : inherit;
font-style : inherit;
font-family : inherit;
}
#header ul {
width : 100%;
list-style : none;
text-indent : -999em;
display : none;
}
div#search input.search-button {
width : 37px;
height : 28px;
border-style : none;
text-indent : -9999em;
float : right;
margin : 0;
cursor : pointer;
font-size : 0;
line-height : 0;
background : transparent url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/search.png) no-repeat;
}
.accessibility {
position : absolute;
top : -999em;
left : -999em;
}
#bar {
height : 20px;
padding-right : 5px;
padding-left : 1em;
font : 10px "Lucida Grande", Lucida, Verdana, sans-serif;
   width: 100%;
   display: inline-block;
   margin-top: 5px;
   margin-bottom: 5px;
   background-color: #fffeff;
}
.breadcrumbs {
   width: 40%;
   display: inline-block;
}
#icons {
   text-decoration: none;
   margin-top: 0;
   margin-bottom: 0;
   width: 190px;
   float: right;
   margin-right: 27px;
}

#icons img {
   text-decoration: none;
   width: 20px;
   margin: 0 0 0 7px;
   height: 20px;
   float: right;
}

a.twitter-share-button {
   float: left;
}

#layoutdims {
clear : both;
background : #e5d6cc; /* eee */
border-top : 4px solid #000;
margin : 0;
padding : 6px 15px !important ;
text-align : right;
}

.colmask {
position : relative;
clear : both;
float : left;
width : 100%;
overflow : hidden;
}
.colright, .colmid, .colleft {
float : left;
width : 100%;
position : relative;
}
.col1, .col2, .col3 {
float : left;
position : relative;
padding : 0 0 1em 0;
overflow : hidden;
}
.threecol {
background : #e5d6cc;
}
.threecol .colmid {
right : 25%;
background : #fff;
}
.threecol .colleft {
right : 50%;
background : #e5d6cc; /* #f4f4f4; */
}
.threecol .col1 {
width : 46%;
left : 102%;
}
.threecol .col2 {
width : 21%;
left : 31%;
}
.threecol .col3 {
width : 22%;
left : 85%;
}


/* 2 Column (left menu) settings */
.leftmenu {
	background:#fff;
}
.leftmenu .colleft {
	right:75%;			/* right column width */
	background:#f4f4f4;	/* left column background colour */
}
.leftmenu .col1 {
	width:71%;			/* right column content width */
	left:102%;			/* 100% plus left column left padding */
}
.leftmenu .col2 {
	width:21%;			/* left column content width (column width minus left and right padding) */
	left:6%;			/* (right column left and right padding) plus (left column left padding) */
}


#print {
   width: 20px;
   height: 20px;
}


/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
	position: absolute;
	left: -5000px;
	width: 4000px;
}
a.external, p a {
/* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
	padding: 0 12px 0 0;
}
/* colors for external links 
voor opsomming ul li a span */
a.external:link, p a  {
	color: #679EBC;
/* background image for the link to show wiki style arrow */
	background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/external.gif) no-repeat 100% -100px;
   padding-right: 11px;
   margin-right: 3px;
}
a.external:visited {
	color: #18507C;
/* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
	background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/external.gif) no-repeat 100% -100px;
}
a.external:hover {
	color: #18507C;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
	background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/external.gif) no-repeat 100% 0;
	background-color: inherit;
}
/* end wiki style external links */


/* ------------ Main (Center) ------------ */
.main {
	
   float: left;
   width: 500px;
   margin-right: 10px;
   margin-left: 10px;
}
.main-top {
	width: auto;
	 background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bg__content.png) no-repeat right top;
}
.main-main {
	width: auto;
	border-right: 1px solid #E2E2E2;
	border-left: 1px solid #E2E2E2;
	background: #F0F0F0;
	padding: 20px;
	padding-top: 0px;
}
.main-bottom {
	height: 40px;
   background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bg__content.png) left;
   width: auto;
   padding-top: 1px;
}
.right49, .left49 {
	font-size: 0.85em;
	margin: 7px 5px 5px 0;
	font-weight: bold;
}
.left49 span {
	display: block;
   padding-top: 0;
   margin-bottom: 0;
}
.left49 a {
	font-weight: normal;
}
.right49 {
	width: 44px;
	background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bull.png) no-repeat 0 4px;
   float: right;
}
.right49 a, .right49 a:visited {
	padding: 7px 4px;
	display: block;
	height: 15px;
	background: url(http://ljd.uisge-beatha.eu/uploads/NCleanBlue/bull.png) no-repeat left top;
   color: #000;
   clear: none;
}
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
	font-size: 1.4em;
	color: #301E12;
}
div#main ul,
div#main ol,
div#main dl,
#footer ul,
#footer ol {
	line-height: 1em;
	margin: 0 0 1.5em 0;
}
div#main ul,
#footer ul {
	list-style: circle;
}
div#main ul a:hover {
   color: #01208b;
}
div#main ul li,
div#main ol li, 
#footer ul li,
#footer ol li {
	padding: 2px 2px 2px 5px;
	margin-left: 20px;
}
/* definition lists topics on bold */
div#main dl dt {
	font-weight: bold;
	margin: 0 0 0 1em;
}
div#main dl dd {
	margin: 0 0 1em 1em;
}
div#main dl {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #c0c0c0;
}

Dr.CSS · Post by **Dr.CSS** » Thu Jan 19, 2012 4:03 pm

This page and the next 2 are all using the same template, the main outside div has a class call of, one, two, or nothing for 3 columns, it is a online='true' content block that is at the top, put one or two in it and it hides/shows different columns...

http://themes.multiintech.com/wire-frames/min1col.html

Gregor · Post by **Gregor** » Thu Jan 19, 2012 6:38 pm

@Mark: have never used this option before. For my understanding it only shows a column when content is entered via the content page?

If you look at the templates I created, than the content for the right column (the left and middle are always in plays) is put in the template. That should differ in your example?

Rolf · Post by **Rolf** » Fri Jan 20, 2012 7:51 pm

Hi Gregor,

I used this once.
One template, depending on the presence of content in a content block a two or three column layout. Copied the code, I hope it is complete

Stylesheet

Code: Select all

div#content {
        margin: 0 0 0 0;
        padding: 0;
        min-height: 300px;
        border: #ccc 2px solid;
        background: #fff;
}

div#sidebar-left {
        float: left;
        width: 375px;
        padding: 10px 15px;
}

div#sidebar-right {
        float: right;
        width: 375px;
        padding: 10px 15px;
}

HTML Template

Code: Select all

{* Start Content *}
      <div id="content">

{content block="content_left" wysiwyg="true" label="Left column" assign="content_left"}
{content label="Main content (Required)" assign="content_main"}
{content block="content_right" wysiwyg="true" label="Right column" assign="content_right"}

{* Start sidebar left *}
{if $content_left}

{literal}
    <style type="text/css">
div#main {
padding-left: 410px;
}
    </style>
{/literal}

<div id="sidebar-left">
{$content_left}
</div>
{/if}
{* End sidebar left *}

{* Start sidebar right *}
{if $content_right}

{literal}
    <style type="text/css">
div#main {
padding-right: 410px;
}
    </style>
{/literal}

<div id="sidebar-right">
{$content_right}
</div>
{/if}
{* End sidebar right *}


{* Start Content *}
<div id="main">
{$content_main}
</div>
{* End Content Area *}

                <div class="clear"></div>
      </div>
{* End Content *}

Not fully W3c valid, but very flexible

Grtz. Rolf

CMS Made Simple Forums

Efficient way for three and two column website [solved]

Efficient way for three and two column website [solved]

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website

Re: Efficient way for three and two column website