Das Eigene Design anpassen / ändern
Linkfarben, Farben der Überschriften, Headerbild und Hintergrundbild, lassen sich im Baukasten-Menü (Designeinstellungen) ändern.
Möchten wir andere Elemente im Design im Aussehen ändern oder Entfernen, ist dies mit Hilfe von CSS-Code möglich.
Der erste Schritt
ist immer , den Klassennamen des "Feldes" zu finden, den (oder dessen Inhalt) wir anpassen möchten.
die Klassen im Design Iceblue : http://www.homepage-baukasten.de/forum/viewtopic.php?t=101594
die Klassen im Design RED : http://www.homepage-baukasten.de/forum/viewtopic.php?t=101592
die Klassen im Design Butterfly : http://www.homepage-baukasten.de/forum/viewtopic.php?t=101596
die Klassen im Design CSS : http://www.homepage-baukasten.de/forum/viewtopic.php?t=100611
die Klassen im Design Flexible : http://www.homepage-baukasten.de/forum/viewtopic.php?t=144386
die Klassen im Design Clean : http://www.homepage-baukasten.de/forum/viewtopic.php?t=144382
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Der zweite Schritt:
Wir fügen uns den notwendigen "style-tag" ein, damit die Browser unsere CSS-Codes auch umsetzen / erkennen,
- auf "Extras" gehen
- aktiviert das - kleine Extra - "Eigener <head> Inhalt"
- hier sind alle CSS-Codes am besten aufgehoben
- oder alternativ im Feld "Text ÜBER Design"
- siehe auch hier Beispielgrafik "Eigener <head> Inhalt"
Zitat:
<style type="text/css">
<!--
-->
</style>
Alle nun bald folgenden CSS Codes fügen wir dort immer VOR dem --></style> mit ein.
 Im Baukasten-Design "CSS" fügen wir CSS-Codes Ohne "style-tags" im Feld "css ohne style-tags" ein.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Der dritte Schritt: Mit einem Beispiel
Wir möchten im Design Clean Textfarbe und Schriftgröße des Header-Titels ändern:
- wir finden den Klassennamen des Header-Titels .site-title
- mit dem Klassennamen beginnt dann auch unser CSS-Code
- die Eigenschaft für Textfarbe ist immer color:
- die Eigenschaft für Schriftgröße ist immer font-size:
Zitat:
.site-title {
color: #800000;
font-size: 16px;
}
Diesen Code würden wir nun im Feld "Eigener <head> Inhalt einfügen, vor dem --></style>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Noch ein Beispiel
Im Design Iceblue die Textfarbe und Schriftgröße der rechten Boxen ändern:
- wir finden die Klassennamen der 5 rechten Boxen
- das wären .shouty (Box1), .shouty2 (Box2), .shouty3 (Box3), .shouty4 und .shouty5
- mit diesen Namen beginnt auch der CSS-Code, durch Komma getrennt, da alle 5 die gleichen Eigenschaften bekommen
Zitat:
.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #808080;
font-size: 14px;
}
Dieser CSS-Code käme nun in das Feld "Eigener <head> - Inhalt" , dort vor dem --></style>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Einen CSS-Code erweitern
Nachdem wir Textfarbe + Schriftgröße in der Box angepasst haben, möchten wir noch die Schriftart ändern.
- wir fügen keinen neuen Code mit Klassennamen ein
- wir erweitern den bestehenden Code um eine weitere Eigenschaft
- die Eigenschaft für Schriftart ist immer font-family:
Zitat:
.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color: #808080;
font-size: 14px;
font-family: verdana;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Wenn wir den Klassennamen kennen, brauchen wir dem nur noch gewünschte "Eigenschaft" geben.
Hier eine grobe Übersicht, welche Eigenschaften möglich sind:
Eigenschaften für Texte:
font-size: 14px; (Textgröße)
font-family: arial; (Schriftart)
font-style: italic; (Schriftstil, italic wäre kursiv)
font-weight: bold; (legt die Fettschrift fest, bold = fett, bolder = Extrafett, lighter = extradünn)
color: #000000; (die Textfarbe)
text-decoration: underline; (Texte unterstreichen, überstreichen, oder mit none Unterstreichen aufheben)
text-transform: uppercase; (legt Groß oder Kleinschreibung fest, uppercase= groß, lowecase = kleinschrift, capitalize = Wortanfang in Großbuchstaben)
letter-spacing: 5px; (Abstand zwischen den Buchstaben und Zeichen)
Eigenschaften für Rahmen:
- finden wir hier : http://www.css4you.de/borderproperty.html
Übersicht weitere CSS-Eigenschaften:
- finden wir hier http://www.css4you.de/shortref.html
Tutorial erneuert am 23.02.2015 von clean-test.de.tl
.
Zuletzt bearbeitet von 24939 am 24.02.2015, 13:45, insgesamt 12-mal bearbeitet
|
Im