Hier findet ihr den ein oder anderen Tip zum gestalten des Design "Professional".

Nehmt euch den Hinweis von hier zu Herzen (Klick). Es erleichtert euch das bearbeiten des Designcodes.



Verlinkte Bilder in den unteren Boxen bekommen zum Beipiel solchen Code:

<a href="http://www.thebaboons.be" target="_blank"><img src="https://img.webme.com/pic/6/6p-hits/baboones.png" alt="Baboones" /></a>

Ein verlinkter Text in den unteren Boxen bekommt diesen Code:

<a href="http://6p-iceblue.de.tl" target="_blank"><span style="color: #80000;font-size:13px; ">Ein verlinkter Text</span></a>

Ein normaler Text bekommt diesen Code:

<span style="color: #c0c0c0;font-size:18px; ">Das ist der Boxentext</span>



Die Titel im Caroussell würde ich weg lassen. Der Abstand zum Text darunter ist einfach zu hoch. Stattdessen empfehle ich folgenden Code im Textbereich des Caroussells:

<span style="color: #c0c0c0;font-size:18px; ">Text des Titels oder des Textes im Carousell</span>

Jede Zeile kann dann individuell farbig und von der Schrifthöhe angefertigt werden. Die Überschrift, also obere Zeile, einfach 4 Pixel höher machen. Dieser Code ist auch für den Text des Logos geeignet.


Oben das linke Logo kann auch breiter sein. Die Höhe bleibt weiterhin 50 Pixel.


Es ist auch möglich die Bereiche mit Bildern zu versehen. Nehmt dazu ein ansatzfreies Bild. Ich hab nun ein dunkelgraues Bild mit Nebeleffekt oben und unten eingesetzt. Ich nahm die Breite 4000 und Höhe 600. Damit seid ihr beim scrollen auf der sicheren Seite. Hier ein Beispiel der Codeänderung im Textfeld. Dort habe ich den Hintergrund mit etwas Struktur versehen. Und so habe ich den Code erweitert:

 /* Textfeldmitte */
.page-top {background-image:url(https://img.webme.com/pic/6/6p-test/propapierheader.png)!important; background: #c0c0c0;
border-bottom: 1px solid #99CCFF;}


Wer die rechten Animationen haben möchte, der löscht diesen Codeschnipsel im Designcode:

.tp-caption img { display: none; }


Den kleinen Haken bei Unterseiten entfernen:

.dropdown > a::before { content: none !important; }


Hiermit verschiebt ihr die Animationen weiter nach links:

.tp-caption img { margin-right: 200px; }


Ich habe jetzt nur im Startbild ein Overlay. Die 2 anderen Bilder bekamen ein transparentes Bild in 1x1 Pixel Größe. Wer also kein Bild basteln kann, bei dem der Hintergrund transparent ist, nimmt einfach ein Bild mit Rahmen, wie im Startbild zu sehen ist.


Wer die Seitentitel behalten möchte, nimmt diesen Code raus:

.title { display: none; }

Ihr könntet sie aber auch im Aussehen ändern:

/* Seitentitel anpassen */
.title {font-size: 18px;  font-family: tahoma,comic sans ms,arial,verdana;color: #800000;}


Oben die graue Leiste habe ich ausgeschaltet. Reicht ja, wenn unten die Buttons für Facebook und ähnliches ist.


Unten rechts den Pfeil kann man auch farbig gestalten:

/* Pfeil zum Seitenanfang*/
.scrollToTop { background-color: Transparent;color: #800000;}


Wer das obere linke Logo nicht möchte, hiermit ausblenden: 

/* Oberes Logo ausblenden*/
.col-md-3 {display:none;}


Wer das Copyright im Subfooter behalten möchte (Im Code den anderen Eintrag dann löschen):

 /* Copyright farbig anpassen */
 .col-md-6 p {color: #ff0000;}


Das wäre der Besucherzähler, die Farbe wird bei den Countereinstellungen angepasst:

/* Besucherzähler */
.col-md-6 {font-size:18px;}


Uhrzeit und Datum im Gästebuch ändern (lässt sich auch entfernen):

/* Datum und Uhrzeit */
.localtime {color: #339966;}