CSS3 Formatierungen
Mit Hilfe von CSS3-Formatierungen lassen sich ohne großen Aufwand viele Effekt auf Deiner Webseite realisieren! Ein paar Beispiele findet Ihr hier:
CSS3-Boxen
Beispiel: Box mit abgerundeten Ecken und Schatten
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut erat, sed diam voluptua.
CSS Style-Anweisung:
<style type="text/css">
/* CSS3 Rounded Corners Box mit Schatten */
.css3box {
border: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 3px 3px 11px #ccc;
-moz-box-shadow: 3px 3px 6px #ccc;
box-shadow: 3px 3px 6px #ccc;
padding:5px;
}
</style>
Um die Style-Anweisung auf ein Jimdo-Element anzuwenden, muss dieses zunächst mit der in der Anweisung festgelegten Klasse ausgestattet werden. Das kann man entweder mit einem JavaScript erreichen, das die Klasse einem vorhandenem Element zuweist, oder (bei Jimdo-Textelementen) ganz einfach mit Bordmitteln:
- Textelement anlegen und mit Text füllen
- öffnen html-Modus (</>)
- vor den html-Code folgendes html-snippet einsetzen: <div class="css3box">
- mit "Ok" bestätigen
- Textelement speichern
Beispiel:
Jimdo Snippets
Wir planen eine extra-Seite mit kleinen CSS-Anpassungen zum Download für verschieden Themen anzulegen, die Euch besonders interessieren. Bitte schreibt uns eine Nachricht über unser Kontaktformular, wenn Ihr dazu Vorschläge habt.
LG, az
Cookie-Banner anpassen
Um den neuen Cookie-Banner von Jimdo auf das Design Eurer eigenen Webseite anzupassen, könnt Ihr unser Basis-Skript benutzen und dieses anschließend selbst anpassen.*
HoToDo:
- Einbinden Basis-Skript im head-Bereich der Webseite
...dieses Skript enthält Anpassungen zur Optimierung des Banners z.B. für mobile Ansichten.
Es liegt extern auf unserem Server, damit wir es schnell anpassen können, um ggf. auf von Jimdo vorgenommene Änderungen des Banners zu reagieren.
Um es zu aktivieren, bitte folgenden Link in den head-Bereich einfügen:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings.css" rel="stylesheet"/>
- für eigene Anpassungen der im Basis-Skript verwendeten Farben
unterhalb des Basis-Skriptes folgende Style-Anweisungen einsetzen:
<style type="text/css">
/*<![CDATA[*/
/* hover = Mouseover */
/*Schriftfarbe Überschrift*/
.cc-individual-cookie-settings.ui-dialog h2 {
color: #e1571b !important;
}
/*Schriftfarbe normale Schrift*/
.cc-individual-cookie-settings.ui-dialog p {
color: #333 !important;
}
/* Links: Impressum/Datenschutz */
.cc-individual-cookie-settings.ui-dialog .links a {
color: #e1571b !important;
}
.cc-individual-cookie-settings.ui-dialog .links a:hover {
color: #b9400b !important;
}
/* Füllfarbe Buttons aktiv */
.fill {
background-color: #e1571b !important;
}
/* Füllfarbe Buttons inaktiv */
.toggle {
background-color: #666 !important;
}
/* Hintergrund und Schriftfarbe "alle akzeptieren" */
.cc-individual-cookie-settings.ui-dialog .btn-primary {
background-color: #e1571b !important;
color: #fff !important;
}
.cc-individual-cookie-settings.ui-dialog .btn-primary:hover {
background-color: #b9400b !important;
color: #fff !important;
}
/* Hintergrund und Schriftfarbe "nur Auswahl akzeptieren" */
#cookie-settings-selected {
background-color: #999 !important;
color: #fff !important;
}
#cookie-settings-selected:hover {
background-color: #666 !important;
color: #fff !important;
}
/*]]>*/
</style>
- Farben für background-color und color anpassen (hex-Farbcodes):
- https://html-color-codes.info/webfarben_hexcodes/
Kommentar schreiben