Design Clean
    >> Tipps zum anpassen

die ersten Schritte

Wie kann ich meine Homepage anpassen ?


Der erste Schritt ist, den Klassennamen des Feldes zu finden, das wir anpassen möchten.

für das Design Clean finden wir sie hier : Klassennamen Design Clean
die Klassen für das Design Iceblue : homepage-baukasten.de/forum/viewtopic.php?t=101594
die Klassen für das Design CSS : homepage-baukasten.de/forum/viewtopic.php?t=100611
die Klassen für das Design RED : homepage-baukasten.de/forum/viewtopic.php?t=101592
die Klassen für Design Butterfly : homepage-baukasten.de/forum/viewtopic.php?t=101596
die Klassen für Design Flexible : homepage-baukasten.de/forum/viewtopic.php?t=144386


Der zweite Schritt: Wo füge ich CSS-Codes ein ?

Viele Tutorials verweisen auf das Feld "Text ÜBER Design". Das könnt Ihr auch weiterhin nutzen.
Zweite (bessere) Möglichkeit mit Feld "Eigener Head Inhalt". Einige Tutorials verweisen schon darauf.


Wie füge ich die CSS-Codes ein ?

Wir benötigen einmal den "style-tag" - bevor wir einen CSS Code einfügen
- wir verwenden das Feld "Eigener Head-Inhalt"
- auf "Extras" gehen - Aktiviert das - kleine Extra - "Eigener <head> Inhalt"

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





-->
</style>

Alle CSS Codes die nun irgendwann folgen, fügt immer VOR dem --> </style> ein.
- Du hast bereits CSS-Codes eingefügt ? Wo platziere ich den neuen CSS-Code ?


Der dritte Schritt mit einem Beispiel:

- Wir möchten im Design Clean Textfarbe und Schriftgröße des Header-Titels ändern
- wir sehen , der - Titel im Header - hat den Klassennamen .site-title
- mit dem Klassennamen beginnt der CSS-Code auch
- die Eigenschaft für Schriftfarbe ist immer color:
- die Eigenschaft für Schriftgröße ist immer font-size:

.site-title {
    color: #800000;
    font-size: 16px;
}

Diesen CSS Code fügen wir nun im Feld "Eigener Head-Inhalt" ein, vor dem --> </style>



CSS-Code erweitern :

- wir möchten nun auch die Schriftart im Header-Titel ändern
- die Eigenschaft für Schriftart ist immer font-family:
- wir erweitern den schon vorhandenen Code :

.site-title {
    color: #800000;
    font-size: 16px;
    font-family: verdana;
}

Tipp für User mit Browser Firefox (Mozilla):

  • besuche Deine Homepage
  • mit der Maus aufs Design
  • Rechtsklick "Element untersuchen"

  • oder oben im Browser auf "Extras"
  • dann "Webentwickler" -> Inspektor
  • es öffnet sich ein Fenster

  • oder auf Symbol oben Rechts im Browser
  • siehe Grafik Rechts




  • Einen Klassennamen finden:
  • mit der Maus über die Homepage
  • auf Element, das Du anpassen möchtest
  • unten stehen Elemente mit Klassennamen




  • den eigenen CSS-Code anzeigen:
  • klicke unten auf Stilbearbeitung
  • unten Links Liste der Codes
  • der eigene (eingefügte) weiter unten
  • unten Links anklicken
  • unten Rechts sehen wir seinen CSS-Code
  • diesen können wir ändern




  • neuen CSS Code probieren:
  • unten Links auf NEU
  • auf neues Stil-Dokument
  • unten Rechts weißes Feld
  • hier können wir neue einfügen
  • Änderungen sehen wir auf Homepage



Google Chrome-Browser besitzen ebenfalls das Werkzeug.
Ihr müsst auf "Weitere Tools" und dann auf "Entwickler-Tools"


Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :30 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben