TIPS
by
NETtMAN

Blog tunen

Blog-Elemente/Navi/Kommentar/Eintrag gestalten mit CSS

Die Voreinstellungen für die Navigation, einzelne Beiträge, Kommentarfelder und LINKS sind ziemlich stark fixiert.
Nirgends eine Aufklärung, wie man das ändern, geschweige denn einstellen kann.

Außer: hier bei tips ! Im folgenden wird ausführlichst erklärt, wie man die Blog-Elemente nach eigenem Belieben darstellt.



Welche Elemente spielen eine Rolle?
  • Der Seitenuntergrund - im folgenden "body" genannt.
  • die Navigation - im folgenden ".navi" (der Punkt vorne-an ist wichtig) genannt.
  • die Texte - im folgenden "font" genannt.
  • die Link´s - im folgenden "a" genannt.
  • die Kommentare - bestehend aus den Komponenten "Name", "Email", "Website" und "Optionen" -im folgenden "input" genannt, sowie dem Texteingabefeld - im folgenden "textarea" genannt
  • die Zeit- / Datumsangaben - im folgenden "table i" (Das Leerzeichen ist wichtig) genannt.
  • die Überschrift - im folgenden "table b" (Das Leerzeichen ist wichtig) genannt.
  • die Beiträge - im folgenden ".inhaltetable" (der Punkt vorne-an ist wichtig) genannt.




Diese Elemente können Sie in all ihren Darstellungseigenschaften beeinflussen.

Die Frage ist nur wie?
Wenn Sie ein eigenes HTML verwenden (das ist auch bei einem gedealtem Layout der Fall), hängen Sie ein weiter unten beschriebenes CODE-Segment hinten dran.
Wenn Sie ein Standard-Layout gewählt haben, fügen Sie ein solches CODE-Segment im Menü-Punkt: "LAYOUT-Basis/Profi" der Navi hinzu (unter der Navi).

CODE-Segment:
Der Code setzt sich zusammen aus den jeweiligen Elementen, deren Darstellungsform Sie verändern möchten.

Der erste Teil einer Zeile besteht daher aus der Bezeichnung für das gewünschte Element und der zweite Teil benennt die jeweilige Eigenschaft, die geändert werden soll.

Das sieht dann beispielsweise so aus:

textarea {background-color: yellow;}

Leider müssen die Eigenschaften in englischer Sprache geschrieben werden und die Trennzeichen " : " und " ; " sind erforderlich. Zwischen den geschweiften Klammern kann nun eine beliebig lange Liste von Eigenschaften notiert werden. Das sieht beispielsweise so aus:

textarea {background-color: yellow; color: gold; width: 300px; height: 200px; font-family: "Comic Sans MS"; font-family: "Tahoma"; font-size: 20px; text-decoration: underline; text-decoration: overline; text-decoration: line-through; text-decoration: none; line-height: 30px; letter-spacing: 5px; padding: 10px; border: 3px; border-radius: 10px; display: none; }

Diese Eigenschaften zeigen nur einen kleinen Auszug der Möglichkeiten. Ausführlichere Listen finden sich im Internet als "CSS-Spezifikationen".



Vollendung:
Eine auf diese Weise zustande gekommene Liste wird nun noch in einen sogenannten "Tag" verpackt, damit der Browser ihn verstehen kann:vor die Liste gehört die Zeile:

<style>

hinter die Liste gehört die Zeile:

</style>



Das fertige CODE-Segment, welches Ihrem Blog-HTML hinzugefügt werden soll, sieht dann also in etwa so aus:

<style>
body {color: yellow;}
a {color: yellow;}
font {color: yellow;}
table i {color: yellow;}
table b {color: yellow;}
textarea {color: yellow;}
input {color: yellow;}
.inhaltetable {color: yellow;}
.navi {color: yellow;}
</style>



Gut BLOGG wünscht TIPS
14.6.16 21:19
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter