10 Jahre
Gespräch vereinbaren
Werbung
FeatValue
Das Kundenportal für Agenturen und Freelancer
Integriert sich in das bestehende Projektmagement-System
Kostenlos registrieren

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

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

Hintergrund Standard Skin

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

Über uns

Stefan Wienströer

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

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern