Gezielte und sichere Farbanpassungen mit eigener CSS

Bezugnehmend auf das Thema CSS Hacken im PhpBB Template möchte ich auf die "sichere" Variante der CSS-Manipulation eingehen.


Warum ist diese Variante der CSS-Anpassung sicher?
Bei dieser Variante wird die normale/globale/interne CSS vom Forum nicht direkt vom Benutzer verändert, es werden lediglich eigene Veränderungen an die Standard-CSS hinten drangehängt. Der Inhalt der Standard-CSS bleibt voll erhalten.



Was sind die Vorteile es so zu machen und nicht einfach direkt zu hacken?
Vorteil 1 - bei einem Update der Forensoftware durch den Anbieter welches die Standard-CSS mit einschliesst kann das Update problemlos automatisch eingepielt werden - es werden keine selbst definierten Werte überschrieben und man muss die Änderungen eines Updates auch nicht selber händisch übernehmen, die CSS wird also nicht für automatische Updates gesperrt weil man direkt darin herumgewurschtelt hat.

Vorteil 2 - weil man alle eigenen Veränderungen in einem eigenen Eingabefeld zur Verfügung hat sind diese sehr viel übersichtlicher und man muss sich nicht mit der Suche in Codezeilen belasten die man gar nicht berührt hat.

Vorteil 3 - belässt man die originale Standard-CSS im Betriebsmodus "einfache Bedeinung" sind alle Farb - und Formatierungseinstellungen nach wie vor über die relativ einfachen Einstellmöglichkeiten im Adminmenü veränderbar - ausgenommen natürlich die Farben und Formatierungen die man in der eigenen CSS direkt und explizit codiert hat.



Was sind die Nachteile es so zu machen und nicht einfach direkt zu hacken?
Der einzige mir bekannte Nachteil ist dass einige Codezeilen bei jedem Aufruf der Seite "zuviel" geladen werden. Die Standard-CSS gibt beispielsweise irgendeinem Bereich im Forum über die Klassenzuordnung einen Farbwert und die eigene CSS hat eine vollkommen identische Klassenzuordnung nur mit einem anderen Farbwert - da könnte man sich eigentlich ein paar Zeilen sparen, was aber technisch gesehen nur mit direktem Hacken, und den daraus resultierenden Nachteilen, möglich wäre.



Wo finde ich dieses Eingabefeld für eine eigene CSS?
Im Adminmenü unter Layout - CSS, HTML & Co - das große Eingabefeld auf der rechten Seite.
Bild:



Wichtiger Hinweis!
Damit Änderungen einer eigenen CSS aktiviert werden muss die normale CSS auf "einfache Bedienung" gestellt sein!

Meine eigene derzeitige CSS - mit eingefügten Kommentaren zur besseren Übersicht - Stand 23.02.2010 - 13:45:


/*Kopfelement - Info zum Forum + Schnellsuche*/
.headerbar {
background-image: url("http://www.Link zur Grafikdatei für einen Farbverlauf.png");
}
.headerbar a {
color: #666666 !important;
}
#site-description, #site-description h1 {
color: #666666 !important;
}

/*Navigationselement - Menüpunkte zur Bedienung des Forums*/
.navbar {
background-color: #999cff
}

/*Forumübersicht - Hintergrundgrafiken, Farbeinstellungen, Schriftgrößen */
.forabg {
background-color: #808080;
background-image: url("http://www.Link zur Grafikdatei für einen Farbverlauf.png");
}
/*Forenübersicht - Rahmen um alle Foren einer gemeinsamen Kategorie*/
ul.forums {
border-style:solid;
border-top-width:1px;
border-top-color: #303030;
border-left-width:3px;
border-left-color: #717171;
border-right-width:3px;
border-right-color: #717171;
border-bottom-width:3px;
border-bottom-color:#b9b9b9;
}
/*Forumübersicht Schrift-Styles der Foren - Name, Beschreibung etc.*/
ul.topiclist dt {
font-size: 1em;
}

/*Foren-Ansicht - Styles*/
.forumbg {
background-color: #808080;
background-image: url("http://www.Link zur Grafikdatei für einen Farbverlauf.png");
}
/*Rahmen um alle Themen gemeinsam*/
ul.topics {
border-style:solid;
border-top-width:1px;
border-top-color: #303030;
border-left-width:3px;
border-left-color: #717171;
border-right-width:3px;
border-right-color: #717171;
border-bottom-width:3px;
border-bottom-color:#b9b9b9;
}
/* Forenansicht Zeilen Styles */
dl.icon {
min-height: 40px;
background-position: 4px 50%; /* Position vom Ordner-Icon */
background-repeat: no-repeat;
}

/*Beiträge - Beitrags-Ansicht Styles*/
.postbody .content {
font-size: 1.1em !important;
}

/*Eigene Seiten - Styles*/
.mypage {
padding:10px;
border-style:solid;
border-top-width:2px;
border-top-color: #202020;
border-left-width:3px;
border-left-color: #717171;
border-right-width:3px;
border-right-color: #717171;
border-bottom-width:3px;
border-bottom-color:#b9b9b9;
}