Tips - Tutorials

Joomla

1. Seitengrundaufbau

1.1. Container zentriert mit fixierten Hintergrundbild

1.2. Background

 

Weitere Tutorials folgen....

 

 

 

Joomla Seitengrundaufbau

1.1. Container zentriert mit fixierten Hintergrundbild

 

Seiteneigenschaften Scrollen und Höhe

body { overflow: scroll; min-height: 101%; }

 

Seiteneigenschaften Ausrichtung und Zentrierung

body.site { margin: 0; padding: 0; text-align: center; /* Zentrierung im Internet Explorer */ margin-top: 100px; /* Abstand von Oben */ }

 

Seiteninhalt Breite, Ausrichtung und Zentrierung

.container { margin-right: auto; margin-left: auto; /* Zentrierung des Containers */ max-width: 1170px; }

Seiteninhalt Ausrichtung Breadcrumbs

.breadcrumb .container { width: auto; /* Zentrierung des Containers */ }

 

Seiteninhalt Ausrichtung Footer

.footer .container{ width: auto; /* Zentrierung des Containers */ }

 

Hintergrundbild für Endgeräte einbinden

@media (min-width: 1200px) { body.site { background: url(../images/background.jpg); /* Hintergrundbild einblenden */ background-attachment:fixed; background-repeat: no-repeat; background-position: center top; } } @media (min-width: 980px) { body.site { background: url(../images/background.jpg); /* Hintergrundbild einblenden */ background-attachment:fixed; background-repeat: no-repeat; background-position: center top; } } @media (min-width: 768px) and (max-width: 979px) { body.site { background: url(../images/background.jpg); /* Hintergrundbild einblenden */ background-attachment:fixed; background-repeat: no-repeat; background-position: center top; } } @media (min-width: 768px) and (max-width: 979px) { body.site { background: url(../images/background.jpg); /* Hintergrundbild einblenden */ background-attachment:fixed; background-repeat: no-repeat; background-position: center top; } }

Hintergrundbild bei Smartphones ausblenden

body.site { background-color: #e6e6e6; /* Hintergrundfarbe */ margin-top: 0px; padding-top: 0px; }

Joomla Seitengrundaufbau

1.2. Background

 

Container Transparent

.body .container { background-color: tranparent; /* Transparenz über den ganzen Container */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding-top: 0px; border: 0px solid rgba(0,0,0,0.15); -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05); box-shadow: 0px 0px 6px rgba(0,0,0,0.05); }

Content Hintergrundfarbe

#content { background-color: #fffaf0; /* Hintergrundfarbe Contentbereich */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-align: left; }

Footer Hintergrundfarbe

.footer .container{ background-color: rgba(0, 51, 51, 1); /* Hintergrundfarbe Footerbereich */ background: -webkit-linear-gradient(top, rgba(102, 204, 153, 1) 0%, rgba(0, 51, 51, 1) 100%); background: linear-gradient(to bottom, rgba(102, 204, 153, 1) 0%, rgba(0, 51, 51, 1) 100%); margin: 0px; width: auto; /* Zentrierung des Containers */ }