CMS CSS-Stylesheet auslagern

Code & Blog Logo

In unserem CMS soll der CSS-StyleSheet ausgelagert werden. Leider ist dies nur zum Teil möglich, da sich darin PHP-Befehle befinden. Diese müssen erstmal in der index.php im Skin bleiben.

Um die Position des Styles herauszufinden, benötigen wir die Host-Url. Diese wird in der Tabelle cms_settings angelegt:

INSERT INTO `cms_settings` ( `property` , `value` )
VALUES (
'host', 'http://cms.stevieswebsite.de'
);

Diese Einstellung wird nun mit dem Path des Skins ausgelesen und in der Methode getFullSkinPath der Klasse sys (Verzeichnis system) zurückgeliefert:

...
function getFullSkinPath(){
  return getSetting("host")."/".SkinController::getCurrentSkinPath()."/";
}
...

Jetzt kommen alle statischen CSS-Einstellungen in den StyleSheet style.css im Skin-Verzeichnis. Hier wurde auch der Path zum Hintergrundbild geändert:

body{
  background-color: #fff;
  background-image: url('images/bg.jpg');
  background-repeat:repeat-x;
}
#globalmenu{
  list-style-type : none;
}
#globalmenu li{
  display:inline;
}
#container{
  width:90%;
  text-align:left;
}
#content{
  background-color:#fff;
  padding:1%;
}
#localmenu{
  float:left;
}

Nun fehlt nur noch die Änderung in der index.php des Skins. Hier muss als erstes das link-Tag zum StyleSheet eingebunden und danach nicht mehr benötigte CSS-Anweisungen entfernt werden:

...
      <link rel='stylesheet' href="<?PHP echo sys::getFullSkinPath(); ?>style.css" 
            type="text/css" media="all" />
      <style type="text/css">
        body{
          color: <?PHP echo sys::getColor("forecolor"); ?>;
        }
        a{
          color: <?PHP echo sys::getColor("highlight1"); ?>;
        }
        a:visted{
          color: <?PHP echo sys::getColor("highlight2"); ?>;
        }
        #container{
          background-color:<?PHP echo sys::getColor("bgcolor"); ?>;
          border: 1px solid  <?PHP echo sys::getColor("highlight1"); ?>;
        }
        #content{
        <?PHP if(sys::localMenuExists()){
        ?>
        width:78%;
        position:relative;
        margin-left:20%;
        <?PHP
        }
        ?>
      }
    </style>
  </head>
...

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

Kommentare

Ben schrieb am 01.02.2011:

Also ich hab den variablen CSS Code einfach in eine style.php ausgelagert und dann im head der index included. Ist vielleicht für manche etwas übersichtlicher?! ... <!-- CSS --> &lt;link rel=&#039;stylesheet&#039; href=&quot;style.css" type="text/css" media="all" /&gt; <!--CSS ENDE --> ... und dann in der style.php den css code mit den style tags umschliessen

Ben schrieb am 01.02.2011:

php include("style.php");?&gt;

Stefan Wienströer schrieb am 01.02.2011:

Hast recht. In der aktuellen Version gibt es das auch so nicht mehr (neuer Standard Skin) ;-)

Über uns

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