Making a start page - your ideas please

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
quentin2

Making a start page - your ideas please

Post by quentin2 »

hello everyone,

I love this CMS and i'm willing to test this a little.
I've decide to try to make a demo site.

I'm not good with templates and i'm looking for some help.
I'm a little better with PHP but don't ask me to talk php either.
I've read through all the threads and help pages here but i'm unsure on how to get started.

I just want to try out a main page
I want to make a layout like the one in the attachement in this post.
Basically nothing too special,
1. A banner
2. Navigation bar
3. 5 different places for content in the main bloc. I want to be abe to edit these block individually as different content. I hope that the CMS will allow me to recognise these blocks as different content holders.

i'm unsure how to make this happen.
I mean i can get sorted the tables but i don't know how to have 5 different content sections.

Let me know if you have ideas on this. Thanks ;)

[attachment deleted by admin]
Last edited by quentin2 on Sun Jan 29, 2006 9:31 am, edited 1 time in total.
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Making a start page - your ideas please

Post by kermit »

this spiffy template at openwebdesign.org should give you some inspiration: http://tinyurl.com/bsypq

hint: you can make new column width styles, such as:

Code: Select all

/* pairs with an existing onethirdcolumn style */
.twothirdscolumn { float: left; width: 66% }

/* not used in this example, but pairs with existing onequartercolumn style */
.threequarterscolumn { float: left; width: 74.5% } 
and then replace the content inbetween and with something like this:

Code: Select all

<div class="rowcontainer"><!-- start top row -->
<div class="halfcolumn">
<h3>Section Title</h3>
<p>Top Left Content</p>
</div><!-- /halfcolumn -->

<div class="halfcolumn">
<h3>Section Title</h3>
<p>Top Right Content</p>
</div><!-- /halfcolumn -->
</div><!-- /rowcontainer (top row) -->

<div class="rowcontainer">
<div class="twothirdscolumn">
<h3>Main Section Title</h3>
<p>Main Content Goes Here</p>
</div><!-- /twothirdscolumn -->

<div class="onethirdcolumn">
<div><!-- begin top row sidebar -->
<h3>Sidebar Title</h3>
<p>While only one DIV, you can insert multiple CMSMS content blocks within it, or 
include DIV's inside this one to hold the content.</p>
</div><!-- end top row sidebar -->
<div><!-- begin middle row sidebar -->
<h3>Sidebar Title</h3>
<p>While only one DIV, you can insert multiple CMSMS content blocks within it, or 
include DIV's inside this one to hold the content.</p>
</div><!-- end middle row sidebar -->
<div><!-- begin bottom row sidebar -->
<h3>Sidebar Title</h3>
<p>While only one DIV, you can insert multiple CMSMS content blocks within it, or 
include DIV's inside this one to hold the content.</p>
</div><!-- end bottom row sidebar -->
</div><!-- /onethirdcolumn -->
</div><!-- /rowcontainer (main content row) -->
the above, with a little random gibberish thrown in to fill it up, and it looks like:

Image

i used three blocks of content on the right sidebar, but that could easily be one, two or ten. no big. with six blocks total on a page (like the above example) and an editor enabled, it does take a bit to initialize all those edit blocks when you bring up the page editor in the admin area.

of course, the typed sample content above would be replaced with the cms made simple code that pulls the content from the database...

{content}
{content block='topleft'}
{content block='topright'}
{content block='sidetop'}
{content block='sidemiddle'}
{content block='sidebottom'}

if any content will be the same, you can use html_blobs instead of editing each page's content area. just make a blob and insert the html_blob code in the edit block of the pages you want it to appear; or if it's in the same place on each page, you can insert it right into the template instead.

and to build the rest of the template, just look at one of the default templates for code to insert that displays the title, links the stylesheet, inserts the meta data, etc.

the navigation bar (the template uses 'tab' links) style can be changed fairly easily. and once you get the 'look' you want, it's very simple to create different page layouts (columns & rows of content), while using the same stylesheet. it's actually a pretty versatile table-free template
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
quentin2

Re: Making a start page - your ideas please

Post by quentin2 »

wow :o Kermitt, that's exactly what i need.

a few points:
I need to figure out how to place the images and background as well. I really don't know how to do that yet.
It also looks like this template has its own navigation, it looks neat.

I'll start to play with some of that code
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Making a start page - your ideas please

Post by kermit »

header and footer images are background images referenced in the stylesheet, as is background and font colors, and well, everything really. setting a background image position to top left or top right and no repeat would duplicate a 'banner'. or you can remove that background image and just insert a regular image into the template.

the 'sample pic' in the middle is in the content with a class applied to it to align it left or right (relative to whatever 'section' it's in.  easy enough to add as you're editing a content block.

you will have to hack the styles for the nav bar to reflect the styles output by the cmsms menu templates (or create your own)...  and that'll be the 'fun' part. i actually had this baby converted into cmsms, but i have no idea where it is.

cursed 100+ gig drives.  :o
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Locked

Return to “Layout and Design (CSS & HTML)”