headerimage1 headerimage2 headerimage3 headerimage4 headerimage5 headerimage6
Sie sind hier: Startseite > Template fhs-basic-all Version 2.4 eu > Anpassen des Templates an eigenes Design
Saarland English
A
Letzte Bearbeitung:

Anpassen des Templates an eigenes Design

Ein neues Template ist ja gut und schön, aber wer will schon auf der eigenen Website die Logos und Favicons der Template-Vorlage haben?

Eigene Favicon erstellen ⇒ Favicon Generator. For real (auf der folgenden Unterseite)

Eigenes Logo erstellen und einbinden

Das Logo der Website, evtl. das gleiche Motiv wie im Favicon, wird oben links eingeblendet. Da dieses Logo noch oberhalb der Slideshow angezeigt wird und die Slideshow schon 300 px hoch ist, führt ein hohes Logo zu einem vergleichsweise hohen Vorspan zum eigentlichen Content der Seite.

Daher sollte man sich die Größe des Logos genau überlegen. Ich empfehle eine Höhe kleiner gleich 100 px und eine Breite unter 760 px.

Eingebunden wir das Logo in der Logo-Stylesheet-Datei (/templates/name-des-templates/logo.css).

Siehe dort →

Das Logo wird wegen der Responsivität auf max. 45% der Breite des Viewports beschränkt, also nötigenfalls skaliert verkleinert.

Der Text auf der rechten Seite wird auf 45% der Breite des Viewports begrenzt.
Die Schriftgröße wird dynamisch berechnet:

font-size: calc(10px + (28 - 10) * ((100vw - 320px) / (1920 - 320)));

Dabei ist die kleinste Schriftgröße min. 10px und die größte max. 28px. Bei dem in der CMS-Sprachdatei (Einstellungen → Sprach-Datei) eingestellten Text, hier ein Beispiel:

CMS-Sprachdatei

 passt die Zahl 320 in der Formel ganz gut. Mit dem eigenen Text einfach mal ausprobieren. Das Browserfenster immer schmaler machen, bis der Text ausgeblendet wird. Dabei sollte er zu keinem Zeitpunkt oben oder unten abgeschnitten werden. Wenn das geschieht, einfach mal die 320 ändern und sehen wie sich das auswirkt.

Soweit die Trial-and-Error - Methode.
Auf https://www.smashingmagazine.com/2016/05/fluid-typography/ wird die Formel genau erklärt.

Hier meine Kurzdarstellung:

10px = min. font size (kleinste gewünschte Zeichengröße
(28 - 10) = max. font size - min. font size (größte gewünschte Zeichengröße - kleinste gewünschte Zeichengröße)
100vw = 100% of Vierport width (100% der Breite des größtmöglichen Darstellungsfensters)
320px bzw. 320 = min. screen size (kleinste Breite eines Darstellungsfensters, für das noch eine Berechnung erfolgen soll)
1920 = max. screen size in px (größte Fensterbreite in Pixel, für die eine Berechnung erfolgen soll)

Eigentlich ist die Berechnung für Breiten unter 480px nicht notwendig, da der Text dann von der Definition in der  steylsheet.css her sowieso ausgeblendet werden sollte. Experimente mit dieser Website haben jedoch ergeben, dass kleinere Werte als 479 durchaus sinnvoll sein können, da die resultierende Schriftgröße bei kleinen Fensterbreiten deutlich größer bleibt.
Fazit: Trotz vernünftiger Berechnung ist hier wirklich das Experiment an der fertigen Website sinnvoll.

Ist die Logo-Breite im Vergleich mit der Breite des Textes deutlich kleiner, so kann man die Breitenangabe max-width des Logos verringern und die max-width des Textes vergrößern. Um sicherzustellen, dass der Text nie in das Logo hinein läuft sollte die Summe der max-width-Angaben nicht größer als 90% werden.

Footer-Zeilen in der Datei footer.php anpassen und korrigieren

Die obere der Footer-Zeilen lautet:
Druckansicht | Inhaltsverzeichnis | Kontakt | Datenschutz | Impressum | Login

Die Linkadressen in der oberen Footer-Zeile müssen an die eigenen Gegebenheiten der Web-Struktur angepasst werden (Zeile 3):

<?php // *** Die Link-Adressen für Kontakt, Datenschutz und Impressum müssen angepasst werden! *** ;?>
<?=printlink();?> | <?=sitemaplink();?> | <a href="?Home/Kontakt">Kontakt</a> | <a href="?Home/Datenschutz">Datenschutz</a> | <a href="?Home/Impressum">Impressum</a> | <?=loginlink();?>

Die zweite der Footer-Zeilen lautet (Zeile 6 in footer.php):
© 2021 Webmaster der Domain | Template by fhs modified by krl | Powered by CMSimple_XH

An dieser Zeile ab '| Template by' bitte keine Änderungen vornehmen! Wer möchte, kann natürlich seinen eigenen Namen als Rechteinhaber eintragen.

Eine dritte Zeile wird ausgegeben, wenn in der Sprach-Datei des CMS (Einstellungen → Sprach-Datei) im Feld Text2 etwas eingegeben wurde. Hier ist einfacher HTML-Code möglich, sodass auch Linkadressen eingegeben werden können wie z.B.:

<a title="Lembach's Homepage" href="https://lembach-kr.de" target="_blank" rel="noopener">lembach-kr.de</a>   <a title="Subdomain rund um CMSimple_XH" href="http://cmsimple.lembach-kr.de" target="_blank" rel="noopener">cmsimple.lembach-kr.de</a>   <a title="Neue Website rund um CMSimple_XH, soll später die Subdomain cmsimple.lembach-kr.de ablösen." href="http://lembach-cmsimple.de" target="_blank" rel="noopener">lembach-cmsimple.de</a>

was zu dieser Anzeige führt:

lembach-kr.de   cmsimple.lembach-kr.de   lembach-cmsimple.de

Default-Template-Farbe ändern

Um diese zu ändern (alle horizontalen Balken und <hr>) sind in der Datei usermodify.css ab Zeile 2 folgende Einträge vorzunehmen, wobei die hier gelb markierten Werte durch die eigenen Wunschwerte zu ersetzen sind:

.secHeader, .secHeader #searchform input { background: #123456; }
#footer, span.footnote { border-top-color: #123456; }
hr, hr.hrdot, #header, div.Headline_Fussnote { border-bottom-color: #123456; }
#logoTxt {color: #123456; }

Default-Menü-Hintergrundfarben ändern

Auch hier sind die Einträge dafür in der Datei usermodify.css vorzunehmen, am besten unmittelbar unter den oben genannten. Die gelb hinterlegten Werte sind so zu ändern, dass in jedem Fall der erste Wert der höchste ist, der zweite in der Mitte liegt und der dritte Wert der niedrigste ist.

 .secmenu li a:hover { background: #888; }
.secmenu li a { background: #666; }
.secmenu li span { background: #444; }


Bildquellen

Slideshowbilder von https://www.cmsimple-xh.org/
Logo: http://cmsimple.lembach-kr.de/?Template-fhs-basic-all2


| Seitenanfang | |  - - - By CrazyStat - - -

Please activate JavaScript in your browser.

» Sitemap