© by Karl Richard Lembach

logo.css

In der logo.css werden die Formatierungen für die Darstellung des Websitelogos und des Mottotextes vorgenommen:

Bei der Auslieferung enthält diese Datei folgendes:

/* Layout - Logo */
#logo a {
background: url(images/logo-animation.gif) no-repeat;
background-size: 99%;
height: 70px;
width: 357px;
max-width: 45%;
display: inline-block;
float: left;
margin: 10px 20px;
text-decoration: none;
border: 0;
}
#logoTxt {
color: #666;
position: absolute;
bottom: 10px;
right: 20px;
max-width: 45%;
font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1920 - 320)));
font-weight: bold;
line-height: 120%;
text-align: right;
}
/* Layout - Logo-Ende */

In der Zeile 'background: url......' wird die zu verwendende Grafikdatei festgelegt. Dabei wird das Verzeichnis des Templates als Basis des Pfades gewertet. Die Angabe images/logo.png bezieht sich also auf den Ordner images im Templateverzeichnis.

Die Höhe der Grafik wird dort eingetragen (z.B.): 70px

und die Breite wird dort eingetragen (z.B.): 375px

Die Farbe des Logo-Textes (Anzeige erfolgt rechts oben über dem Slider) wird dort eingestellt (z.B.): #666

Wie die Formel zur automatischen Text-Größen-Skalierung arbeitet, wird dort beschrieben: Anpassen-des-Templates-an-eigenes-Design und dort: Responsive Schriftgrößen mit CSS calc() = Dynamische Schriftgröße