Aktuelle Seite: Tutorials / Übersicht / Header mit Hintergrundbild Teil 1

Teil 1: Vorbereitungen, Erstellung des äußeren Flex-Container, Erstellung der Infoleiste

Dieses Tutorial besteht aus drei Teilen, in denen die obere Infoleiste mit den Fontawesome Icons zur Kontaktaufnahme, die Leiste mit Logo, Titel und Navigation sowie das Hintergrundbild mit den transparenten Textboxen erstellt werden.

Die Breakpoints sind in der Einheit em angegeben (z.B. 64em x 16 = 1024px)

 

Ansichten vom fertigen Header

 

Ansichten vom fertigen Header   Ansichten vom fertigen Header

 

Für den Hintergrund habe ich drei Bilder für die Breakpoints erstellt, die im Ordner Ihr Template/images abgespeichert werden.

Breakpoint ab 64em in der Größe 1920px x 600px

Breakpoint ab 48em in der Größe 1024px x 600px

Breakpoint bis 48em in der Größe 568px x 400px

 

Voraussetzungen:

Die aktuelle Joomla- Version (nicht 4.0 !!) ist installiert.

Das Bootstrap 4 Template ist installiert.

https://github.com/sniggle/joomla-bootstrap4-template

Font-Awesome und Google Fonts sind in der index.php eingebunden.

Die Datei custom.css erstellen und in die index.php einbinden

Die Datei abspeichern unter Ihr Template/css/

1
Die templateDetails.xml bearbeiten
Folgende Positionen in die templateDetails.xml einfügen:
<position>header-navbar</position>
<position>header-contact</position>
<position>header-info</position>
<position>header-content</position>

Erläuterungen:

Auf der Position header-navbar wird unsere Navigation ab 1024px angezeigt.

Auf der Position header-contact erscheinen die Icons mit dem Titel Kontakt.

Die Position header-info kann optional verwendet werden, in dem Bereich erscheint der Toggle-Button.

Auf der Position header-content werden die Infoboxen eingebunden.

2
Die index.php und custom.css bearbeiten
	
<div id="flex-header" class="slider">
   <div class="flex-header-infoleiste">
      <div class="flex-header-infoleiste-inner">
	 <div class="left-contact">
	   <jdoc:include type="modules" name="header-contact" style="xhtml" />
	 </div>					
	 <div class="right-info">
	   <jdoc:include type="modules" name="header-info" style="xhtml" />
	 </div>
      </div>
   </div>
   <div class="flex-header-leiste">
      <div class="flex-header-leiste-inner">			
	  <header class="navbar navbar-expand-lg navbar-light bg-faded">
	     <div class="navbar-inner-left">
	        <a class="navbar-brand" href="/<?php echo JURI::base(); ?>"><img src="/images/logo.png" class="img-responsive" alt="Ihr Logo">	
		</a>
	     </div>
	     <div class="navbar-inner-right">
	        <p>Seitentitel</p>
	     </div>	
             <button class="navbar-toggler navbar-toggler-right custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	        <span class="navbar-toggler-icon"></span>
	     </button>			
	     <div class="collapse navbar-collapse" id="navbarSupportedContent">
	        <jdoc:include type="modules" name="header-navbar" style="none" />               
	     </div>
	  </header>
       </div>
    </div>
    <div class="flex-header-content">
       <jdoc:include type="modules" name="header-content" style="xhtml" />
    </div>
</div>

Erläuterungen:

Zuerst erstellen wir den komplette Code für den Header.

Den Codeblock in der index.php zwischen <body> und <div class="body"> einfügen.

 

flex-header

ID für den äußeren Flex-Container

 

slider

Klasse für das Hintergrundbild

 

flex-header-infoleiste

flex-header-leiste

flex-header-content

Klassen für die Hintergrundfarben der Flex-Items

 

flex-header-infoleiste-inner

flex-header-leiste-inner

Klassen für die inneren Flex-Container

 

left-contact, right-info

Klassen für die inneren Flex-Items

	
#flex-header { 
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display:flex;
   -webkit-flex-direction: column; 
   -ms-flex-direction: column;
   flex-direction: column;	
   padding: 0 !important;
   margin-bottom: 1em;
}
			
.slider {
   background-image: url("../images/slider-mobil-568.jpg");
   background-size: cover;
   height: 100%;
}

@media screen and (min-width: 48em)  {	
   .slider {
      background-image: url("../images/slider-mobil-1024.jpg");
   }
}	

@media screen and (min-width: 64em)  {	
   .slider {
      background-image: url("../images/slider-desktop.jpg");
   }
}	

Erläuterungen:

Den CSS Code für den äußeren Flex-Container in die custom.css einbinden.

 

flex-header

Der äußere Flex-Container erhält ein flex-direction :column, damit die Items untereinander dargestellt werden.

 

slider

Die Klasse erhält ein background-size: cover um das Bild über die volle Fläche des Viewport zu legen und ein height: 100%.

Die Einbindung der Fotos für die verschiedenen Breakpoints geschieht über die media-queres.

3
Das Modul Header-Kontakt und den CSS-Code erstellen
	
<div class="contact-titel">Kontakt</div>
   <div class="contact-items">
     <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!"><span><i class="fas fa-envelope fa-lg"></i></span></a> 
     <a href="https://wa.me/4912345678"><span><i class="fab fa-whatsapp fa-lg"></i></span></a> 
     <a href="tel:+4912345678"><span style="color: white;"><i class="fas fa-phone"></i></span></a>
   </div>
</div>	

Erläuterungen:

Das Modul als Eigenes Modul erstellen.

Folgende Einstellungen vornehmen:

Unter Optionen Inhalte vorbereiten aktivieren

Als Position header-contact einstellen.

Anschließend nebenstehenden Code einbinden.

 

contakt-titel

Die Schriftformatierung der Überschrift

contact-items

Die Gestaltung der Icons

	
.flex-header-infoleiste { 
   background: #333;
}

.flex-header-infoleiste-inner, .flex-header-leiste-inner { 
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display:flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
}	

.flex-header-infoleiste-inner > .left-contact  { 
   -webkit-flex: 1 90%;
   -ms-flexbox: 1 90%; 
   flex: 1 90%;
}

.flex-header-infoleiste-inner > .right-info  { 
   -webkit-flex: 1 8%;
   -ms-flexbox: 1 8%; 
   flex: 1 8%;
}

@media screen and (min-width: 64em)  {	
   .flex-header-infoleiste-inner, .flex-header-leiste-inner, .flex-header-content-inner	{
	margin: 0 auto;
	max-width: 80em !important;
	width: 98%;
	border: 0px solid #fff;
   }
}		

		

Erläuterungen:

Den CSS Code für den Flex-Container in die custom.css einbinden.

 

flex-header-infoleiste

Dient nur für die Hintergrundfarbe des Containers.

 

flex-header-infoleiste-inner

flex-header-leiste-inner (für die Navbar)

flex-header-content-inner (für die Infoboxen)

Über diese Klassen werden die inneren Flex-Container erstellt.

Über media-queres wird der Breakpoint ab 64em mit einer Breite von maximal 80em eingestellt und einer Zentrierung über margin: 0 auto.

 

left-contact

right-info

Die inneren Flex-Items bekommen Breitenangaben in Prozent.

.contact-titel, .contact-items { 
   display: inline-block;
   padding: 0.2em;
}
.contact-items a {
   padding: 0.2em 0.5em;
}

.contact-titel, .flex-header-infoleiste a {
   font-family: 'Ubuntu', sans-serif;
   color: white;
   letter-spacing: 0.1em;
}		
		

Erläuterungen:

Den CSS Code für das Modul in die custom.css einbinden.

 

contact-titel

contact-items

Bekommen ein display: inline-block damit der Inhalt als Box dargestellt wird und in der Breite begrenzt ist.

Der Innenabstand soll 0.2em betragen.

 

contact-items a

Die Icons bekommen auch einen Innenabstand zueinander.

 

contact-titel

flex-header-infoleiste a

Hier werden die Schriftformatierungen vorgenommen.

Als Schriftart habe ich einen Google Font gewählt.

Das war der erste Teil des Tutorials.

  • Die index.php ist fertig gestellt.
  • Das Modul für die obere Infoleiste ist erstellt.
  • Die CSS Formatierungen für den äußeren Container sind erstellt.
  • Die CSS Formatierungen für das Modul Kontakt sind erstellt.