Kategorie: Webentwicklung

Beiträge zu CSS, Stylesheets und Joomla Vorlagen

Kategorien
Joomla Templates

Joomla Template Reihe K21

Joomla Logo flat

Einfaches, übersichtliches Joomla Template in blau.
Das Header Image ist 1250 px breit – ihr könnt alles anpassen. Der hauptsächliche CSS Code ist hier gelistet.

* {
margin:0;
padding:0;
}
html {
margin:0;
padding:0;
color:#333333;
font:normal 12px/1.5em Arial,Helvetica,Geneva,sans-serif;
}
body {
margin:0;
padding:0;
text-align:center;
background:url(../images/bg_img_body.png) repeat-x;
}
a {text-decoration:none;}
a:link {color:#99CC33;text-decoration:none;}
a:visited  {color:#B5B5B5;text-decoration:none;} 
a:hover  {color:#FFCC00;border-bottom:1px dotted #FFCC00;} 
a:active  {color:#FFCC00;border-bottom:1px dotted #FFCC00;}
a:focus {color:#FFCC00;border-bottom:1px dotted #FFCC00;}

#container {
margin:0 auto;
margin-top:20px;
padding:10px;
width:1250px;
min-height:850px;
text-align:left;
background-color:#FFFFFF;
}
#topmenu {
margin:0 auto;
height:100%;
min-height:20px;
margin-bottom:5px;
text-align:left;
background-color:#FFFFFF;
border-bottom:1px solid #CCCCCC;
}
#header {
margin:0 auto;
height:100%;
min-height:250px;
text-align:left;
background:url(../images/bg_img_header.png) bottom right no-repeat;
}

Das Template wurde getestet mit allen gängigen Browsern.
Heißt nicht es ist fehlerfrei. Das müsstet ihr bei Bedarf anpassen. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

154 kB

Kategorien
Joomla Templates

Joomla Template – K25

Zusammenfassung

Dieses Joomla Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primäre Font ist Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder.

#rahmen {
width: 980px;
margin: 0 auto;
}
#top-aussen {
width: 960px;
height: 50px;
margin: 0;
background-color: #FFFFFF;
border-left: 20px solid #4040A0; /* 20px breiter Rand !!! */
}
#header-aussen {
width: 960px;
height: 180px;
margin: 0;
border-left: 20px solid #000000; /* 20px breiter Rand !!! */
background: #FFFFFF url(../images/bg-header-aussen.jpg);
}

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

112 kB

Kategorien
Joomla Templates

Joomla Template – K06

Joomla Logo flat

Dieses Joomla Template baut auf DIV-Container auf, besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 920px; margin:auto;}

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body{text-align: center;}

eingefügt werden.
Für den Netscape 6, um ein “Herauslaufen” der Seite über den Rand zu verhindern, auch noch ein: 

body{min-width: 800px;}

Die Eigenschaft “text-align” kann dann im #container wieder angepasst werden.
Dieses Möglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen,
im Vergleich zu einer Zentrierung mit negativen Rändern.

Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7.
Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

102 kB

Kategorien
Wordpress

Backup ohne Risiko – how to?

Akeeba Backup für Joomla

AKEEBA Backup war bei mir bisher das Mittel der Wahl wenn es um Joomla CMS Sicherungen ging. Dieses funktioniert hervorragend. Mehrere Male habe ich die Daten immer sicher restoren können.
Was kann Akeeba Backup, zunächst einmal wird unter einer freien und einer Pro Version unterschieden.

Akeeba-Control-Panel
Akeeba-Control-Panel

In der freien Version wird ein Full-Size Backup erstellt, gibt mehrere Formate. Wie Standard ZIP Archive, optimierte JPA Archives oder AES-128 gesicherte JPS Archive. 

Das Backup ist anpassbar hinsichtlich Dateien und Datenbanktabellen. Akeeba Backup führt den Administrator durch eine automatische Konfiguration, welche im Nachgang anpassbar ist.

Weiterlesen “Backup ohne Risiko – how to?”
Kategorien
Stylesheets Webentwicklung

Let’s create – Positionieren mit :float

Kleines Beispiel zur Positionierung von Bildern und Text mit der Eigenschaft float. Insbesondere das Verhalten von Bildern im Textfluß werde ich hier darstellen. Die Codebeispiele könnt ihr zum Testen und üben hernehmen. Also dann: “Lorem ipsum”.

Beispiel 1 enthält etwas Content und ein Bild. Zu sehen ist die bekannte Positionierung mit entsprechendem Hintergrund, um es sichtbar zu gestalten:

Beispiel 1
Beispiel 1

Hier der entsprechende Code dazu.

Weiterlesen “Let’s create – Positionieren mit :float”
Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K14

Joomla Logo flat

Zusammenfassung

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen. Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px.
Als primaeren Font verwende ich Tahoma.
Das Zentrieren des Layouts erfolgt mittels automatischer Raender:

#container {width: 840px; margin:auto;}

Anpassung

Das funktioniert bei den meisten neueren Browsern, fuer den IE im Quirks-Modus sollte ein

body {text-align: center;} eingefuegt werden.

Dieses Template ist getestet mit Firefox und dem IE 11. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

82 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K05

Joomla Logo flat

Dieses Template baut auf DIV-Container auf und besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder: 

#container{width: 920px; margin:auto;}

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein 

body{text-align: center;}

eingefügt werden.

Die Eiganschaft text-align wurde dann im #container wieder angepasst. Dieses Moeglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen, im Vergleich zu einer Zentrierung mit negativen Rändern. Die Farbdarstellung der Ränder erfolgt einmal im #footer mittels border-bottom sowie unter #smallbar mittels border-top. Für Änderungen an der index.php und an der CSS-Datei seid Ihr selbst verantwortlich. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

130 kB

Kategorien
Stylesheets Webentwicklung

Das CSS Box Model – Quick Start

Mit dem Box Model wird festgelegt welche CSS Angaben zur Bestimmung der Größe einer HTML Box relevant sind.

Wir haben einmal den Inhalt einer Box, bestimmt durch width und height.

Dazu kommen Werte für den Innenabstand, Rahmen und Außenabstand. Ich denke das schafft die meiste Verwirrung.
Aus dem Grund habe ich das noch einmal grafisch dargestellt.

Der äußere schwarze Rand stellt die gesamte Box dar.

Das Box Model in CSS
Das Box Model in CSS

Ein Festlegung von:

.meinebox {
width: 100px;
height: 50px;
padding: 10px;
border: 5px;
margin: 10px;
}

erzeugt einen effektive Breite der definierten Box von 150px.

Padding, Border und Margin gelten sowohl für rechts als auch für links.

Kategorien
Stylesheets Webentwicklung

Everything you need – Grid Layouts

Die Möglichkeit mit Grid Layouts bietet eine Möglichkeit eine Seite in größere Bereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Ebene zwischen Teilen eines Steuerelements zu definieren.

Wie bei Tabellen ermöglicht das Rasterlayout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grids sind ein vielfaches mehr an Layoutmöglichkeiten realisierbar oder deutlich einfacher als durch den Einsatz von Tabellen machbar ist.

Hier eine kleine Demo dazu.

Grid Layout
Grid Layout

Der dargestellte Bereich ist veränderlich je nach Breite des Browserfensters.
Im nachfolgenden findet ihr den Code für die Darstellung “Grid Layout”.

Die Grid-Eigenschaft ist eine abgekürzte Schreibweise, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration festlegt.

Erklärung

Zuerst der Header mit den CSS Statements.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Spaltenlayout</title>
<style>
body {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr 2fr 1fr;
}
nav {
  grid-column: 1;
  grid-row: 2;
  padding: 1rem;
  background-color: #FAC273;
}
article {
  grid-column: 2;
  grid-row: 2;
  padding: 1rem;
  background-color: #5B67FA;
  color: #F1F1F1;
}
footer {
  grid-column: 1 / 4;
  grid-row: 3;
  padding: 1rem;
  background-color: #4DB7FA;
}
header {
  grid-column: 1 / 4;
  grid-row: 1;
  padding: 1rem;
  background-color: #AA66FA;
}
aside {
  grid-column: 3;
  grid-row: 2;
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  background-color: #DDDDDD;
  box-shadow: inset 5px 0 5px -5px #111111;
  font-style: italic;
  color: #30606E;
}
aside > p {
    margin: 0.5rem;
}
p {
    font-family: sans-serif;
}
</style>
</head>

Der HTML Code nimmt sich dagegen recht einfach aus.

<body>
<header>
  <p>Hier erscheint der Kopfbereich</p>
</header>
<nav>
  <p>...Menüs evtl.</p>
</nav>
<aside>
  <p>Das ist ein Bereich der neben dem Inhalt angezeigt wird</p>
</aside>
<article>
  <p>Hier erscheint der Inhalt.</p>
  <p>Hier erscheint mehr Inhalt.</p>
  <p>Hier erscheint noch mehr Inhalt.</p>
</article>

<footer>
  <p>Fussbereich</p>
</footer>
</body>
</html>

Zusammenfassend ist zu sagen, mit dem Grid System können alle denkbaren Kombinationen erstellt werden. Aber, sie müssen rechteckig sein. L-Formen lassen sich nicht konstruieren.

Der Code dient zur Darstellung des Verhaltens.

Kategorien
Stylesheets

Texte mit CSS überzeugend gestalten

Die CSS-Eigenschaft :text-indent legt die Länge des Einzugs vor Textzeilen, der in einem Block eingefügt wird.

Text Indent und First Line
Text Indent und First Line

Das CSS-Pseudoelement ::first-line wendet Stile gestalterisch auf die erste Zeile eines Elements auf Blockebene an.

Diese hier genannten beiden Eigenschaften für Elemente bieten sehr gute Möglichkeiten mit einfachen Mitteln eine Text abwechslungsreicher zu gestalten.

p::first-line {
	font-size: 1.2rem;
	font-weight: bold;
	text-decoration: underline;
}
p {
	text-indent: 5em;
	background: #CCCCCC;
}

Der Code ist sehr einfach und kann natürlich ausgebaut werden.