Internet Forum / Hilfen für Einsteiger in HPM Foren

Gezielte und sichere Farbanpassungen mit eigener CSS

#1 von BOo°m , 23.02.2010 13:35

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!


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 25.02.2010 | Top

RE: Gezielte und sichere Farbanpassungen mit CSS

#2 von BOo°m , 23.02.2010 13:51

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;
}






Wer Interesse an dieser CSS oder an Teilen davon hat sollte sich darüber im klaren sein dass die hier gezeigten Links nur der Demonstration dienen (http://www.Link zur Grafikdatei für einen Farbverlauf.png). Diese Textstellen sind natürlich mit einem eigenen Link zu füllen der jeweils zu einer passenden Grafikdatei führen muss.


 
BOo°m
Administrator
Beiträge: 1.991
Registriert am: 27.11.2005

zuletzt bearbeitet 23.02.2010 | Top

   

Arbeitserleichterung für Layoutgestalter
CSS Hacken im PhpBB Template





Powered by Forum Hosting  
Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen