Backend Skin (CMS)

Heute geht es in umserem CMSlos mit dem Backend Skin! In diesem Beitrag wird der Grundlegende Aufbau erstellt, tiefergehende Funktionen werden bald in einem eigenen Beitrag beschrieben.

Wie ihr mit Sicherheit mitbekommen habt, wir es den bisherigen „Admin-Bereich“ in Kürze nicht mehr geben. Das neue Teil heißt Backend und läuft über den ContentLion-Core. Es kann vom Benutzer individuell angepasst werden.

Aus diesem Grund setzen wir auch einen normalen Skin fürs Backend ein. Den Default-Skin habe ich mal backenddefault genannt. Wir benötigen also den Ordner /system/skins/backenddefault. Dieser beinhaltetet den Unterordner images mit den folgenden Bildern:

ContentLion Logo

Das Logo wird als logo.png gespeichert.

Hintergrund Header

Das kleine Bild ist der Hintergrund unseres headers. Es heißt bg_header.png.

Da der Skin schön mit CSS ausgestattet wurde, ist die Datei /system/skins/backenddefault/index.php relativ leer. Erwähnenswert ist hier evtl. noch, dass ich die lokale Navigation nicht eingeblendet habe. Diese wird später in die Breadcrumb integriert. Auch der Logout-Button fehlt noch:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de"&gt;
  <head>
    <?PHP sys::includeHeader();
    ?>
    <link rel='stylesheet'href="<?PHP echo sys::getFullSkinPath(); ?&gt;style.css" type="text/css" media="all" /&gt;
  </head>
  <body>
    <divid="header"&gt;
      <h1><?PHP echo sys::getTitle(); ?></h1>
      <?PHP sys::displayGlobalMenu("<ul id="globalmenu"&gt;","</ul&gt;","<li&gt;"," </li&gt;",
                               "globalmenu");
      ?>
      <img src="<?PHP echo sys::getFullSkinPath(); ?&gt;/images/logo.png" id="logo" /&gt;
    </div>
    <divid="breadcrumb"&gt;
      <?PHP sys::displayBreadcrump(" -&gt; ","breadcrump","bc"); ?&gt;
    </div>
    <divid="content"&gt;
      <?PHP
        if($_POST['content']){echo $_POST['content'];
        }
        else{sys::includeContent();
        }
      ?>
    </div>
    <divid="footer"&gt;
      <?PHP echo sys::getFooter(); ?>
    </div>
  </body>
</html>

Im CSS wird mit absolouten Positionen gearbeitet. So bekommen wir das Logo an den rechten Rand und den Footer immer am unteren Bildschirmrand. Beim #content wird ebenfalls die Positions gesetzt und mit overflow:scroll die Scrollbars eingeblendet:

/system/skins/backenddefault/style.css

body{
  margin:0;padding:0;font-family:verdana;font-size:16px;
}

#header{background-image:url('images/bg_header.png');height:103px;
}#breadcrumb{background-color:#d4d4d4;height:20px;border-bottom:1px solid #9f9f9f;padding:10px;
}#footer{border-top:1px solid #9f9f9f;background-color:#d4d4d4;height:20px;
  position:absolute;bottom:0px;width:100%;
}
h1{
  margin:0;padding:5px;;
}#globalmenu{
  position:absolute;top:80px;
  margin:0;padding:0;padding-left:10px;
}#globalmenu li{display:inline;
}#logo{
  position:absolute;top:15px;right:15px;
}#content{padding:10px;
  position:absolute;bottom:26px;overflow:auto;top:155px;
}
#header a{
  color:#000;text-decoration:none;
}#breadcrumb a{
  color:#000;text-decoration:none;
}

Um den Backend-Skin zu aktivieren müsst ihr folgendes Ausführen (wenn ihr schon andere skins habt müsst ihr auf die ids achten):

INSERT INTO `cms_skins` VALUES (3, 'backenddefault');

INSERT INTO `cms_settings` VALUES (2, 'global', 'global', 'selectedskin', '3', 1, 'Aktueller Skin', 'skinselector');

Im /installer/installer.php sieht das dann so aus:

      mysql_query("INSERT INTO `".$this->params[3]['praefix']."settings` VALUES (2,'global', 'global', 'selectedskin', '3', 1, 'Aktueller Skin','skinselector');");
      mysql_query("INSERT INTO `".$this->params[3]['praefix']."skins` VALUES (1, 'default');");
      mysql_query("INSERT INTO `".$this->params[3]['praefix']."skins` VALUES (2, 'mobile');");
      mysql_query("INSERT INTO `".$this->params[3]['praefix']."skins` VALUES (3, 'backenddefault');");

Morgen geht’s dann wahrscheinilich weiter mit den Menüicons.

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

Backend Skin (CMS)

Über uns

Cookie-Einstellungen