Sivupohjat Teema CMSimplelle
Teema CMSimplelle
Monday, 27 September 2010 21:36 | 
Written by Administrator | 
| 
| 
Teema CMSimplelle
Oma template eli oma malli tehdään helpoiten niin, että kopioidaan oletustemplate uuteen kansioon ja annetaan sille uusi nimi. Ensin kopioidaan, sitten liitetään samaan kansioon ja lopuksi vaihdetaan nimi.
Tämän jälkeen avataan uusi kansio tutkittavaksi.
Tärkein muokattava tiedosto on template eli avataan se ja tehdään muutokset. Logiikka templatessa on sama kuin alla olevassa kuvassa.
Koodi voisi olla esim. tällainen kuten alla
<!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="fi" lang="fi" >
<head></head>
<body id="etusivu"> <a name="top"></a>
<div id="centrering">
<div id="kolumncontainer">
<div id="sidhuvud"></div>
<div id="navi"><div id="menycontainer2">
<ul id="navlist">
</ul>
</div></div>
<div id="kolumn1"><div class="teksti">
</div>
</div>
<div id="kolumn2"> Tähän kuva</div>
</div>
</div>
</body>
</html>
Toiminnallisuuksien kera näin kuten alla.
Ja sitten tarvitaan enää kuvat ja CSS.
body {margin: 0; padding: 0;background: #BFD682;
}
#centrering {
width: 900px;
margin-right: auto;
margin-left: auto;
background: #fff;
}
#kolumncontainer {
float: left; border: 5px solid #fff;
background: #D7DA9E;
}
#sidhuvud {padding: 0px;
background-image: url('images/ylapalkki.gif');
background-repeat: no-repeat;
height:140px;
width:900px;
}
#navi {padding: 0px;
background-image: url('images/navi.gif');
background-repeat: repeat-x;
height:36px;
width:900px;
}
#kolumn1 {float: left; width: 350px; padding: 10px;background: #D7DA9E;}
#kolumn2 {float: left; width: 500px; padding: 10px;background: #D7DA9E;}
#menycontainer2 ul{margin:0; padding: 10px 0px 4px 4px ; text-align:left; border:none; background:white; font:100% Verdana,Arial,sans-serif; font-weight:bold; color:#fff;
background-color: transparent;
}
#menycontainer2 li{display:inline; margin-left:0em
}
#menycontainer2 ul a{text-decoration:none; padding:0px 7px 0 5px;
border-width:1px; border-style:none solid none none;
border-color:#fff;
}
#menycontainer2 a:link{color:#fff}
#menycontainer2 a:visited{color:#fff}
#menycontainer2 a:hover{background-color: transparent; color:#000}
#menycontainer2 a#current{background-color: transparent; color:#fff}
body#etusivu a#etusivunav,
body#siikanen1 a#siikanen1nav,
body#siikanen2 a#siikanen2nav,
body#akkijarvi a#akkijarvinav,
body#turniemi a#turnieminav,
body#kuvia a#kuvianav,
body#pertti a#perttinav
{
text-decoration: underline;
color: #fff;
background-color: transparent;}
.teksti, p {
font-family: verdana, helvetica, sans-serif;
font-size:90%;
line-height:140%;
color:#000;
}
h1 {font-family: verdana, helvetica, sans-serif; color:black; font-size:130%; font-weight:bold;}
h2 {font-family: verdana, helvetica, sans-serif; color:black; font-size:120%; font-weight:bold;}
h3 {font-family: verdana, helvetica, sans-serif; color:#000; font-size:110%; font-weight:bold;}
.kuva {
margin: 10px;
clear: both;
}
Last Updated (Friday, 22 October 2010 17:55)