Suche im Forum:
Suchen


Autor Nachricht
Beitrag10.08.2009 um 09:30 (UTC)    
Titel: [NEU] Das Design anpassen: Wie fange ich an ?

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.

Arrow 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
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de