Template cms2day anpassen

Lieber Besucher, herzlich willkommen bei: cms2day Forum - Community & Support rund ums cms2day. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

emet

Admin & Support

Beiträge: 2 530

Wohnort: Rhein/Main

Paypal:

Sonntag, 11. Oktober 2009, 15:27

So, geht wieder.

Das was ich da gemacht hab, gibts erst mal nicht zum Download, da die Inhalte der Seitenelemente automatisch ausgelesen werden.

Das muss ich erst noch ändern.

Schau es dir an:

http://www.24b.biz/w3btest/19.3col1/

und

http://www.24b.biz/w3btest/20.3col2/

main.css

Quellcode

/* - MISC STYLE - */


*       {margin: 0px; padding: 0px;}
html        {width: 100%; height: 100%;}
body        {text-align: center; color: #545248; background: #BBB5A5 url('../images/background.jpg') fixed; font-family: "Verdana", "Tahoma" , "Arial" , "MS Sans Serif"; font-size: 11px; line-height: 18px;}

.clear        {clear: both; height: 0px; font-size: 0px; display: block; width: 100%;}

td {font-size: 11px; line-height: 18px; font-family: "Verdana", "Tahoma" , "Arial" , "MS Sans Serif";}

ul     {margin: 0px; padding: 0px;}
li     {list-style: none}

form       {margin: 0px; padding: 0px;}
img       {border: none;}

a      {color: #545248; text-decoration: none;}
a:hover       {color: #545248; text-decoration: underline;}


/* - LAYER + CONTAINER  + WRAPPER - */


#layer {position:relative; text-align:left; margin: 0px auto; width:980px; overflow:hidden; background:#fff;}
#container {float:left; position:relative; display:block; background:#ffffff; border-left:200px solid #F1F1EF; border-right:200px solid #F1F1EF;}
#wrapper {width:980px; display:block; margin-left:-200px; margin-right:-200px; }



/* - HEADER - */


#header        {position:relative; width:100%; height:216px; margin: 0px; padding: 0px; background: url(../images/header.jpg) no-repeat;}
#logo {position: absolute; top: 0px; left: 15px; padding: 0px; width: 400px; height:180px;}
#claims {position: absolute; top: 10px; right: 15px; margin: 0px; padding: 0px; text-align: justify; width: 240px; font-family: "Arial"; font-size: 11px; font-weight: bold; color: #fff; text-align:right;}


/* - MENU - */

#menu {width: 980px; height: 26px; margin: 0px; padding: 0px; background: #615c4f; color: #fff; position:static;}
#menu ul{position: absolute; top: 0px; left: 0px; z-index: 100; padding: 0px; margin: 0px;}
#menu ul li{float: left; list-style: none; margin: 0px; border-right: 1px solid #BBB5A7; position: relative; z-index:100;}

#menu li a {display: block; padding: 0px 12px; text-decoration: none; font-size: 11px; color: #fff; background: #615c4f; margin:0px; line-height: 26px;}
#menu li a:hover {display: block; padding: 0px 12px; text-decoration: none; font-size: 11px; color: #fff; background: #9B9F4F; margin:0px; line-height: 26px;}
#menu li a.aktiv  {display: block; padding: 0px 12px; text-decoration: none; font-size: 11px; color: #fff; font-weight: normal; background: #333029; margin:0px; line-height: 26px;}
#menu li a.aktiv:hover{display: block; padding: 0px 12px; text-decoration: none; font-size: 11px; color: #fff; font-weight: normal; background: #333029; margin:0px; line-height: 26px;}


/* - DROPDOWN SETTINGS - */


#menu table{position: absolute; z-index: 1000; left: -1px; top: 0px; border: none;}
#menu ul li ul{visibility: hidden; position: absolute; top: 26px; left: -1px; width: 184px; text-align: left; border: 1px solid #E1DED7; border-bottom: none; margin: 0px; padding: 0px;}
#menu ul li ul li{height: 26px; border: none; border-bottom: 1px solid #E1DED7; margin: 0px; padding: 0px;}
#menu ul li:hover ul, #menu ul a:hover ul{visibility: visible;}

#menu ul li ul li a {width: 160px; display:block; padding: 0px 12px 2px 12px; text-decoration: none; line-height: 24px; font-size: 11px; color: #333029; background: #fff; margin:0px;}
#menu ul li ul li a:hover{width: 160px; display:block; padding: 0px 12px 2px 12px; text-decoration: none; line-height: 24px; font-size: 11px; color: #fff; background: #9B9F4F; margin:0px;}
#menu ul li ul li a.aktiv{width: 160px; display:block; padding: 0px 12px 2px 12px; text-decoration: none; line-height: 24px; font-size: 11px; color: #fff; background: #333029; margin:0px;}
#menu ul li ul li a.aktiv:hover{width: 160px; display:block; padding: 0px 12px 2px 12px; text-decoration: none; line-height: 24px; font-size: 11px; color: #fff; background: #333029; margin:0px;}


/* - SITE + TIME - */


#sitelayer{position: relative; float:left; width:100%; height: 30px; margin: 0px; padding: 0px; background: #333029; color: #fff;}
#sitelayer #seite{position:relative; float:left; width:220px; left:10px; margin: 0px; line-height: 28px; color: #fff; background: transparent;}
#sitelayer #seite a {text-decoration: none; color: #fff;}
#sitelayer #seite a:hover{text-decoration: none; color: #fff;}
#sitelayer #timedate{position:relative; float:right; padding: 0px 15px 0px 0px; line-height: 28px; color: #fff; font-size: 10px;}


/* - CONTENT ... TEXT - */

#content {position:relative; float:left; left:200px; margin: 0px; padding: 0px; width:580px; overflow: hidden; background: transparent;}

#content #text {margin: 0px; padding: 0px; text-align: justify; color: #545248; background: transparent; line-height: 22px; padding: 20px 15px 35px 15px;}
#content #text h1 {font-size: 16px; font-weight: bold; margin: 0px 0px 20px 0px; color: #9B9F4F; font-family: "Arial"; text-transform: none; letter-spacing: 0px;}
#content #text h2 {font-size: 14px; font-weight: bold; margin: 0px 0px 20px 0px; color: #333029; font-family: "Arial"; text-transform: uppercase; letter-spacing: 0px;}
#content #text h3 {font-size: 11px; font-weight: bold; margin: 0px 0px 5px 0px; color: #9B9F4F; font-family: "Verdana"; letter-spacing: 0px;}
#content #text h4 {font-size: 11px; font-weight: bold; margin: 0px 0px 15px 0px; color: #545248; font-family: "Verdana"; letter-spacing: 0px;}
#content #text h5 {font-size: 11px; font-weight: bold; margin: 0px 0px 0px 0px; color: #545248; font-family: "Verdana"; letter-spacing: 0px;}
#content #text h6 {font-size: 11px; font-weight: normal; margin: 0px 0px 0px 0px; color: #AFAFAF; font-family: "Verdana"; letter-spacing: 0px;}
#content #text p {margin: 0px 0px 15px 0px;}
#content #text hr {border-top: 1px solid #D7D7D7; border-right: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; margin: 0px 0px 15px 0px; height: 2px;}
#content #text a {color: #9B9F4F; text-decoration: none;}
#content #text a:hover {color: #9B9F4F; text-decoration: underline;}
#content #text ul {margin: 0px 0px 0px 15px;}
#content #text ul li {list-style: square; line-height: 22px;}
#content #text ul li ul li {list-style: square; line-height: 22px; margin: 0px 0px 0px 5px;}


/* - SIDEBARLEFT - */

#sidebarleft {position:relative; float:left; left:-580px; width:200px; 
color: #545248; background: transparent; 
}

#leftcontent {position:relative; padding:10px; 
}

/* - SIDEBARRIGHT - */

#sidebarright {position:relative; float:right; right:0px; color:#404040; width:200px; 
color: #545248; 
}

#rightcontent { position:relative; padding:10px; 
}

/* - BOXES - */

#sidebarleft .box {position:relative; border:1px solid; border-color: #6F6C60 #8F8C7E #8F8C7E #6F6C60; margin: 0px 0px 10px 0px; 
}
#sidebarleft .box h4 {color:#fff; font-size: 100%; background: #615c4f;
}
#sidebarleft .box h4, p {padding:4px 5px 4px 5px; margin:0px;
}

#sidebarright .box {position:relative; border:1px solid; border-color: #8F8C7E #6F6C60 #6F6C60 #8F8C7E; margin: 0px 0px 10px 0px; 
}
#sidebarright .box h4 {color:#fff; font-size: 100%; background: #615c4f;
}
#sidebarright .box h4, p {padding:4px 5px 4px 5px; margin:0px;
}


/* - FOOTER - */


#footer {clear:both; position:relative; float:left; width:100%; height: 60px; margin: 0px; padding: 0px; font-size: 10px; color: #545248; line-height: 15px; background: #fff; border-top: 1px solid #E9E9E9; border-bottom: 10px solid #333029;}
#footer #seitenanfang  {position:relative; float:left; padding: 15px 0px 0px 15px; margin: 0px; width: 200px;}
#footer #footercontent {position:relative; float:left; margin: 0px; padding: 15px 15px 0px 0px; width: 748px; text-align:right;}
#footer a       {text-decoration: none; color: #545248; font-weight: bold; font-size: 10px;}
#footer a:hover       {text-decoration: none; color: #707070; font-weight: bold; font-size: 10px;}
#footer a.w3b      {text-decoration: none; color: #545248; font-weight: bold; font-size: 10px;}
#footer a:hover.w3b  {text-decoration: none; color: #707070; font-weight: bold; font-size: 10px;}

Zum Seitenanfang

emet

Admin & Support

Beiträge: 2 530

Wohnort: Rhein/Main

Paypal:

Sonntag, 11. Oktober 2009, 15:27

index.html - Achtung, hier musst Du alles was mit "<?php page_load_msmod" beginnt, durch deine eigenen Platzhalter oder Inhalte ersetzen, da ich hierdurch die Inhalte je nach Seite automatisch auslesen lasse - das ist eine Art eigenes Addon.

Quellcode

<!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="de" lang="de">

<head>

<?php page_header(); ?>

<!-- || Template powered by cms2day - www.cms2day.de || -->

</head>

<body id="top">

<p>&nbsp;</p>

<div id="layer">
    
    <div id="menu">
        
        <?php page_dropdown("0"); ?>
        
    </div>

<div id="header">

<div id="logo">

<table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0" summary="text">

<tr>

<td style="width: 100%; height: 100%;" valign="middle" align="left">

<?php page_logo(); ?>

</td>

</tr>

</table>

</div>

<div id="claims">

<?php page_claim(); ?>

</div>

</div>

<div id="sitelayer">

  <div id="seite">
  
  <?php page_seite(); ?>
  
  </div>

<div id="timedate">

<?php page_datum(); ?>

</div>

</div>

<div id="container">
<div id="wrapper">
<div id="content">

<div id="text">

<?php page_content(); ?>

</div>

</div>

<div id="sidebarleft">

<div id="leftcontent">

<div>

<?php page_load_msmod("sidebarleftbox"); ?>

</div>
</div>

</div>

<div id="sidebarright">

<div id="rightcontent">

<div>

<?php page_load_msmod("sidebarrightbox"); ?>

</div>

</div>

</div>

<div class="clear">&nbsp;</div>

</div>
</div>


<div id="footer">

<div id="seitenanfang">

<a href="#top" title="Zum Seitenanfang scrollen">â–² TOP</a>
<br /><?php page_counter(); ?>

</div>

<div id="footercontent">

<?php page_footer(); ?><br />xhtml/css valide [dropdown mod] Layout by 24b.biz &amp; w3bcms.de

</div>

</div>

</div>

</body>
</html>

Viel Spaß

Zum Seitenanfang

dodan

Anfänger

Sonntag, 11. Oktober 2009, 16:13

JETZT IST SCHLUSS!

Hab deinen code kopiert... und naja... template ist breiter geworden.. jedoch ist dann natürlich wieder das bild zu klein...
und mein footer ist plötzlich auch weg.. obwohl er in der index.html noch drin steht.
und wie ich die linke spalte wieder wegkrieg weil ich ja nur die rechte brauch weis ich auch nicht... KRISE

und was ich anstelle der <?php page_load_msmod" einseten soll weis ich auch nicht! Hab echt keinen plan von PHP!

Werd wohl meine zweite Seite die ich mit dieser CMS und dem Template relasieren wollte doch wieder in handarbeit machen!

Danke emet für deine mühe...

@emet: kannst du mir vll. die headergrafik also im original zuschicken?
würde die wirklich gerne verwenden für meine seite außerhalb dieser CMS!
Bin auch gerne bereit nen Verweis auf diese Seite zu machen, weil ich dieses CMS schon für ein gutes halte!

danke...

Zum Seitenanfang

emet

Admin & Support

Beiträge: 2 530

Wohnort: Rhein/Main

Paypal:

Sonntag, 11. Oktober 2009, 17:20

Das Headerbild in der jetzigen Größe kannst du dir doch von meiner Beispielseite einfrach runterziehen und in deinen Ordner hochfahren.

Allerdings hat Matthias die Rechte für das Bild gekauft und für das Template dieses CMS eingesetzt (glaube nicht, das du das einfach so woanders einsetzen kannst).

Wenn Du beide Dateien kopiert hast und verwendest, dann muss auch alles (Footer) da sein, sonst würde es auf der Musterseite auch fehlen.

Linke Spalte wieder weg???!! Ich dachte, du wolltest einen 3spalter - du sagtest doch, so wie das hotreca-Muster und das ist ein 3spalter - hab Deinen Text im späteren Post wegen der linken Spalte gar nicht mehr im Kopf gehabt.

Dann lass den Code einfach drin (kannste evtl. später benutzen) - mach alles in der CSS was die linke Spalte (und Border - hier auch den Farbwert ändern) angeht auf 1Pixel (z.B. auch den Bereich content - left auf 1Pixel setzen) und den Rest des Inhaltes und was den inneren Teil angeht um 199Pixel größer.

Anstelle "<?php page_load_msmod" musst Du deine Inhalte in die seitlichen Inhaltsboxen eingeben - sonst nix.

Du willst eine Seite in Handarbeit machen!!!??? Die Templates des CMS sind in Handarbeit gemacht - du solltest erst mal die kleinen Änderungen verstehen - dann lernst du es auch.

Man muss sich schon mal 1/2 Stunde mit dem CMS auseinander setzen, dann versteht man bereits alles. Im Prinzip lässt sich jedes beliebige Template dafür benutzen - man muss nur darauf achten, das Systemspezifische Formatierungen (Text oder Beispielsweise die Formulare) aus z.B. einem fertigen Template einfach rüber kopiert werden. Wenn das Template fertig ist, dann musst Du nur noch die CMS-Platzhalter für Header, Claims, Menu, Inhalt, Footer oder anderes in die index.html an die Stelle setzen, wo es erscheinen soll.

Einfacher geht es kaum!!!

Ein bisschen Zeit sollte man aber schon haben, um sich das überhaupt mal anzuschauen - das ist bei diesem System nur ein Bruchteil, was man bei anderen benötigt, um alles zu verstehen (weil es da gar nicht viel gibt).

Dies ist das einfachste CMS, was ich für mich finden konnte, wie viele andere auch. Wenn Du lieber alles per Hand proggen willst - Bitteschön, viel Spaß. Ich zeig dir mal ein Beispiel, das komplett inkl. Textinhalte und allem Drum und Dran per Hand eingegeben wurde - schau dir mal die Codes an, dann wirst Du feststellen, das es mehr oder weniger das gleiche teemplate ist.

http://www.jeansandmore.com/

Diesen css-Style kannst Du als Framework ansehen, weil es sich an fast alle Situationen total einfach anpassen lässt und Cross-Browser kompatibel ist, ohne Browserweiche (bei Änderungen darf man natürlich keine Fehler machen).

Zum Seitenanfang

cms2day Forum - Community & Support rund ums cms2day