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"/> 

(copy & paste in Menü > Einstellungen > Head Bearbeiten > gesamte Webseite)
  • 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>

 

  

 

*ohne Gewähr - Eintragungen im head-Bereich der Webseite nur auf eigene Verantwortung!

Kommentar schreiben

Kommentare: 0