plainblack.com
Username Password
search
Bookmark and Share

Making a Page Layout Part of Your Design

WebGUI already comes with about a dozen different page layouts to help you organize content on your pages, ranging from Side By Side to Three Over One, Left Column, Right Column and more. But occasionally there is a need to really integrate your page layout into your style template, so much so, in fact, that you just can't get exactly what you need out of using one of the page layout templates that comes with WebGUI.

 

The Example

 

 

If you've ever visited Plain Black's site and have checked out the page for the WebGUI Users Conference (WUC), then you have most likely seen this page.

 

You'll notice there are several pieces of content in the layout: the column at the left, the 3 gray areas at the right, and one at the bottom. All of these are organized using a customized page layout that was specifically designed to work only with this WUC design. With admin-mode on, you'll start to see how this page is laid out.

 

Admin Mode On

 

 

Notice that all of these fields are articles, from the “WebGUI Users Conference 2007” on the left to the articles placed in the gray boxes at the right. Clearly a regular page layout couldn't handle this level of complexity, so how was it managed?

 

The answer is with a little CSS and a customized Page Layout Template.

 

Page Layout Template

 

Like many of the examples, CSS is the primary factor in making this page layout work. But before that's discussed, the custom template that was created in order for the CSS to do its job should be covered. The template is fairly long, so it will be analyzed in several chunks, starting with a “wrapper.”

 

Template Code – Chunk 1

 

<div id="WUC_hotlinks">

 

</div>

 

The first important piece is this one, a wrapping <div> tag. The three gray boxes at the left are going to be nested within these tags. It was also given a simple ID, “WUC_hotlinks.” ID's are completely unique, so you know that only one of these will be on the page. In general, it's a good idea to wrap invididual projects within a wrapper div tag. This will give you a greater level of control than just having your code outside of one.

Note: If you're unsure how nesting works, see the chapter on Bulletted Lists.

 

Template Code – Chunk 2

 

<div id="WUC_hotlinks">

<div id="tickets">

<div class="linkOverflow">

<tmpl_if showAdmin>

<table border="0" id="position1" class="content">

<tbody>

</tmpl_if>

 

<tmpl_loop position1_loop>

<tmpl_if showAdmin>

<tr id="td<tmpl_var id>"><td>

 

<div id="td<tmpl_var id>_div"

class="dragable">

</tmpl_if>

 

<div class="content"><tmpl_var dragger.icon>

<tmpl_var content>

</div>

 

<tmpl_if showAdmin>

</div></td></tr>

</tmpl_if>

</tmpl_loop>

 

<tmpl_if showAdmin>

</tbody></table>

</tmpl_if>

</div>

</div>

 

...

 

</div>

 

This is a fairly large chunk of code, but in reality there isn't that much that you need to concern yourself with. There are two more nested <divs>, one with the ID of “tickets”, and one with the class of “linkOverflow.” Respectively, “tickets” is the gray box in the upper right corner of the design, the one that has the header of (of course) Tickets.

 

The next <div> tag performs a function that's vital for this design to work. It's wrapping all of the content within the Tickets div into a div that has overflow, meaning all of the content within it can be made to not show up in the space defined. If that doesn't make much sense, just hang on. More CSS will be covered soon.

 

Some of the code is completely unchanged from any Page Layout template you may have seen in WebGUI. All of it controls the ability to drag items into and out of this particular Tickets box, as well as display content within.

 

It isn't important to understand everything behind it, but take special note of the within the “position1”. This is very important, because every area in the page layout that will have unique information will need to have a different number for its position. This will become more clear as additional code examples are given.

 

Template Code – Chunk 3

 

<div id="WUC_hotlinks">

...

<div id="hotels">

<div class="linkOverflow">

<tmpl_if showAdmin>

<table border="0" id="position2" class="content">

<tbody>

</tmpl_if>

 

<tmpl_loop position2_loop>

<tmpl_if showAdmin>

<tr id="td<tmpl_var id>"><td>

 

<div id="td<tmpl_var id>_div"

class="dragable">

</tmpl_if>

 

<div class="content"><tmpl_var dragger.icon>

<tmpl_var content>

</div>

 

<tmpl_if showAdmin>

</div></td></tr>

</tmpl_if>

</tmpl_loop>

 

<tmpl_if showAdmin>

</tbody></table>

</tmpl_if>

</div>

</div>

...

 

</div>

 

Immediately after the Tickets div is this one, “hotels.” This controls the second box on the right side, Hotel Information. You'll notice that the code here is almost identical to the code for Tickets. The only difference is the ID, and that the position is now “position2.”

 

You should also note that again the “linkOverflow” class is called, but as you'll discover later, even though a classname is being used to define this particular <div>, each instance of it will have unique attributes.

 

Template Code – Chunk 4

 

<div id="WUC_hotlinks">

...

<div id="workshops">

<div class="linkOverflow">

<tmpl_if showAdmin>

<table border="0" id="position3" class="content">

<tbody>

</tmpl_if>

 

<tmpl_loop position3_loop>

<tmpl_if showAdmin>

<tr id="td<tmpl_var id>"><td>

<div id="td<tmpl_var id>_div"

class="dragable">

</tmpl_if>

 

<div class="content"><tmpl_var dragger.icon>

<tmpl_var content>

</div>

 

<tmpl_if showAdmin>

</div></td></tr>

</tmpl_if>

</tmpl_loop>

 

<tmpl_if showAdmin>

</tbody></table>

</tmpl_if>

</div>

</div>

...

 

</div>

 

This block comes immediately after the Hotel <div>. Obviously, it is almost exactly the same as the other two boxes, only there is a different ID and the position has been incremented to position 3.

 

With this last block, enough XHTML has been set up for our CSS to work. But, this is only the first three columns on the right, what about the column on the left and content beneath it?

 

Template Code – Chunk 5

 

<div id="WUC_hotlinks">

...

</div>

 

<div class="frontPage">

<tmpl_if showAdmin>

<table border="0" id="position4" class="content">

<tbody>

</tmpl_if>

 

<tmpl_loop position4_loop>

<tmpl_if showAdmin>

<tr id="td<tmpl_var id>"><td>

 

<div id="td<tmpl_var id>_div" class="dragable">

</tmpl_if>

 

<div class="content"><tmpl_var dragger.icon>

<tmpl_var content>

</div>

 

<tmpl_if showAdmin>

</div></td></tr>

</tmpl_if>

</tmpl_loop>

 

<tmpl_if showAdmin>

</tbody></table>

</tmpl_if>

</div>

 

This is probably starting to look a little repetitive by now. Again, there is very little difference between this block and the previous three, only this time there is a class called “frontPage,” and the position has been incremented to 4.

 

There isn't a “linkOverflow” nested div like there was for the other three positions. That may seem a little strange, but you'll see quickly that it doesn't actually need the added control for this column like for the gray boxes on the left.

 

There's only one last piece left, and you'll find it comfortingly familiar.

 

Template Code – Chunk 6

 

<div id="WUC_hotlinks">

...

</div>

<div class="frontPage">

...

</div>

<div>

<tmpl_if showAdmin>

<table border="0" id="position5" class="content">

<tbody>

</tmpl_if>

 

<tmpl_loop position5_loop>

<tmpl_if showAdmin>

<tr id="td<tmpl_var id>"><td>

 

<div id="td<tmpl_var id>_div" class="dragable">

</tmpl_if>

 

<div class="content"><tmpl_var dragger.icon>

<tmpl_var content>

</div>

 

<tmpl_if showAdmin>

</div></td></tr>

</tmpl_if>

</tmpl_loop>

 

<tmpl_if showAdmin>

</tbody></table>

</tmpl_if>

</div>

 

As you can see, this is virtually identical to the “frontPage” <div>, only there isn't a div ID or class specified! It certainly could have been given either, but in this example it's not needed.

 

The only thing of note here is the position has once again been incremented, this time to five. There's only one last piece to address, and then the CSS will be examined.

 

Note: In general, it's a good idea to specify class names and IDs for most <div> elements that serve as a wrapper for content.

 

 

Template Code – Chunk 7

 

<div id="WUC_hotlinks">

...

</div>

<div class="frontPage">

...

</div>

<div>

...

</div>

<tmpl_if showAdmin>

<table><tr id="blank" class="hidden"><td><div><div class="empty">&nbsp;</div></div></td></tr></table>

<tmpl_var dragger.init>

</tmpl_if>

 

This last bit of the template is found at the bottom of every page layout template in WebGUI. Without this last piece at the bottom of the template, you wouldn't be able to drag any articles, collaboration systems, polls, etc. around the page. Make sure you always have this in your page layout templates!

 

Note: Often, you won't notice at first that anything is wrong with your template if you forget this last bit of code. The page will look fine, but if you can't drag any items around the screen, even though they are unlocked, it's a sure bet that this code was left out of your template.

 

Page Layouts + CSS = Pretty (Right Column)

 

It should be pretty clear that this template is relatively simple in scope. There are three important pieces: the “hotLinks,” “frontPage” <div>'s, and the <div> tag that follows them both. CSS is used to piece together the whole thing. First, focus on the right column, “hotLinks.”

 

 

The area outlined in red contains all of the "hot links". You'll notice that the area is a square, yet the links are staying within the curve of the design. How was that managed? Well, this is where the extra “linkOverflow” classes start to come into play.

 

Start by reviewing the CSS in the template.

 

hotLinks and tickets CSS

 

#WUC_hotlinks {

position:absolute;

right:0px;

top:190px;

}

#tickets {

background: url(^FileUrl(images/tickets.jpg);)

no-repeat top left;

width:390px;

height:113px;

position:relative;

}

#tickets .linkOverflow {

top:45px;

position:relative;

overflow:auto;

height:60px;

left:5px;

width:325px;

padding-right:10px;

}

 

The first selector is targeting the “WUC_hotLinks” ID for the <div> tag containing the three gray boxes. Its code is extremely simple as the only concern is its positioning.

 

The box is being absolutely positioned all the way to the right hand side of the screen, hence the “right:0px” property. This is telling the <div> tag to be zero pixels from the right side of the design. The top attribute is pushing the tag 190 pixels from the top of the design. And just like that, hotLinks has been laid on top of the design.

 

Note: Generally, you have to use the z-index property to lay an element on top of another, but since this CSS comes after the CSS that controls the style template, it shows up on top of it.

 

That's all well and good, but that doesn't explain the rest of the design. How did the nice little areas get set up for each section?

 

Take a look at the “tickets” ID. It's specifying a background for this particular <div> tag, as well as a height and width for it. It just so happens the background graphic is exactly the same size as the width and height mentioned here. Take a look.

 

Height and Width of Tickets Background

 

 

 

The next line is where a lot of the magic happens, #tickets .linkOverflow. This part of the CSS is actually defining the area within the Tickets <div> that holds the content for position1. All of the settings here are positioning the content within the little 390 pixel by 105 pixel space. For the purpose of illustration, a slight border has been placed around it.

 

linkOverflow area

 

 

So that little area within the Tickets div is all that's actually visible. If you look at the different settings for .linkOverflow, you'll see all of them are designed to give some padding to the <div>, move it a little from the top and left. It's also not as wide or high. Enough spacing has to be given around this tag for appearance and to make the text look good.

 

The main function of this area is less about spacing, and more about overflow. Since this is a small box in an otherwise large design, something needs to prevent the gray box from expanding. The design couldn't handle it because of the purple curve at the left hand side, not to mention the boxes underneath it. By setting the overflow to auto, adding more text won't stretch the box, it will just bring up scrollbars so users can view it. Here's an example.

 

Overflow area with scrollbars

 

 

The boxes for Hotel Information and for Workshops are coded in almost exactly the same way, only the padding and positioning are different. They still should receive attention though.

 

Hotels and Workshops CSS

 

#hotels {

background: url(^FileUrl(images/hotel.jpg);)

no-repeat top left;

width:390px;

height:105px;

position:relative;

}

#hotels .linkOverflow {

top:35px;

position:relative;

overflow:auto;

height:60px;

left:5px;

width:305px;

padding-right:10px;

}

 

#workshops {

background: url(^FileUrl(images/workshops.jpg);)

no-repeat top left;

width:380px;

height:110px;

padding:5px;

position:relative;

}

#workshops .linkOverflow {

top:35px;

position:relative;

overflow:auto;

height:60px;

left:5px;

width:290px;

padding-right:10px;

}

 

 

Aside from a few pixel values and different backgrounds, these four properties are very similar. The important piece to notice is that both of them have their own individual linkOverflow class. This was done in a way so more control could be exercised over each one of those separate areas. The text areas for each of these is of a different size and shape, so one global class wouldn't do the trick.

 

You could definitely make an argument for not even making .linkOverflow a class. It should probably be an ID since they are unique and they won't be reused on the page. Eventually, this is a call that is up to the designer. Using a class instead of an ID works fine in this situation, but there may be a time, particularly if you want to work with DHTML, that this setup may not fit the bill.

 

Take a brief look at the shapes for each of these sections, just so you can see the need for all the individual declarations.

 

Tickets, Hotels and Workshops

 

 

The areas outlined in blue are the three ID's, #tickets, #hotels and #workshops. Notice that they all extend into the purple area because all of them are actually laying on top of the design. This will be illustrated in more detail.

 

The areas in red are each of the individual .linkOverflow classes. Obviously they aren't the same size, and they are each in slightly different positions. This is why just one class wouldn't do.

 

Page Layouts + CSS = Pretty (Left Column)

 

Great detail has been covered on how the right column works, now the left column will be discussed. This is very simple by comparison, especially since it uses some of the concepts already talked about.

 

Left Column

 

 

Note: Assigning bright colors to your classes can really help when you're trying to debug your code. Every border used in these examples was created with CSS and not a graphic editing program.

 

There is very little code necessary to get the left column up and running.

 

frontPage CSS

 

.frontPage {

width:48%;

height:320px;

overflow:auto;

margin-bottom:30px;

padding-right:10px;

position:relative;

}

 

 

The red-outlined area is the left column, and as you can see it has a scrollbar. The CSS is quite simple. All you're doing is giving a specified width and height to this column and then giving it the “overflow:auto” property, just like the boxes in the right column.

 

Remember that the “hotLinks” area is actually laid on top of the design? Well, if a width for the left column wasn't specified this would happen:

 

No width set for frontPage

 

 

The left column is partially underneath the hotLinks area. To make sure that doesn't happen, set a width on this column to make space so that when hotLinks gets laid on top of the layout it won't cover anything.

 

The width was set to be “48%”, just shy of half the width of the design. It's usually a good idea to use percentage widths instead of pixel widths if you can manage it. Because the style template design is a fixed width, a pixel value probably would have worked here, but it's best to be cautious and consistent with your coding.

 

Page Layouts + CSS = Pretty (Bottom)

 

With all this talk about the columns, the bottom section of the layout where the WUC Wiki appears has been passed over. This actually doesn't need any special code.

 

 

Notice that one of frontPage's properties is “position:relative.” This keeps it in the flow of the document. It was also given a bottom margin of 30 pixels. That means that anything that appears on this page that comes after .frontPage class will naturally appear underneath it, and it will be 30 pixels away. And voila! The last piece.

 

To sum things up, take a look at the page without the layout just so you can see what it looks like underneath all of the code with admin mode on.

 

 

 

 

 

 

Conclusion

 

Obviously, these types of layouts shouldn't be used throughout an entire website. This would be a poor layout to use on every page, but as a stand alone layout it works great for a landing page.

 

Even though one of WebGUI's greatest advantages is the idea of reusable code, that doesn't mean that absolutely everything you create has to be made to be used over and over again. Sometimes there are instances where maybe you create a custom look for a single collaboration system, article, or in this case, a page layout.

Keywords: css html javascript page layout Templates

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved