Implementierung Standardskin Part 1 (CMS)

Vor einiger Zeit habe ich das Standard-Skin für ContentLion vorgestellt. Dieses wird jetzt vom JPG zum Skin umgebaut.

Als erstes habe ich eine Kopie des bisherigen Standard-Skins erstellt und dieses als simple umbenannt. Dies kann man später als Basis für eigene Skins benutzen. Jetzt kommt der neue Skin and er Reihe. In diesem ersten Schritt werden wir einen Teil des Grundgerüstes auf eine festgelegte Breite erstellen. Später soll sich das Skin der Bildschirmauflösung des Users anpassen.

Im Grundgerüst habe ich zuerst einmal alle dynamischen CSS-Einstellungen ausgebaut. Des Weiteren habe ich das Bild eingebaut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de">
  <head>
    <?PHP
      sys::includeHeader();
    ?>
    <link rel='stylesheet' href="<?PHP echo sys::getFullSkinPath(); ?>style.css" type="text/css" media="all" />
  </head>
  <body>
      <div id="container">
        <h1><?PHP echo sys::getTitle(); ?></h1>
        <div id="globalmenu">
        <?PHP
          sys::displayGlobalMenu("<ul id="menu">","</ul>","<li>"," </li>",
                                 "");
        ?>
          <img src="<?PHP echo sys::getFullSkinPath(); ?>images/frontimage.png" />
        </div>
        <div id="localmenu">
        <?PHP
          sys::displayLocalMenu("<ul>","</ul>","<li>","</li>",
                                "localmenuentry");
        ?>
        </div>
        <div id="content">
          <div id="breadcrump">
            <?PHP
              sys::displayBreadcrumb(" -&gt; ","breadcrump","bc");
            ?>
          </div>
          <?PHP
            if(isset($_POST['content']) && $_POST['content']){
              echo $_POST['content'];
            }
            else{
              sys::includeContent();
            }
          ?>
        </div>
        <div id="footer">
          <?PHP echo sys::getTitle(); ?> is powered by <a href="http://contentlion.org">ContentLion CMS</a>
        </div>
      </div>
  </body>
</html>

Das rote Bild wird unter /system/skins/default/images/frontimage.png gespeichert:

ContentLion Frontend Bild

Im CSS werden das Hintergrund und die Farben gesetzt. Außerdem wird eine grobe Struktur aufgebaut. Die lokale Navigation wurde noch nicht berücksichtigt, da wird diese im nächsten Schritt bauen. Wir brauchen nämlich noch eine gute Möglichkeit, das Layout zu ändern, wenn keine lokale Navigation vorhanden ist. Ich hab aber schon eine gute Idee….

Hier ist der Quellecode des /system/skins/default/style.css:

body{
  background-color: #0c0c0c;
  background-image: url('images/bg.png');
  background-repeat:repeat-x;
  font-family:Verdana,non-serif;
  margin:0;
  padding:0;
  font-size:12px;
}
#globalmenu{
  background-color:#2a2a2a;
  height:167px;
  margin:0;
  color:#fff;
}
#globalmenu ul{
  list-style-type:none;
  padding:0;
  width:240px;
}
#container{
  text-align:left;
}
#content{
  padding:14px;;
}
#localmenu{
  float:left;
}
img{
  border:0;
}
#container{
  width:619px;
  margin: 0 auto;
  background-color:#fff;
}
h1{
  font-size:24px;
  padding-top:21px;
  padding-bottom:21px;
  padding-left:14px;
  margin:0;
}
h2{
  font-size:14px;
}
h1,h2,h3,h4,h5,h6 {
  color: #a60000;
}
#footer{
  background-color:#2a2a2a;
  color:#fff;
  text-align:right;
  padding:8px;
}
#globalmenu img{
  height:167px;
}
#menu{
  float:right;
}
#menu a{
  color:#fff;
  text-decoration:none;
  font-size:12px;
}
#content{
  width:360px;
}
#footer a{
  color:#fff;
}

Zu guter Letzt noch das Bild für den Hintergrund /system/skins/default/images/bg.png:

Hintergrund Standard Skin

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Implementierung Standardskin Part 1 (CMS)

Über uns

Cookie-Einstellungen