search template

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Locked
Grover

search template

Post by Grover »

Hello guys (&girls),

I look for a bigger sample template with css. At the moment I'm a little bit lost to build up a page. If it posible I will do it without table.
My goal is something like http://www.kreatives-chaos.com/index.php?seite=home.

How to handle the navigation and the top.

Maybe someone can send me a sampletemplate.

Thanks and best regards

Grover
Top
westis

Re: search template

Post by westis »

Hi Grover & welcome to CMSMS!

Here's a simpliefied version of a template for the page you were referring to. You can always just look at the code of a page you like and put the {content} tag where you want the content and {bulletmenu} or whichever menu you are using where you want the menu. You can read more about templates in this thread: http://forum.cmsmadesimple.org/index.ph ... ml#msg9411

Let us know how you proceed! :-)

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<__html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Title of your page here</TITLE>

{stylesheet}

</head>

</__body>

<!-- This is the header, where you can put a header image or text -->
<div id="header">
    <h1>Type page title here (like "kreatives-chaos.com")</h1>
</div>

<!-- This is section between the header and the content, where the breadcrumbs are placed -->
<div id="contentpre">
  <div id="breadcrumb">
    <p>{breadcrumbs}</p>
  </div>
</div>


<!-- This is where the left menu and the content goes -->
<div id="content">
<div id="content-border">


  <!-- This is for the left menu -->
  <div id="menue">
    <div id="menue-intern-box">
       {bulletmenu}
    </div>
  </div><!-- End of left menu div -->


<!-- Beginning of content //-->

{content}

{cms_module module="news" number="3" swaptitledate="true"}

<!-- End of content //-->

 
</div><!-- end of the section with left menu and content -->
</div>


<!-- The footer //-->
<div id="footer">
 Footer content here
</div>


<__body>
</__html>

And the CSS (stripped down, you need to style more things, like the bulletmenu, to look the way you want:

Code: Select all

* {
	margin:0;
	padding:0;
}

body {
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size:100.01%;
}

p, ul, ol, td {
	font-size:80%;
}

#header {
	height:70px;
	background-color:#dad3c2;
	color:#000;
}

#header-pre {
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(path/image.gif);
	background-repeat:no-repeat;
	width:150px;
	height:146px;
}


#header h1 {
	font-family:Georgia, Verdana, Helvetica, Arial, sans-serif;
	font-size:260%;
	font-style:italic;
	text-align:left;
	background-color:transparent;
	color:#000;
	padding:10px 0 0 170px;
	letter-spacing:2pt;
	white-space:nowrap;
}


#contentpre {
	height:30px;
	vertical-align:middle;
	background-color:#e2ddcf;
	color:#000;
	border-top:1px solid #866d4d;
	border-bottom:1px solid #866d4d;
}

#breadcrumb {
	margin-top:8px;
	margin-right:30px;
	text-align:right;
}

#breadcrumb p {
	font-size:70%;
}

#breadcrumb a {
	text-decoration:none;
	padding:0 5px;
	background-color:transparent;
	color:#600;
	border-bottom:1px solid #000;
}

#breadcrumb a:hover {
	background-color:transparent;
	color:#a00;
	border-bottom:1px solid #000;
}


#content {
	padding-bottom:20px;
	background-color:transparent;
	border-left:200px solid #ffffff;
	min-height:350px;
}

#content-border {
	border-left:1px solid #000;
	min-height:350px;
}


#menue {
	position:absolute;
	left:0px;
	top:160px;
	width:200px;
	color:inherit;
}

#content {
	line-height:140%;
	padding:10px 30px 10px 40px;
}


#footer {
	background-repeat:no-repeat;
	background-position:top right;
	height:70px;
	background-color:#dad3c2;
	color:#000;
	border-top:1px solid #866d4d;
	text-align:left;
	clear: both;
}

#footer p {
	font-size:70%;
	padding:30px 0 0 20px;
}

Hope that helps you a bit on the way.
Top
Grover

Re: search template

Post by Grover »

Thanks a lot westis,
this is the right stuf to start with. Now it is more clear what to do. But.. I still have some questions.
If I move the menue to the right, dots are shown. Where can I change the look of the {bulletmenue}?
I whant my menue like at the samplepage. I try it with

Code: Select all

#menue-intern-box {
border-width:1 solid #000000;
}
no effect. I think also that this will make a box around all. Is it posible to split the menue?
Like:
x menue point 1
x menue point 2
x menue point 3


x menue point 4
x menue point 5

solved see http://forum.cmsmadesimple.org/index.ph ... 872.0.html

solved
Between

and

is no space. Means "|content" I like to have "|(10px)content"
#content-border {
padding-left:10px;
border-left:1px solid #000;
min-height:350px;
}


Thanks

Dirk
Last edited by Grover on Wed Oct 12, 2005 9:07 pm, edited 1 time in total.
Top
Locked

Return to “CMSMS Core”