Beginner needs help with template found on web

[thumbsucker]

Hi,

I found a style sheet and template on the web that I really like.  He includes a screen CSS, a print CSS, an index.html, and an images folder.

I can't seem to figure out how to replicate his look using CMS made simple.  I added the CSS but what do I use for the Template itself?

Does anything need to be modified to make it work with CMS made simple?  I guess I'm just really lost on this templates/CSS thing, even after reading the documentation.


The style sheet is here:

Version: 1.0
(July 27, 2005)

Screen layout: */

body {
padding: 0;
margin: 0;
font: 76% tahoma, verdana, sans-serif;
background: #e0e0e0;
color: #303030;
}

a {
text-decoration: none;
color: #286ea0;
}

a:hover {
text-decoration: underline;
}

#toptabs {
margin: 10px auto -13px auto;
font-size: 0.8em;
width: 760px;
}

#toptabs p {
text-align: right;
color: #808080;
}

.toptab {
text-decoration: none;
background: #f0f0f0 url('images/corner2.gif') no-repeat top right;
color: #808080;
border-bottom: 1px solid #e0e0e0; margin-left:4px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:5px; padding-right:5px; padding-top:3px; padding-bottom:3px
}

.toptab:hover {
background: #fafafa url('images/corner2.gif') no-repeat top right;
border-bottom: 1px solid #eaeaea;
color: #505050;
text-decoration: none
}

.activetoptab {
color: #505050;
text-decoration: none;
background: #ffffff url('images/corner2.gif') no-repeat top right;
border-bottom: 1px solid #ffffff; margin-left:4px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:5px; padding-right:5px; padding-top:3px; padding-bottom:3px
}

.activetoptab:hover {
text-decoration: none;
}

#container {
margin: 0 auto 15px auto;
width: 760px;
padding: 5px 20px 20px 20px;
background: #ffffff;
}

#logo {
margin: 15px 0 0 0;
}

#logo h1 a {
color: #303030;
}

#logo h1 a:hover {
text-decoration: none;
}

#navitabs {
clear: both;
}

.navitab {
text-decoration: none;
letter-spacing: 1px;
background: #e0e0e0 url('images/corner.gif') no-repeat top right;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:8px; padding-right:8px; padding-top:4px; padding-bottom:4px
}

.navitab:hover {
text-decoration: none;
background: #d0d0d0 url('images/corner.gif') no-repeat top right;
}

.activenavitab {
color: #ffffff;
text-decoration: none;
background: #505050 url('images/corner.gif') no-repeat top right;; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px; padding-left:8px; padding-right:8px; padding-top:4px; padding-bottom:5px
}

.activenavitab:hover {
text-decoration: none;
}

#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url('images/front.jpg') no-repeat top left;
clear: both;
margin-left:0; margin-right:0; margin-top:5px; margin-bottom:0
}

#desc p {
width: 290px;
font-size: 1em;
line-height: 1.3em;
padding: 0 0 0 15px;
}

#desc h2 {
padding: 15px 15px 0 15px;
color: #ffffff;
}

#desc a {
color: #ffffff;
text-decoration: underline;
}

#main {
width: 590px;
float: left;
padding: 0 15px 0 0;
border-right: 1px solid #d0d0d0;
}

.block {
background: #f0f0f0;
padding: 15px;
}

#sidebar {
width:140px;
float:right;
}

#sidebar p {
font-size: 0.9em;
line-height: 1.3em;
margin: 0 0 12px 0;
}

.sidelink {
text-align: left;
display: block;
width: 120px;
background: #f0f0f0 url('images/corner.gif') no-repeat top right;
margin-left:0; margin-right:10px; margin-top:5px; margin-bottom:5px; padding-left:8px; padding-right:4px; padding-top:3px; padding-bottom:3px
}

.sidelink:hover {
background: #e0e0e0 url('images/corner.gif') no-repeat top right;
text-decoration: none
}

#footer {
clear: both;
background: #fafafa;
color: #808080;
font-size: 0.9em;
padding: 8px 0 8px 0;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
text-align: center;
}

#footer a {
color: #808080;
}

h1 {
margin: 0 0 20px 0;
font-size: 2.1em;
font-weight: normal;
}

h2 {
margin: 0 0 20px 0;
font-size: 1.6em;
font-weight: normal;
}

h3 {
margin: 20px 0 10px 0;
font-size: 1.4em;
font-weight: normal;
}

p {
margin: 0 0 15px 0;
line-height: 1.5em;
text-align: left;
}

.right {
text-align: right;
}

a img {
border: 0px none;
}

.photo {
padding: 5px;
display: block;
margin: 0 auto 15px auto;
background-color: #f0f0f0;
}

.hide {
display: none;
}


The index.html is here:










andreas02




Site Network:
Personal |
My Company |
Artist projects |
Shop




andreas02



Site menu:
Welcome |
Bio |
Discography |
Downloads |
Photos |
Tour |
Merchandise |
Interviews



Welcome to andreas02!
This is my second design made for OSWD.org, and this time it is a 2-column layout featuring two versions of my own CSS tab menu. The design is made with XHTML and CSS, and it has no tables. To give some suggestions on how the design can be used, I have filled it with some example content.
Read more...

   

The idea behind the design:
I run several websites on different domains, and they are all connected in various ways. One website is my personal site, and it has a lot of links to my company website, which shares a lot of content with my studio and artist websites. Despite this, all the sites have different designs and different functionality - and it is all one big mess to keep track of it all. Are you familiar with the situation? Then read on!

When it was time to redesign one of the sites, I got an idea about making a standard design that all of my sites could use and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites can have the same design and share the same toptabs - but they can have their own separate content. The final touch to it would be to give each site a color scheme of its own. The personal site has blue colors, the company site is green, the artist site is red and so on.

Please note: As with all designs I publish on my page at OSWD.org, I have not aimed at making any kind of trendy or shiny design. I prefer to keep it clean and simple, and let others add the details that will make the design special and unique. However, the design has some useful built-in features, such as a print CSS and full functionality when degrading to no-CSS mode. You can use the design as it is, but I recommend that you play around with it. Add things, remove things, let your creativity flow!
   
An open source design!
If you like this layout and would like to use it in any way, you are free to do so. This is an open source web design, and all I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you would like professional help with anything related to this layout (such as custom design, branding, scripting or programming), please contact me through OSWD.org or through my website for more information.

Version: 1.0 (July 27, 2005)



More information:
Do you want more information about this design (and other designs I have released)? Then you should check out these pages:

My website |
My OSWD.org page |
Valid XHTML |
Valid CSS

Random image:


Wise words:
"It happens every day: information overload! Time for a reboot..."

(traditional haiku poem)

   

[Ted]

Make a new template.  Call it andreas02.  Paste index.html into the textarea.  Now, just replace parts.

#1
Replace

Code: Select all

<link rel="stylesheet" type="text/css" href="andreas02.css" media="screen" title="andreas02 (screen)" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

with

Code: Select all

{stylesheet}

#2  Replace the content section

Code: Select all

<h3>The idea behind the design:</h3>
<p>I run several websites on different domains, and they are all connected in various ways. One website is my personal site, and it has a lot of links to my company website, which shares a lot of content with my studio and artist websites. Despite this, all the sites have different designs and different functionality - and it is all one big mess to keep track of it all. Are you familiar with the situation? Then read on!</p>

<p>When it was time to redesign one of the sites, I got an idea about making a standard design that all of my sites could use and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites can have the same design and share the same toptabs - but they can have their own separate content. The final touch to it would be to give each site a color scheme of its own. The personal site has blue colors, the company site is green, the artist site is red and so on.</p>

<p class="block"><strong>Please note:</strong> As with all designs I publish on <a href="http://oswd.org/userinfo.phtml?user=Andreas">my page at OSWD.org</a>, I have not aimed at making any kind of trendy or shiny design. I prefer to keep it clean and simple, and let others add the details that will make the design special and unique. However, the design has some useful built-in features, such as a print CSS and full functionality when degrading to no-CSS mode. You can use the design as it is, but I recommend that you play around with it. Add things, remove things, let your creativity flow!</p>
   
<h3>An open source design!</h3>
<p>If you like this layout and would like to use it in any way, you are free to do so. This is an <a href="http://oswd.org">open source web design</a>, and all I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you would like professional help with anything related to this layout (such as custom design, branding, scripting or programming), please contact me <a href="http://oswd.org/email.phtml?user=Andreas">through OSWD.org</a> or through my website for more information.</p>

with

Code: Select all

{content}

Then, attach the stylesheet you created to the template.  You do that by clicking the css icon (next to copy and edit) in the template list.

The only other thing that require work are the images.  Either, you a) upload them via FTP/copy them into the /images directory, or b) upload them all via the image manager and change all references in the stylesheet from images to uploads/images.

I hope that helps you get on your way...

[thumbsucker]

Thanks!

That was totally helpful!

I have another dumb question though.

The 2 header menus and the 3rd column box/text are now hard coded into my template.  In other words, they show up on every page I create with this template.

What would be the most effective way to create additional pages where the 2 header menus and the 3rd column box/text appear different?

I guess I'm confused on how to create menus change.  Thanks.

[kermit]

having the menus change requires using a menu template. and whichever stock menu template you use, the css for it (that you attach to the template file to make it 'work'), and perhaps template file itself, will need changes to match the template. that's the "fun" part when porting an existing template. 


and as far as the 2nd content areas go.. you can add news, html_blobs, or a second editable content block to the template so each page can be different.

{cms_module module='news' number='5' category='general'}

{html_blob name='some blob name'}

{content block='block1'}

you can create multiple copies of the template, each with a different content structure (news on one, a blob on another, etc...) and assign different templates to different pages.

[thumbsucker]

Thanks Kermit.

So here are the two header menus that Andreas created as a sample on his template (which is now found in "my" 1st and only template):



Site Network:
Personal |
My Company |
Artist projects |
Shop




andreas02



Site menu:
Welcome |
Bio |
Discography |
Downloads |
Photos |
Tour |
Merchandise |
Interviews


Should I leave this in my template, create a new template for each menu category, make this into an HTML blob and paste the blob into every page to recreate the menus, or something else?  What would be the standard operating procedure for re-creating a menu on every page?


Also, in terms of the column 3 box, should they actually be a part of my template? Because I can't seem to edit their content from the content page itself.

[kermit]

you can take out the included menus and use one of the stock ones, like ellnav, in a horizontal alignment to replace them. you'd have some work ahead of you (the "fun" part i referred to) to get the stock menu to look right or mimic the original design.  use could also use ellnav vertically to replace the vertical menu on the right side of the original template.

you could use hard-coded menus and insert them as blobs into different copies of the template. you may find that easier than pulling your hair out over the css. that's not a bad idea and you can pat yourself on the back for figuring that one out!


the 'alternate' content areas. you can replace that original content in the sidebar and footer divs with blobs, content blocks, news, a menu, or other module. 

such as your 'home' or 'index' page containing 'headlines' of the last 5 posted news items, a blob underneath that and another in the footer:


{cms_module module='news' number='5' category='general'}
{html_blob name='some blob name'}


{html_blob name='footer'}


and every other page skips the 'headlines' and a 2nd content area; except page XYZ which has 2 blobs & the news 'headlines' on it. create copies of the template and change the above as appropriate, assigning those each variant to the pages you want them on.


extra content areas show up when you edit a page's content (and that page's template has more than one content area defined), html_blobs are edited in the blobs (global content blocks) area. if you're typing in a content area and you'd like to insert a blob, just type in the code for the blob and it will show up in-line with any other content you've put in that content area.

[wipeout]

Did you have any success getting the andreas02 menu to work? I'm using the same template and I'm not quite sure what I should do with the menus. I have the newest version of CMSMS with the new Template Manager. I guess I have to edit the ellnav template, but how? Are there any instructions on the $node->foo calls?

[wipeout]

I did it , I have the menu working now. I'll try to explain what I had to do:

1. Made a new Database Template with Menu Manager. I named the template "andreas02 Nav" and it looks like this:

Code: Select all

{if $count > 0}
<h2 class="hide">Site menu:</h2>
{foreach from=$nodelist item=node}
{if $node->current == true}
<a class="activenavitab" href="{$node->url}">{$node->menutext}</a><span class="hide"> | </span>
{else}
<a class="navitab" href="{$node->url}">{$node->menutext}</a><span class="hide"> | </span>{/if}
{/foreach}
{/if}

2. I'm calling the menu from the actual andreas02 template like this:

Code: Select all

<div id="navitabs">
{cms_module module='menumanager' template='andreas02 Nav' number_of_levels='1'}
</div>

Due to the structure of the site I'm developing, I don't use a menu on the right side of the template (the div called sidebar). I use an html_blob instead, because it's a static link list to external sites. The div called toptabs is completely commented out, I didn't find any usage for it on this site.