Das Layout Ihres Geldverdienen-Portals im Admin-Menü bearbeiten

Im Admin-Menüpunkt Einstellungen der Geldverdienen-Software und dessen Untermenüpunkt Layout bearbeiten können Sie ohne CSS-Kenntnisse das Layout, das heißt in erster Linie die farbliche Darstellung Ihres Geldverdienen-Portals editieren. Zwar ist der Menüpunkt äußerst umfangreich. Jedoch ändern Sie das Layout ja nicht jeden Tag und die einmalige Konfiguration nach Installation der Software sollte eine ganze Zeit lang vorhalten.

Layout bearbeiten

Den Admin-Menüpunkt Layout bearbeiten erreichen Sie durch Klick auf den gleichnamigen Link in der linken Spalte des Admin-Menüpunkts Einstellungen der Geldverdienen-Software.

Zur Design-Anpassung empfiehlt sich, ein Backup der includes/styles.php-Datei anzufertigen. Auf diese Weise können Sie gefahrlos die Wirkung der Änderungen in diesem Menüpunkt auszutesten und bei Nicht-Gefallen die Sicherungs-Kopie der includes/styles.php-Datei einzuspielen, sowie gegebenenfalls die Zugriffsrechte (777) vergeben.

Tipps zur Layoutbearbeitung

Bei Design-Anpassungen ist es unumgänglich, mehrere Angaben zu testen und das praktische Ergebnis zu betrachten. Die möglichen Layout-Anpassungen über das Admin-Menü sind der Versuch, einen Kompromiss zwischen einer für Laien eigenständig durchführbaren Layout-Anpassung und einer für Experten relativ einfach auf CSS-Basis umzustellenden Systems zu finden.

Die einfachste Möglichkeit, eine Art Pseudo-Sicherung ist, zwei Browser-Tabs mit dem Menüpunkt zu öffnen. Wenn Sie nicht versehentlich das Tab schließen (Strg + T hilft hier) oder der Browser abstürzt, können Sie so jederzeit wieder den vorherigen Stand herstellen, indem Sie ganz einfach nur auf Speichern klicken.

Die möglichen Einstellungen sind:

Die einzelnen Optionen für das Layout

Layout bearbeiten

Hintergrund 1

Hier ist die Angabe eines HTML-Farbcodes erforderlich. Der angegebene Farbcode bestimmt die Hintergrundfarbe innerhalb der Haupt-Tabelle, d.h. des Wrappers Ihres Geldverdienen-Portals.

Es gibt zahlreiche Websites mit umfangreichen HTML-Farbcode-Tabellen und eigenen Farbcode-Generatoren. Eine dieser Tabellen finden Sie z.B. auf http://www.html-php-mysql.de/generatoren/colors.php.

Hintergrund 2

Auch hier wird die Angabe eines HTML-Farbcodes erwartet. Der Hintergrund 2 kommt unter anderem bei der horizontale Menüleiste im Kopf-Bereich Ihres GetPaid-Portals zu Einsatz.

Header-Hintergrund

Der Header-Hintergrund dient vorwiegend als Rahmenfarbe für die Haupt-Tabelle.

Fehlermeldung

Wie bei Fehlermeldungen üblich, sollten Sie hier eine rote Schrift angeben. Dies kann z.B. via font-Tag geschehen. Obwohl dies nicht mehr zeitgemäß ist – funktionieren wird es in den kommenden Jahrzehnten voraussichtlich immer noch.

Standard-Text

In dieser Schriftart, -farbe und -größe wird der Großteil der Texte auf Ihrer GetPaid-Community dargestellt. Neben den Farben für die Wrapper-Tabelle etc. ist dies also ein entscheidender Punkt, der für den Charakter Ihres Geldverdienen-Portals sehen sollte.

Weiße Schrift

Die Weiße Schrift findet vor allem auf dem als empfohlenerweise dunkelfarbig anzugebenden Header-Hintergrund Anwendung.

Kleine Schrift

Diese empfohlenerweise als font-Tag anzugebende Schrift kommt vorwiegend bei Vermerken zum Einsatz.

Kleine, weiße Schrift

Diese Schrift ist im Frontend Ihres PaidMailers oder Ihrer bezahlten Startseite vor allem auf dem standardmäßig dunkelfarbigen Header-Hintergrund zu finden.

Schrift auf weiß-grauem Hintergrund

In der User-Statistik etc. kommt nicht-editierbarer, weiß-grauer Hintergrund zum Einsatz, um die Lesbarkeit einzelner Buchungszeilen zu gewährleisten. Sollten Sie als Kleine Schrift eine helle Farbe angegeben haben, kann es zu Darstellungs-Problemen (weiß auf weiß) kommen. Um dieses Problem zu beseitigen, können Sie an dieser Stelle nun eine andere Schriftfarbe angeben.

Button-Style 1

Der Button-Style 1 ist als Inline-CSS anzugeben nach dem Schema style=“…“. Wenn Sie in den vergangenen Jahren irgendwann das Layout einer Website editiert haben, wissen Sie sofort, dass Sie an dieser Stelle auch eine CSS-Klasse vergeben können. Standardmäßig unterscheidet sich der Button-Style 1 vom Button-Style 2 durch die Verwendung von Fettschrift im Button.

Button-Style 2

Wie beim Button-Style 1 ist die Angabe im Inline-CSS-Format zu machen oder, wenn Sie eine CSS-Datei einbinden, als CSS-Klasse. Der Button-Style 2 kommt bei vergleichsweise weniger wichtigen Buttons zum Einsatz.

Text-Style 1

Der im Inline-CSS-Format anzugebende Text-Style 1 wird für input-Felder, d.h. einzeilige Eingabe-Felder genutzt.

Text-Style 2

Der Text-Style 2 wird für Textareas, d.h. mehrzeilige Eingabe-Felder verwenden.

Überschriften-Tabelle 1

Die Überschriften-Tabelle wird auf nahezu jeder Seite Ihres GetPaid-Portals verwendet. Der unter Überschriften-Tabelle 1 angegebene Code leitet die Überschrift der jeweiligen Seite ein, ist dieser also vorangestellt. Auf der Startseite z.B. vor Herzlich willkommen bei….

Überschriften-Tabelle 2

Der unter Überschriften-Tabelle 2 angegebene Code schließt die eigentliche Überschrift und leitet gleichermaßen den unterhalb der Überschrift angezeigten Text ein. Auf der Startseite beispielsweise ist dies der Code zwischen Herzlich willkommen bei… und dem in der templates/de/index.html-Datei zu hinterlegenden Begrüßungstext.

Überschriften-Tabelle 3

Die Überschriften-Tabelle 3 kommt unterhalb des eigentlichen Inhalts der Seiten zum Einsatz, um in der Überschriften-Tabelle 1 und/oder Überschriften-Tabelle 2 geöffnete Tags zu schließen.

Kleine Tabelle 1

Die Kleine Tabelle 1 kommt vor allem in der vertikalen Menü-Leiste zum Einsatz, z.B. beim Haupt-Menü oder der Statistik. Des Weiteren finden Sie die Kleine Tabelle 1 unter anderem auf der Startseite zur Darstellung der Überschrift Aktuelle Community- und Systemnachrichten.

Kleine Tabelle 2

Der unter Kleine Tabelle 2 eingegebene Code ist dafür vorgesehen, unter Kleine Tabelle 1 geöffnete Tags zu schließen.

Unsichtbare Tabelle 1

Die Unsichtbare Tabelle 1 wird an mehreren Stellen Ihres Geldverdienen-Portals als Platzhalter eingesetzt, was also im CSS-Zeitalter mit Margins oder Paddings lösbar ist.

Unsichtbare Tabelle 2

Unter Unsichtbare Tabelle 2 werden in der Unsichtbare Tabelle 1 geöffnete Tags geschlossen.

Wenn Sie sich mit CSS hinreicht auskennen, lassen Sie sich von der Bezeichnung Tabelle nicht abschrecken. Tragen Sie stattdessen einfach ein div-Element ein mit der nötigen Klasse oder Inline-CSS-Angaben.

mit einer Mindesthöhe von wenigen Pixeln, Breite 99% mit zentraler Ausrichtung oder einem geringen Innenabstand verwenden, das unter Unsichtbare Tabelle 2 geöffnet und unter Unsichtbare Tabelle 2 geschlossen wird.

Link-Style

Die Angabe zur graphischen Darstellung von Links auf der Seite sollte auch Laien innerhalb einer CSS-Datei möglich sein. Die Angabemöglichkeit unter Link-Style ist damit hinfällig.

Listenelement 1

Das Listenelement 1 erwartet die Angabe eines Img-Tags, der wichtigen Hinweisen vorangestellt wird.

Listenelement 2

Auch das unter Listenelement 2 anzugebende Img-Tag wird vorwiegend Links vorangestellt, z.B. im Haupt-Menü Ihres GetPaid-Portals. Wenn Sie möchten, können Sie an dieser Stelle natürlich auch Spans oder andere Elemente angaben.

Listenelement 3

Auch beim Listenelement 3 empfiehlt sich die Angabe eines Img-Tags. Angewandt wird das Listenelement 3 vor allem bei Hinweistexten, die von geringerer Bedeutung sind als die mit dem Listenelement 1 gekennzeichneten.

Ein Klick auf den Speichern-Button sichert die gemachten Layout-Angaben.