ASU Web Community

Drupal Template --> Single Column Layout

Monday, January 14th, 2008 - 2:38 pm
  • dhleach
  • dhleach's picture

Supposing that, in the midst of the discussions of how the site is supposed to look, it is decided that the left nav bar is unwanted. In other words, between the header and the footer, the author needs just blank space to work with. However, being a forward thinker, you decide that just deleting lines of code (specific to the nav bar) out of the template CSS files may not be the wisest choice if in the future you are told to use them again. So, one is left with the decisision to not display the nav bar for just select pages. I had two choices:

  1. modify a "version" of the template and invoke it only when those pages that req'd the single column layout were accessed.
  2. see if I couldn't just nullify it in the code of the page.

I chose #2, as my knowledge of PHP is quite limited. So, using CSS, I created a page with this:

<style type="text/css">
<!--
/* Get rid of the title, view/edit tabs, breadcrumbs and nav bar (in that order) */
h1.title {display:none;}
ul.primary {display:none;}
div.breadcrumb {display:none;}
#container .sidebar {display:none;}

/* neaten up the margins */
.both-sidebars #container, .sidebar-left #container {background:#330033;margin:61px 0 0 0;padding:0 0 0 0;}

/* to see what is making #main force a column, we apply some coloring */
#asu_container {width:90%;}
.content {background:#666666;}
#Squeeze {background:#003366;}
#Main {background:#006666;float:right;z-index:10;}
#RandomDiv {background:#FFD987;}

-->
</style>
<div id="RandomDiv">Page Content.<p>Content will consist of images only, no text will be in final product.</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eget nulla. Vivamus nulla arcu, tempor sit amet, vehicula non, blandit eget, nisi. In hac habitasse platea dictumst. Integer enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mollis lacinia quam. Curabitur nulla massa, consectetuer nec, volutpat ac, eleifend eget, nunc. Donec cursus, magna nec consectetuer viverra, nunc orci sodales ligula, ac adipiscing lorem dui quis purus. Maecenas accumsan pulvinar eros. Praesent fermentum neque id libero. Phasellus quis arcu aliquam dui elementum sagittis. Cras porttitor. Curabitur luctus diam id libero. Integer ligula nibh, sollicitudin vitae, commodo et, ultricies gravida, elit. Nunc tempor quam ac nulla. Suspendisse blandit viverra ipsum. Curabitur fringilla odio et metus. Sed dolor nisl, porttitor at, accumsan a, consequat vitae, nunc. In vel lectus nec leo ultrices tempus.
</p><p>Nunc consequat. Duis rutrum, odio quis ornare congue, felis leo fringilla pede, in adipiscing risus diam id justo. Donec vehicula, leo in gravida tempus, tellus odio viverra eros, vel molestie nisi augue et quam. Fusce venenatis. Sed accumsan augue. Quisque malesuada. Nulla congue iaculis magna. Phasellus vel risus a erat fermentum tempus. Suspendisse purus massa, tincidunt a, congue quis, sodales a, sapien. Ut arcu tellus, fringilla et, varius eget, consectetuer ut, arcu.
</p><p>Aliquam vehicula, lorem sed vestibulum auctor, libero quam fermentum nulla, accumsan mattis lectus felis vel metus. Proin vitae nibh ac elit ultricies eleifend. Curabitur faucibus lorem eu augue ullamcorper interdum. Nam consectetuer tincidunt lectus. Suspendisse condimentum. Aliquam viverra, dui vitae euismod vulputate, tortor elit mollis arcu, et gravida metus risus quis est. Morbi dapibus vulputate tellus. Cras orci purus, egestas quis, accumsan ut, consequat vel, neque. Curabitur arcu nisl, porttitor eu, pretium eget, sagittis sollicitudin, massa. Vestibulum eget risus. Morbi at neque. Donec eleifend enim a nisi. Quisque auctor nonummy ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tincidunt semper sem. Mauris quis odio. Vestibulum ut neque sed neque pretium vulputate. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p><p>Vestibulum scelerisque molestie magna. Donec mi. Fusce sit amet arcu. Morbi eu lorem quis arcu pharetra fringilla. Curabitur nec mauris. In interdum justo vel eros. Mauris neque. Etiam bibendum facilisis orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sed risus et ipsum rhoncus faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In non felis. Nunc pharetra. Mauris vulputate diam ac nisi. Morbi pede. Praesent mollis pede quis tortor. Vivamus ligula ligula, ornare ac, sagittis in, luctus vitae, est.
</p><p>Praesent eu elit vitae odio iaculis vestibulum. Maecenas enim leo, condimentum sit amet, rhoncus quis, auctor vitae, lorem. Aenean auctor ipsum id purus. Proin dictum condimentum eros. Ut ac enim. Sed commodo augue sit amet leo. Vivamus vel sem at tellus eleifend fringilla. Nullam volutpat mauris et turpis. Fusce sit amet massa. Pellentesque sagittis nibh hendrerit felis. In odio ipsum, fermentum ultrices, tempus bibendum, placerat id, erat. Nam laoreet scelerisque augue. Vivamus eget felis non magna gravida porta. Curabitur eget mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent in nisi.
</p></div>

... which yields this: (background color set to show div layers, white space to right is intentional)

 

... and I find that no matter what I try I can't get rid of all that space (210px exactly) to the right... and when I bring my browser window in, that purple space starts to overlap and cut off the page content. I just want the page content (lorem ipsum) centered on the screen. Any ideas?

 

Thursday, January 17th, 2008 - 12:31 pm
  • ngudmuns
  • ngudmuns's picture

You'll have to modify layout.css, but not in the file. Just overwrite the css for specific pages you need. This is the layout.css that will give you fixed-width, centered content inside the asu template. You shouldn't have to change any other files.

The main concept is this:

Set display:none for everything with sidebar in it's name :D

Set the margins of the content div to auto, and center the wrapping div as shown below.I made some changes to the template so that it will continue to work with the rest of the asu files (can't do anything to the body tag as the standard asu headers are in there and shouldn't be centered).

body
{
text-align: center;
}

div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}

 

 

LAYOUT.CSS FILE BELOW: 

/* $Id: layout.css,v 1.5.2.1 2007/01/17 05:28:41 jjeff Exp $ */
/**
* LAYOUT STYLES
*
* Define CSS classes to create a table-free,
* single column layout
*/

/**
* Layout
*/

#asu_container {
min-width: 996px;
}

/* We must define 100% width to avoid the body being too narrow for near-empty pages */
#main {
margin-left: auto;
margin-right: auto;
width: 70em;
}
/* So we move the #main container over the sidebars to compensate */
body.sidebar-left #main {
margin-left: -210px;
display:none;
}
body.sidebar-right #main {
margin-right: -210px;
display:none;
}
body.both-sidebars #main {
margin: 0 -210px;
display:none;
}
#squeeze {
/* position: relative; */
padding: 0 1em;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
display:none;
}
body.sidebar-right #squeeze {
margin-right: 210px;
display:none;
}
body.both-sidebars #squeeze {
margin: 0 210px;
display:none;
}

/* We ensure the sidebars are still clickable using z-index */
#container .sidebar {
margin: 0 0 5em;
width: 210px;
float: left;
z-index: 2;
position: relative;
display:none;
}
#container .sidebar .block {
margin: 0 0 1.5em 0;
}
#sidebar-left .block {
padding: 0 15px 0 0px;
}
#sidebar-right .block {
padding: 0 0px 0 15px;
}
.block .content {
margin: 0.5em 0;
}
#footer {
float: none;
clear: both;
margin: 4em 0 -3em;
}

Thursday, January 17th, 2008 - 4:04 pm
  • dhleach
  • dhleach's picture

Taking your advice and with some experimentation, I was successfully able to come up with this CSS that I now put at the beginning of each page I want a single-column layout on:

<style type="text/css">
<!--
/* Single Column Layout */
/* Get rid of the title, view/edit tabs, breadcrumbs, nav bar and its background */
h1.title {display:none;}
ul.primary {display:none;}
div.breadcrumb {display:none;}
#container .sidebar {display:none;}
/* body.sidebar-left #main {display:none;} --> This prevents whole body from showing */
body.sidebar-right #main {display:none;}
body.both-sidebars #main {display:none;}
/* body.sidebar-left #squeeze {display:none;} --> This prevents whole body from showing */
body.sidebar-right #squeeze {display:none;}
body.both-sidebars #squeeze {display:none;}
.both-sidebars #container, .sidebar-left #container {background:#FFFFFF;}

/* neaten up the margins */
body.sidebar-left #main {margin:0 0 0 0;}
body.sidebar-left #squeeze {margin:0 0 0 0;}
div#squeeze {padding:0 0 0 0;margin:0 0 0 0;}
div#main.column {padding:0 0 0 0;margin:0 0 0 0;}
div#container.clear-block {padding:10px 10px 0px 10px;margin:30px auto 0 auto;}
div#asu_container {padding:0 0 0 0;margin:0 0 0 0;min-width:880px;}

-->
</style>

Adding text-only content, I now have this:

The light gold area shows where my content is while the purple area shows the rest of the area in between the header and footer.

The great thing about this is that I didn't edit ANY of my template files!
(ASU Zen Theme 5.x-1.3, 2007-09-08)

Wednesday, October 21st, 2009 - 9:21 pm
  • ltennis

Thanks for such feedback! This is truly what makes this forum so great.
Your advice was helpful to come up with coding. I was able to form this other layout on:

This prevents whole body from showing */ body.sidebar-right #main {display:none;} body.both-sidebars #main {display:none;} /* body.sidebar-left #squeeze {display:none;} --> This prevents whole body from showing */ body.sidebar-right #squeeze {display:none;} body.both-sidebars #squeeze {display:none;} .both-sidebars #container, .sidebar-left #container {background:#FFFFFF;} /* neaten up the margins */ body.sidebar-left #main {margin:0 0 0 0;} body.sidebar-left #squeeze {margin:0 0 0 0;} div#squeeze {padding:0 0 0 0;margin:0 0 0 0;} div#main.column {padding:0 0 0 0;margin:0 0 0 0;} div#container.clear-block {padding:10px 10px 0px 10px;margin:30px auto 0 auto;} div#asu_container {padding:0 0 0 0;margin:0 0 0 0;min-width:880px;} -->

input this into html and it does work well!

Lenny Tennis
colodetox xr