web site builder

Gradient Hintergrund und großes Logo

Farbverlauf  Logo Größe 

Farbverlauf im Body

Der Hintergrund aller Boxen auf dieser Seite ist über den Code-Editor entfernt worden. Alle Boxen liegen auf einem Farbverlauf, der mittels CSS dem Body dieser Seite gegeben wurde.

Die CSS wurde dabei in den Bereich "Inside <head> code" und das <div> zur Anzeige des Farbverlaufs in den Bereich "End of <body> code" der Page Settings eingetragen.

Für einen Fullscreen Background mit Bild guckt bitte in meinem Backstretch-Tutorial.

Bild

Der Hintergrund dieser Seite wurde im <head> Code als Farbverlauf gesetzt. Die CSS findet Ihr unten oder im Quelltext dieser Seite. Alle Hintergründe der Boxen wurden über den Code-Editor entfernt. In Mobirise4 Themen ändert Ihr im CSS-Editor:


background-color: @bg-value;

in:

background-color: transparent;

Hier die CSS für den schattierten Hintergrund, die in den <head> Code gehört (Page Settings):


  <!-- Farbverlauf über gesamten Body -->

  <style>

  

      .fixed-background {

        position:fixed;

        margin-left: auto;

        margin-right: auto;

        top: 0;

        width: 100%;

        height: 100%;

        z-index: -1000;

        background-position: top center;

        background-size: cover;

        background-repeat: no-repeat;

      }

  

      .blue-gradient-bg {

        background: #e0e0e0; /* For browsers that do not support gradients */

        background: -webkit-linear-gradient(top, #fff , #28324e); /* For Safari */

        background: -o-linear-gradient(bottom, #fff, #28324e); /* For Opera */

        background: -moz-linear-gradient(top, #fff, #28324e); /* For Firefox */

        background: linear-gradient(to bottom, #fff , #28324e); /* Standard */

      }

  

      body{

        margin: 0;

      }

  

  </style>


Hier das <div> zum Aufruf des schattierten Hintergrundes, das an das Ende vom <body> Code gehört (Page Settings):


  <div class="fixed-background blue-gradient-bg"></div>

Logo Größe

Die Logo Größe kann seit "Mobirise 4" in den Einstellungen am Schieber "Logo Size" angepasst werden.

Die Größe von dem Logo (bei mir das Buch) wird in der "Mobirise 3" CSS-Datei "/assets/dropdown/css/style.css" definiert und mit der CSS (unten) im CSS Editor überschrieben.

Diese Größe habe ich hier auf 80% (40%) gesetzt. Natürlich könnte man auch 100% verwenden, passt aber auf, dass dieses Logo nicht zu groß wird, sonst überdeckt es eventuell am Handy die Navi. Um diese CSS in den Editor zu kopieren, müsst Ihr den HTML-Code Editor nicht aktivieren.



Die CSS:

.navbar-dropdown .navbar-logo img {
  height: 80%;
  width: 80%;
}

.navbar-dropdown.navbar-short .navbar-logo img {
  height: 40%;
  width: 40%;
}