CSS Stile

Hier zeige ich ein paar Beispiele für Formatierungen die ich auch hier auf der Seite verwende. Wie ich das formatieren einzelner Worte mittels Shortcode umsetze ist ’hier.

Button

Speichern

.az-button {
  padding: 0px 0.3em 0px 0.3em;
		color: #000000;
    font-style: normal;
    white-space: nowrap;
   background-color: #E8E8E8;
  border-radius: 4px;
  border: 1px solid #BEBEBE; 
}

Datei

Datei.txt

.az-datei {
  color: #000000;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
  /* background-color: #E8E8E8;
  border-radius: 4px;
  border: 1px solid #BEBEBE; */
}
.az-datei:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f016';
    padding-right: 0.5rem;
}

Ordner

Meine Dateien

.az-ordner {
  color: #000000;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
  /* background-color: #E8E8E8;
  border-radius: 4px;
  border: 1px solid #BEBEBE; */
}
.az-ordner:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f07b';
    padding-right: 0.5rem;
}

Register

xxx

.az-register { 
    color: #000000;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
}
.az-register:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f096';
    padding-right: 0.5rem;
}
.az-register:after {
    display: inline-block;
    content: '\|';
}

Programm

Photoshop

.az-programm { 
    color: #000000;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
}
.az-programm:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f108';
    padding-right: 0.5rem;
}
.az-programm:after {
    display: inline-block;
    content: '\|';
}

Pfad

Festplatte/User/admin/Dateien

.az-pfad, .pfad { 
    color: #000000;
    font-style: italic;
    font-size: 0.7em;
    /*border-color: #7A7A7A;
    border-width: 1px;
    border-style: dashed;*/
    padding: 0em 0.3em 0em 0.3em;
    white-space: nowrap;
}
.az-pfad:before, .pfad:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f114';
    padding-right: 0.5rem;
}
.az-pfad:after, .pfad:after {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f100';
    padding-left: 0.5rem;
}

Einstellung

Einstellungen

.az-einstellung { 
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
}
.az-einstellung:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f013';
    padding-right: 0.5rem;
}
.az-einstellung:after {
    display: inline-block;
    content: '\|';
}

URL

www.darin.ch

.az-url { 
    color: #000000;
    font-style: italic;
    white-space: nowrap;
    background-color: transparent;
    border-bottom: 1px dotted #BEBEBE;
}
.az-url:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f17d';
    padding-right: 0.5rem;
}
.az-url:after {
    display: inline-block;
    content: '\|';
}

Var

variable

.az-var { 
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
}
.az-var:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f1c0';
    padding-right: 0.5rem;
}
.az-var:after {
    display: inline-block;
    content: '\|';
}

Wert

Wert

.az-wert { 
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
}
.az-wert:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f1de';
    padding-right: 0.5rem;
}
.az-wert:after {
    display: inline-block;
    content: '\|';
}

Menu

Menu

.az-menu { 
    color: #000000;
   font-weight: bold;
    white-space: nowrap;
}
.az-menu:before {
    display: inline-block;
    font-family: FontAwesome;
    content: '\f233';
    padding-right: 0.5rem;
}
.az-menu:after {
    display: inline-block;
    content: '\|';
}

---

Links formatieren

Fügt dem Link ein Symbol hinzu. In WordPress ist es nur eine individuelle Klasse zuweisen ist nur über den Umweg in HTML möglich.

www.darin.ch, Klasse: extern

<a class="extern" href="https://apple.ch">www.darin.ch</a>

info@darin.ch, Klasse: mail

<a class="mail" href="https://apple.ch">info@darin.ch</a>

071 300 45 12, Klasse: telefon

<a class="telefon" href="https://apple.ch">071 300 45 12</a>

Externe Webseite, Klasse: extern<<<
eMail Adresse, Klasse: mail<<<
Telefon Nummer, Klasse: telefon
Kommentare, Klasse: comments
Apple, Klasse: apple
Windows, Klasse: windows
Android, Klasse: android
Linux, Klasse: linux
Facebook, Klasse: facebook
Twitter, Klasse: twitter
Dropbox, Klasse: dropbox
Download, Klasse: download
Registrieren, Klasse: register
Anmelden, Klasse: signin
Abmelden, Klasse: signout
Paypal, Klasse: paypal
Referenzen, Tutorials, Klasse: info
PDF, Klasse: pdf
Image, Klasse: image
Archiv, Klasse: archiv
Wiki, Klasse: wiki
Information, Klasse: i
Information, Klasse: pfeillinks
Stern, Klasse: stern

Dieses Wort ist markiert.