CSS Wireframe Needed

Permalink
Guys and Gals... I have been trying to either find or make a 3 column site that will work with Concrete5. I love Concrete but the only issue I have is creating a template in CSS that will work with Concrete and its modules. See the attached image for an example of what I am looking for.

It may be easy for some but CSS is not my strong point.

I would settle for a great 3 column template that is editable or if I can have someone whip one up or ?? I can send a few $$ using paypal if necessary but I cannot afford a whole lot.

1 Attachment

 
boomgraphics replied on at Permalink Reply
boomgraphics
Easy, buy a theme from the marketplace, or get one of the free ones. :-)
JohntheFish replied on at Permalink Reply
JohntheFish
You could start with a grid builder like YUI
http://developer.yahoo.com/yui/grids/builder/...
Then drop the C5 area codes into the relevant sections (header, sidebar, main). There are other grid frameworks out there that are arguably better code, but this one is probably the easiest for a quick outline.

Once you have it, you can probably get rid of a lot of bloat in the YUI css file and trim it down to just the classes used in the layout you end up with.

Then you need an area name for your second sidebar - which is something I have been wondering - is there a C5 themeing convention for naming a second sidebar?
beebs93 replied on at Permalink Reply
beebs93
JohntheFish's idea is a great way to get into CSS frameworks. YUI and BluePrint come to mind right away, but whichever is the easiest for you to pick up; just do your research first.

As was hinted, you'll eventually learn what the core rules are and may want to trim the fat to keep everything streamlined.

A quick fix is just to get a theme from the marketplace (as boomgraphics suggested), but someday you'll want to build your own theme so it's better if you get started as early as possible.
Steevb replied on at Permalink Reply
Steevb
Hi,

To have a three column layout, try this.

HTML:
<div class="sidebar1"><? $a = new Area('Sidebar1');$a->display($c);?></div>
<div class="content"><? $a = new Area('Main');$a->display($c);?></div>
<div class="sidebar2"><? $a = new Area('Sidebar2');$a->display($c);?></div>



CSS:
.sidebar1 {
   float: left;
   width: 180px;
   background: #FFF;
   padding-bottom: 10px;
}
.content {
   padding: 10px 0;
   width: 600px;
   float: left;
}
.sidebar2 {
   float: left;
   width: 180px;
   background: #FFF;



@John, you can have as many 'areas' as you want. Just make sure they are all named differently.
I think there are two you need to keep as default: 'Header Nav' and 'Main' for C5 to work properly?

Hope that helps.
JohntheFish replied on at Permalink Reply
JohntheFish
My speculation about naming the second sidebar was to do with convention, rather than whether it was possible. By sticking with a convention, it makes it easier to swap themes without areas disappearing.

Outside of C5, some environments have the convention (across 3 columns) Navarea, Main, Sidebar; Others have Left, Main, Right (which I dislike as it implies position); and I have also seen Sidebar, Main, Complementary.

While all of these are obviously possible in C5, it makes sense for flexibility and maintainability to standardise, and to standardise on semantic names rather than positional names, hence Sidebar, Main, {what?}. Is there a convention for {what?}.
sabumnimdk replied on at Permalink Reply
sabumnimdk
Hi Randall

There are a lot of free templates utilizing a three column spread.

You could easily download one or more templates that are already made and designed, and then change the minor details your self.

Or you could fetch one that is plain and simply coded, using html and css.

Here are some links for you to look at:
http://www.maxdesign.com.au/articles/css-layouts/...
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html...

Best of luck with the project

Greetings from Denmark
//Carsten