iceblue-test
  Extras gestalten
 

Die Baukasten-Extras anpassen :

04.04.17 :
Beschreibungen habe ich auf clean-test.de.tl/Extras.htm erneuert !

Schritt 1 : "style-tag" einfügen



  • Einloggen in Homepage
  • auf "Extras"
  • gewünschtes Extra wählen
  • Extra ist zum Bearbeiten offen
  • siehe Feld "Text über ......."
  • den style-tag einfügen

  • <style type="text/css">
    <!--

    -->
    </style>


Gewünschten CSS-Code fügst Du dann immer VOR dem --> </style> ein.

 


Das Formular-Feld gestalten :


Das Formular-Feld besitzen im Baukasten :

  • das Kontaktformular
  • das Gästebuch
  • das Extra "Kommentare"
  • das Extra "Topliste" und die "Linkliste"
  • Codes werden eingefügt im Feld : Text vor dem Extra

Formulare beginnen im Quellcode mit <form method="...
Dieses form   können wir auch mit CSS gestalten :


form {
width: 440px;
padding: 20px;
background-color: #D9D9D9;
background-image: url(BILD-URL);
background-repeat: repeat-x;
border: 1px solid #B9B9B9;
border-radius: 8px; }





Formulare haben unterschiedliche Höhen, je nachdem wieviele Eingabe-Felder aktiviert wurden. Bevor ein Hintergrundbild erstellt wird : Bei "Extras editieren" zuerst die Breite der Eingabefelder bestimmen. Und die Anzahl der Eingabe-Felder festlegen. Danach lässt sich die benötigte Breite für das Hintergrundbild ersehen.

Erklärung zum Code :

width: 440px;
padding: 20px;
background-color: #D9D9D9;
background-image: none;
background-repeat:
border: 1px solid #c9c9c9;
border-radius:
Breite : 440 Pixel. Könnt Ihr anpassen
20 Pixel Abstand zwischen Text und Rahmen
statt der #D9D9D9; (Grau) passende Farbe angeben
oder Bild-URL in Klammer einfügen
repeat-x;   Bild wiederholt sich nach Rechts
Rahmenstärke / Rahmenart / Rahmenfarbe
abgerundete Ecken für alle CSS3 fähigen Browser



 


Das Eingabe-Feld :


In dieses Feld schreiben Besucher ihre Nachricht. Die Eingabe-Felder der Extras Topliste , Gästebuch , Kontaktformular und Linkliste lassen sich auch anpassen. Diese nennen sich textarea. Hier könnt Ihr eigene Hintergrundbilder einfügen. Beachtet bitte : Das Hintergrundbild sollte die Größe haben, die das Eingabe-Feld auch hat . Legt also erst in den Einstellungen fest, welche Breite das Eingabe-Feld haben soll.


  • auf "Extras editieren"
  • das gewünschte Extra auswählen
  • nun habt Ihr das Extra zum Bearbeiten offen
  • auf den gelben Button "weitere Optionen" klicken
  • Breite (evt. auch Höhe) der Eingabe-Felder festlegen
  • speichern


Einfügen im Feld "Text über dem Extra" :
Zum Beispiel im Gästebuch: Feld "Text vor Gästebuch"

textarea {
color: #000000;
font-size: 14px;
background-color: #XXXXXX;
background-image: url(Bild-URL);
background-repeat: repeat-x; }



Erklärung zum Code :
color: #000000;     = Textfarbe im Nachrichtenfeld
font-size: 14px;     = Schriftgröße
background-image: url(URL);     = Grafikadresse in Klammer einfügen
background-repeat: repeat-x;     = Bild wiederholt sich nur nach rechts
background-repeat: repeat-y;     = Bild wiederholt sich nur nach unten
background-repeat: no-repeat;   = Bild wiederholt sich nicht

Im Gästebuch-Menü (unter Extras editieren --> Gästebuch) könnt ihr die Größe des Feldes einstellen. Die Höhe und Breite. Erst dann solltet ihr ein passendes Bild erstellen.

 


Gästebuch-Einträge anpassen :


- Einträge platziert das Gästebuch in einer 80% breiten Tabelle
- die 80% breite Tabelle können wir mit CSS anpassen

im Feld "Text vor Gästebuch"

table[width="80%"] {
width: 480px;
margin: auto;
padding: 20px;
background-color: #XXXXXX;
background-image: url(Bild-URL);
border: 1px solid #c9c9c9;
border-radius: 8px; }




Erklärung zum Code :

margin: auto;
padding: 20px;
background-color: #XXXXXX;
background-image: none;
border: 1px solid #c9c9c9;
border-radius:
Einträge mittig ausrichten
20 Pixel Abstand zwischen Text und Rahmen
statt der #XXXXXX; Farbe angeben
oder Hintergrundbild (Bild-URL) in Klammer einfügen
Rahmenstärke / Rahmenart / Rahmenfarbe
abgerundete Ecken für alle CSS3-fähigen Browser



Zum Hintergrundbild :

Gästebuch-Einträge haben unterschiedliche Höhen. Je nachdem wieviel Text der Eintrag enthält. Dein Bild wird sich wiederholen, wenn der Eintrag die Bildhöhe überschreitet. Du kannst bestimmen, wie und ob sich dein Bild wiederholen soll :

background-repeat: repeat-x;   = Bild nur nach Rechts wiederholen
background-repeat: repeat-y;   = Bild nur nach Unten wiederholen
background-repeat: repeat;   = in beide Richtungen wiederholen
background-repeat: no-repeat;   = Bild nicht wiederholen

 


Eigene Kommentare im Gästebuch gestalten :


Gästebuch-Einträge lassen sich unter "Extras editieren" / "Gästebuch" / kommentieren
Du kannst Deine Kommentare farblich anpassen / gestalten

im Feld "Text vor Gästebuch"


.Kommentar {
width: 350px;
padding: 10px;
color: #000080;
font-size: 12px;
background-color: #FFFFB2;
border: 1px solid #B9B9B9;
border-radius: 8px; }




Deine Gästebuch-Einträge kommentierst du dann immer so :
- auf "Extras editieren"
- wähle Gästebuch aus
- wähle "Einträge bearbeiten" aus
- wähle einen Eintrag aus
- schreibe ins Kommentarfeld:

<div class="Kommentar"> Hier dein Kommentar </div>


Textfarbe, Textgröße, Hintergrundfarbe der Box legst du im ersten Code fest,
bei color / font-size / background-color u.s.w. (im Feld "Text vor Gästebuch").



Zum Schluss: Trennlinien im Gästebuch


Mit dem Mozilla-Browser fällt es am deutlichsten auf : Fehlende (saubere) Abstände zwischen den Trennlinien und Gästebuch-Texte . Das lässt sich festlegen mit einer CSS-Anweisung . Mit margin-top = Außenabstand nach Oben . Und margin-bottom = Außenabstand nach Unten . Wir wählen 10 Pixel Abstand von Trenn-Linie nach Oben und nach Unten .
Den CSS-Code (als erstes) im Feld Text vor dem Gästebuch einfügen :


hr {
margin-top: 10px;
margin-bottom: 10px; }


Die Trennlinie unsichtbar machen ?
Füge im Code zusätzlich das visibility: hidden;   mit ein.




Baukasten-Extra "News" gestalten:


- auf "Extras editieren"
- dort die "News" auswählen
- nun könnt Ihr die News einstellen
- Die Kommentarfunktion in den News solltet Ihr deaktivieren
- Haken entfernen bei : "Besuchern Kommentare erlauben
- Code zum anpassen der News : Beschreibung NEWS anpassen




Ein Tipp :

Wenn Ihr mehrere Codes einfügen möchtet: Beispiel-Grafik ansehen






 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV