Suche im Forum:
Suchen


Autor Nachricht
Beitrag23.02.2015 um 19:40 (UTC)    
Titel: Design Clean / ID's und Klassen
Antworten mit Zitat
Die Klassen und ID's im Baukasten-Design "Clean"

Design:
#stage = DIV um das Design (Design-Container)

Headerfeld:
#masthead = komplette Headerfeld
#claim = Feld mit Titel + Untertitel
.site-title = Titel im Header
.site-description = Untertitel
#header-image = Headergrafik
#likeButton = Facebook Button

Menü Horizontal (oben - nebeneinander) :
#access = Feld der Navigation (oben)
#access li a = Menü Button
#access li a:hover = Hover Button
#access ul ul li a = Unterseiten
#access ul ul li a:hover = Hover Unterseiten
#checked_menu a = aktuell offene Seite

Menü Vertikal (untereinander) :
#secondmenu = Feld mit Menü (vertikal)
#secondmenu li a = Menü-Button
#secondmenu li a:hover = Hover Button
#secondmenu ul li.active a = aktuell besuchte Seite
#secondmenu ul ul li a = Unterseiten
#secondmenu ul ul li a:hover = Hover Unterseiten

Seiteninhalt
#container = Feld um "content"
#content = Feld mit Seiteninhalt, Box (und Menü vertikal)
#main = Feld mit dem Seiteninhalt
#main h1 = Titel über Seiteninhalt

Rechte Box:
#sidebar = Feld rechte Box
.widget = Inhalt in rechter Box

Unter dem Design:
#footer = Feld mit Counter + Werbung unten
#footer ul li = nur Counter-Text
#webme_footer_textlink_dont_hide = Farbe Werbung anpassen

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Beispiel:
Design "Clean" mit "vertikalem Menü". Die Linkfarbe der "Unterseiten" möchten wir ändern

- CSS-Code beginnt mit #secondmenu ul ul li a
- Eigenschaft für Textfarbe ist immer color:
- Einfügen im Feld "Eigener <head> - Inhalt" (bei "Extras" aktivieren)
Zitat:

#secondmenu ul ul li a {
color: #808000;
}


Beispiel 2: Seitentitel im Seiteninhalt entfernen
- CSS-Code beginnt mit #main h1
- Eigenschaft für "Ausblenden" bzw. "nicht sichtbar" = display: none;
- einnfügen im Feld "Eigener <head> Inhalt" (bei Extras" aktivieren)
Zitat:

#main h1 {
display: none;
}


Im Feld "Eigener <head> Inhalt" einfügen, zwischen <style type="text/css"><!-- und --> </style>

Weitere Infos:
Das eigene Design ändern : Die ersten Schritte
Weitere Clean Tutorials : http://clean-test.de.tl

Gruß
- videotutorialshpbk -
↑
Beitrag24.02.2015 um 10:08 (UTC)    
Titel: Design Clean / Menü in rechter Box
Antworten mit Zitat
Design Clean - Menü auch in rechter Box

User, die das Design "Clean" mit dem Menü Oben (Horizontales Menü) verwenden,
werden feststellen, das Oben (nebeneinander) nur 5 bis 8 Seitentitel passen. Je nach Länge der Titel.

Wenn Oben das Menü in einer Zeile bleiben soll, kann die rechte Box für ein weiteres Menü verwendet werden.

Schritt 1: Der HTML-Code
- auf "Design"
- auf "Designeinstellungen"
- auf "Erweiterte Designeinstellungen"
- hier finden wir das Feld "erste rechte Box"
- dort den HTML-Code einfügen
Zitat:

<ul class="menu">
<li class="link"> <a href="/Seite.htm">Linktext</a> </li>
<li class="link"> <a href="/Seite.htm">Linktext</a> </li>
<li class="link"> <a href="/Seite.htm">Linktext</a> </li>
<li class="link"> <a href="/Seite.htm">Linktext</a> </li>
<li class="link"> <a href="/Seite.htm">Linktext</a> </li>
</ul>

Bei /Seite.htm fügt Ihr die Seite ein, auf die verlinkt werden soll.
Seitentitel mit Umlaute (ä,ö,ü) oder Sonderzeichen (-_) ? Kopiert diese Titel aus dem Adressfeld des Browsers !
Beispiel: Seitentitel "Gästebuch" . Titel enthält Umlaut ä. In der URL schaut der Titel so aus: /G.ae.stebuch.htm
Beispiel: Seitentitel "über mich" . Titel enthält Umlaut ü und Leerzeichen. In der URL schaut der Titel so aus: /.ue.ber-mich.htm

Schritt 2: Der CSS-Code für das Aussehen
- auf "Extras"
- das - kleine Extra - "Eigener <head> Inhalt" aktivieren
- CSS-Code dort einfügen
- wenn Ihr bereits CSS-Codes stehen habt, vor dem --> </style>
- Dein erster Code ? vor diesem Code ein <style type="text/css"><!-- und nach dem Code --> </style>
Zitat:

ul.menu {
list-style-type: none !important;
margin-left: 25px; }

ul.menu li.link {
background-image: url(http://theme.webme.com/designs/clean/arrows/gray.png);
background-repeat: no-repeat;
padding-left: 30px;
height:40px; }

ul.menu li.link:hover {
background-image: url(http://theme.webme.com/designs/clean/arrows/gray_down.png); }

ul.menu li.link a {
font-size: 14px;
color: #343434;
text-decoration: none; }

ul.menu li.link a:hover { color: navy; }


Die beiden Grafikadressen sind die Menü-Pfeile und

Schritt 3: Seiten verstecken
Die Seiten, die Oben im Menü zuviel sind, bzw. - auf die wir in der Box verlinkt haben -
können wir nun verstecken (aus dem Menü oben entfernen) . Das geht mit dem Extra "versteckte Seiten" .

Beschreibung haben wir hier : Seiten in der Navigation verstecken

.


Zuletzt bearbeitet von videotutorialshpbk am 24.02.2015, 11:10, insgesamt einmal bearbeitet
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


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

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.