CSS braucht ein Admin-Bereich

Code & Blog Logo

Ja, auch unser CMS wird einen Admin-Bereich mit CSS haben. Heute geht es erstmal um ein paar wenige Eigenschaften: Wir werden heute das Menü nach oben platzieren und passend Färben. Außerdem werden die Tabellenheader entsprechend gestaltet.

Für die Entwicklungsphase wird das CSS wieder direkt in die index.php geschrieben (Verzeichnis admin).

Das Admin-Menü

Das AdminMenü hat bereits die id #adminmenue auf welche dann im CSS zugegriffen werden kann. Da das Admin Menü derzeit eine Liste ist, müssen wir als erstes die Punkte entfernen. Das geht mit list-style-type : none;.

Die Breite des Admin Menüs soll 100% betragen. Die Höhe wird auf 20px gesetzt.

Als Hintergrundfarbe nehmen wir ein schönes dunkeles grau. Dort müssen wir später auch noch die Schrift entsprechend anpassen, aber das kommt später 😉

Um später den richtigen Inhalt nicht direkt ans Admin-Menü kleben zu haben, setzten wir das Margin-Bottom auf 40px. Alle anderen margins und paddings stehen auf 0:

#adminmenue{
  list-style-type : none;
  margin:0;
  margin-bottom:40px;
  padding:0;
  background-color:#333;
  width:100%;
  height:20px;
}

Wie ihr jetzt bemerken werdet, ist das Admin-Menü noch nicht ganz am Rand der Website, denn wir müssen noch das Margin und Padding im Body-Tag auf 0 setzetn. Wenn wir schon mal im Body-Tag sind, können wir auch gleich noch die Schriftart setzten. Ich finde Tahoma ganz schön, also nehmen wir die:

body{
  margin:0;
  padding:0;
  font-family:Tahoma, sans-serif;;
}

Was fehlt nun noch im Admin Menü? Natürlich, die einzelnen Links müssen noch gestaltet werden. Als erstes werden sie nun horizontal angeordnet. Dies geschieht über display:inline im li.

Dann brauchen die noch eine weiße Schriftfarbe, dies wird im a festgesetzt:

#adminmenue a{
  color:#fff;
}
#adminmenue li{
  display:inline;
}

Damit ist das Admin-Menü auch schon fertig.

Tabellenheader

Wir wollten uns ja auch noch um die Tabellenheader kümmern. Diese bekommen einfach einen neuen Anstrich:

thead{
  background-color:#ddd;
  color:#333;
}

Die Neue index.php

Nun hat sich ja einiges an der index.php geändert. Für alle, die nicht ganz mitgekommen sind oder kein Lust haben die entsprechenden Stellen rauszusuchen ist hier nochmal die neue komplette /admin/index.php:

<?PHP
  session_start();
  include("../system/dbconnect.php");
  include("../system/settings.php");
  include("../system/classes/user.php");
  include("../system/filterfilename.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="de">
  <head>
    <title>Admin-Bereich</title>
    <style type="text/css">
      body{
        margin:0;
        padding:0;
        font-family:Tahoma, sans-serif;;
      }
      label{
        display:block;
      }
      #adminmenue{
        list-style-type : none;
        margin:0;
        margin-bottom:40px;
        padding:0;
        background-color:#333;
        width:100%;
        height:20px;
      }
      #adminmenue a{
        color:#fff;
      }
      #adminmenue li{
        display:inline;
      }
      thead{
        background-color:#ddd;
        color:#333;
      }
    </style>
  </head>
  <body>
      <?PHP
        $user = new User();
        if($_POST['user']){
          if($user->login($_POST['user'],$_POST['password'])){
            $_SESSION['username'] = $_POST['user'];
          }
          else{
            echo "<p>Login Fehlgeschlagen!</p>";
            include('includes/login.php');
          }
        }
    if(isset($_SESSION['username'])){
          include('includes/menue.php');
          if($_GET['page']){
            include(filterfilename("includes/".$_GET['page']));
          }
    }
    else{
          include('includes/login.php');
    }
      ?>
  </body>
</html>

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

CSS braucht ein Admin-Bereich

Das Admin-Menü

Tabellenheader

Die Neue index.php

Über uns

Cookie-Einstellungen