Help Needed Noob CSS-er here

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"
Post Reply
Omar
New Member
New Member
Posts: 9
Joined: Tue Nov 04, 2008 6:15 pm

Help Needed Noob CSS-er here

Post by Omar »

Hello

So when i heard that you need CSS etc. i start learning CSS. Now i get this.

Template:

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
</__body>
<!--Het maken van de header-->
<div id="header">
<h1>{sitename}</h1>
</div>
<!--Eind van maken header-->

<!--Het maken van het menu-->
<div id="menu">
{menu}
</div>
<!--Eind maken van menu-->

<!--Het maken van content-->
<div id="content">
{content}
</div>
<!--Eind maken van content-->

<__body>
</__html>
And my stylesheet is this:

Code: Select all

body {
margin: 0px;
padding: 0px;
font-family: Georgia, Times, Serif;
color: black;
width: 600px;
}

#header {
background-color: #666;
color: white;
font-size: 28px;
}

#menu {
position: absolute;
top: 40px;
left: 10px;
width: 160px;
margin-left: 10px;
padding-top: 20px;
}


#content {
position: absolute;
top: 30px;
left: 180px;
padding-top: 50px;
margin: 0px 10px 0px 50px;
}
The problem is that my menu is a list! But i dont have that in my CSS. Can someone help me? And another question. When i want an bg image as bg where i need upload the image?

Almost thanks

Sorry for my bad Engelish i come from the Netherlands and i'm only 13 years old.

Omar
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Help Needed Noob CSS-er here

Post by Dee »

You usually attach a seperate stylesheet (for example: Navigation: Simple - Vertical) to the template to style the menu/list.

Background images can be uploaded anywhere, usually in uploads/images (or a subfolder there, like "backgrounds") using the Image Manager. Then use the path to the image in your style declaration, for example for the header image (if you placed a file 'headerbg.gif' in a sub-folder 'backgrounds' in uploads/images:

Code: Select all

div#header h1 a {
/* you can set your own image here */
   background: #385C72 url(uploads/images/backgrounds/headerbg.gif) no-repeat 0 12px; 
}
Regards,
D

PS: try the Dutch forum to ask any questions in Dutch
Omar
New Member
New Member
Posts: 9
Joined: Tue Nov 04, 2008 6:15 pm

Re: Help Needed Noob CSS-er here

Post by Omar »

I've already ask my question there but i don't have already an awnser. But for the menu i what css i need? I want it like this

Menu
Home
About
Contact

How can i make this?

Almost thanks

Omar
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Help Needed Noob CSS-er here

Post by Dee »

Menu's in CMS Made Simple are generated by the Menu Manager module and styled with stylesheets.

The unstyled HTML output is normally an unordered list, because that's the most logical way to present menu links in HTML.
Stylesheets are used to give the list the desired looks. To style a list like a menu start with removing the list-style:

Code: Select all

.menu li {
  list-style: none;
}
then set margins, borders and colors. Take a look at the listamatic website for examples of the possibilities.

Menu Manager creates the list using a menu template (either a file or a database stored Smarty template) and the module can be passed all sorts of parameters to tweak the output. Take a look at the default menu templates (Layout -> Menu Manager) and the module help (the help link in Layout -> Menu Manager or the one besides the module name in Extensions -> Modules).

A simple vertical menu is used in the CMS Made Simple default content, it uses the "Navigation: Simple - Vertical" stylesheet and this module call in the template:  {menu template='simple_navigation.tpl' collapse='1'}

If you want a static menu with only the top level pages use {menu start_level="1" number_of_levels="1"} - but you will need to create a second menu for the subnavigation.

Regards,
D
Last edited by Anonymous on Fri Nov 07, 2008 12:36 am, edited 1 time in total.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

Re: Help Needed Noob CSS-er here

Post by KO »

To make CSS learning easier you might want to check these pages.

http://www.w3schools.com/css/default.asp
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Help Needed Noob CSS-er here

Post by Dee »

KO wrote: To make CSS learning easier you might want to check these pages.
First link in my previous post ;)

Grtz,
D
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm
Location: Helsinki, Finland

Re: Help Needed Noob CSS-er here

Post by KO »

That's right. We like the same stuff. :)
Post Reply

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