Kategorie: Webentwicklung

Beiträge zu CSS, Stylesheets und Joomla Vorlagen

Kategorien
Stylesheets Webentwicklung

How to use CSS property columns

CSS Programming Image

Die Eigenschaft columns ist eine Zusammenfassung der Einzelangaben column-width und column-count. Die Reihenfolge der Einzelangaben ist dabei egal.

Erlaubte Werte sind:

  • Eine oder zwei Angaben zu Breite und Spaltenzahl, in beliebiger Reihenfolge:
    • Mindestbreite: Eine positive Längenangabe oder auto
    • Spaltenzahl: Eine positive, ganze Zahl oder auto

Die Vererbung steuernde Werte:

  • inherit, initial, unset und revertDefaultwert

Für eine nicht erfolgte Angabe wird auto gesetzt.

Anwendung auf:

Elemente, die einen für Multicolumn-Layout zulässigen Block-Container darstellen.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K10

Joomla Logo flat

Joomla Templates sind Vorlagen, die das Erscheinungsbild und Layout einer Joomla-Website bestimmen. Sie bestehen aus einer Sammlung von Dateien. Damit wird das Design, die Struktur und das Verhalten einer Joomla-Website beeinflusst.

Im Grunde genommen sind Joomla Templates wie eine Schablone oder ein Rahmen. Dieser Rahmen legt fest, wie eine Joomla-Website aussehen und funktionieren soll. Sie enthalten das Design, die Farben, das Layout, die Schriftarten und Bilder, die auf der Website angezeigt werden sollen.

Es gibt Tausende von kostenlosen und kostenpflichtigen Joomla Templates. Viele verschiedene Designer und Entwickler haben an der Erstellung mitgewirkt. Die meisten Templates sind anpassbar und können von Benutzern bearbeitet werden. Damit kann das Aussehen und die Funktionalität ihrer Website geändert werden.

Im Allgemeinen sollten Joomla Templates so gestaltet sein, dass sie das Erscheinungsbild der Website verbessern und eine bessere Benutzererfahrung bieten. Sie sollten auch mit den neuesten Webstandards und Technologien kompatibel sein, um sicherzustellen, dass die Website auf verschiedenen Geräten und Browsern gut funktioniert.

Das hier vorliegende Template besteht aus zwei Containern die mittels float positioniert werden. Das funktioniert gut, evtl. ist noch Anpassungsbedarf nötig, der ist aber von Fall zu Fall verschieden.

Die Erstellung eines Joomla-Templates erfordert ein gewisses Verständnis von HTML, CSS und PHP, sowie Kenntnisse der Joomla-Architektur und der Funktionsweise von Templates.

Es gibt viele weitere Details und Feinheiten, die berücksichtigt werden müssen, um ein qualitativ hochwertiges Template zu erstellen. Es ist ratsam, sich mit der Joomla-Dokumentation und den Entwickler-Communities zu befassen, um weitere Informationen und Unterstützung zu erhalten.

https://www.w3.org/Style/CSS/Overview.de.htm

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 980px. Der primäre Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

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

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf “user4”, der banner auf “banner”, der newsflash auf “top”, latestnews auf “user1” und mostread auf “user2” Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

146 kB

Kategorien
Wordpress

Eine kurze Einführung in WP Themes

Wordpress Logo Schwarz/Weiss

Einleitung

WordPress ist eine kostenlose Open-Source-Software, die es euch ermöglicht, schnell und einfach eine Website oder einen Blog zu erstellen und zu verwalten. Es ist eine Content-Management-Plattform, die es Benutzern ermöglicht, Inhalte wie Texte, Bilder und Videos zu erstellen und zu veröffentlichen.

Dafür sind keine speziellen Kenntnisse in Webdesign oder Programmierung notwendig.

WordPress ist sehr flexibel und erweiterbar. Es gibt eine Vielzahl von Plugins und Themes, die die Funktionalität und das Aussehen einer Website anpassen können. WordPress ist eine der beliebtesten Content-Management-Systeme weltweit und wird von Millionen von Websites genutzt.

Themes

WordPress Templates, auch als WordPress Themes bezeichnet, sind vorgefertigte Designs um das Aussehen und die Funktionalität einer WordPress-Website zu ändern.
Diese kann der Administrator installieren und verwenden. Ein WordPress-Template besteht aus einer Reihe von Dateien, die die Struktur, das Design und die Funktionalität einer Website bestimmen.

Die Struktur des Templates umfasst den Header (obere Bereich der Website), den Footer (untere Bereich der Website) und den Content-Bereich (der Hauptteil der Website). Das Design wird durch CSS-Dateien gestaltet, die Schriftarten, Farben, Hintergründe, Layout und andere visuelle Aspekte der Website definieren. Die Funktionalität wird durch PHP-Dateien bestimmt. Damit werden die interaktiven Elemente der Website, wie z.B. Formulare, Menüs, Slider und andere Funktionen, bereitgestellt.

WordPress Templates sind in der Regel in der Lage, auf verschiedene Arten von Inhalten zugeschnitten zu sein, einschließlich von Blogs, Portfolio-Websites, Online-Shops und Unternehmens-Websites. Sie können auch anpassbar sein. Das bedeutet der Benutzer kann Änderungen an Farben, Schriftarten, Layout und anderen Aspekten des Designs vornehmen.

Lizenz

WordPress-Templates können kostenlos oder kostenpflichtig sein. Kostenlose Templates können von der offiziellen WordPress-Website oder von Websites Dritter heruntergeladen werden. Kostenpflichtige Templates werden in der Regel von professionellen Designern erstellt und bieten oft zusätzliche Funktionen und Supportleistungen.

Fazit

Insgesamt ermöglichen WordPress Templates es dir als Website-Betreiber, schnell und einfach eine ansprechende Website zu erstellen. Dazu noch ohne umfangreiche Kenntnisse in Webdesign oder -entwicklung zu haben.

Kategorien
Wordpress

WordPress Beta – Teste die Zukunft

Wordpress Logo Schwarz/Weiss

Die Aufgabe

Ihr wollt Beta-Versionen oder Nightly Builds der nächsten WordPress Major Releases testen? Oder einfach nur mal schauen, was es an Änderungen geben könnte?

Dann ist dieser Beitrag das Richtige für Euch!

Die Voraussetzungen

Der aussagekräftigste Weg, eine neue WordPress-Version zu testen, ist eine Website zu nehmen, die auch die entsprechenden Inhalte und Plugins enthält.

Doch der Reihe nach.

Sucht euch eine praktikable Umgebung aus. Denkt auch daran diese länger zu betreiben. Müssen evtl. auch andere Personen (Administratoren, Kunden, Redakteure etc.) darauf zugreifen.

Nachdem ihr die Punkte oben geklärt habt stehen euch nachfolgende Möglichkeiten zur Verfügung.

Die möglichen Varianten:

  • weniger relevante Live Site
  • Klon einer bestehenden Instanz
  • Neuinstallation
  • lokale offline Installation

Ganz wichtig und bevor ich es vergesse zu sagen! Jeder kennt es. Wenn ihr ein Backup braucht, habt ihr keines!

Aussage eines unbekannten Administrators

Zuerst sichert ihr eure bestehende Installation (Variante eins), auf der ihr den Test durchführen wollt. Denkt daran “There is no way back to the previous version”. Einmal aktualisiert und das war es dann! Dafür habt ihr das Backup zur Hand. Glück gehabt!

Eine zweite Möglichkeit ist das Klonen einer vorhandenen WordPress Instanz. Hierfür gibt es eine Vielzahl von Tools die das erledigen. Achtet darauf, dass die neue Seite unabhängig von der Quelle ist.

Die dritte Möglichkeit ist eine komplette Neuinstallation von WordPress. Der Nachteil dabei ist, dass diese am Anfang keine echten Inhalte bietet. Für das Herunterladen von Beta-Versionen existieren eine Reihe von Quellen.

Wer Interesse hat für den gibt es die Möglichkeit (vier). Die Einrichtung einer lokalen Entwicklungsumgebung offline. Um WordPress auf eurem Rechner zu installieren, installiert eine lokale Entwicklungsumgebung wie XAMPP. So können Änderungen an der Beta-Version vorgenommen werden, ohne eine Live-Site zu beeinflussen.

Kommen wir im Anschluß zu der Frage “Was braucht ihr?“. Für ein Update einer bestehenden Site ladet ihr euch das Plugin WordPress Beta Tester. Im nächsten Schritt installiert und aktiviert ihr es in der Testumgebung.

Die Konfiguration

Ihr könnt das Tool unter Tools -> Beta Testing konfigurieren.
In den Einstellungen des Plugins könnt ihr folgendes auswählen,

  • Bleeding Edge
  • Beta/RC

wie im Screenshot zu sehen. Anschließend speichert ihr die Einstellungen über den Button “Änderungen speichern”. Das war die Vorbereitung.

Wollt ihr täglich die neuesten Nightlies der WordPress-Entwickler auf eurer Instanz installieren, wählt ihr den Punkt “Nightlies”.

Jetzt muss nur noch ein Upgrade auf die Beta / RC Version durchgeführt werden. Dieses erfolgt wie gewohnt über Dashboard -> Aktualisierungen.

Fertig!

Was gibt es sonst noch? Auf den WP Developer Seiten findet ihr eine Beschreibung der neuen Features und Bugfixes.

Es gibt noch andere Möglichkeiten, aber die gezeigten Wege sind meiner Meinung nach die Einfachsten und Unkompliziertesten.

Beta-Versionen können potentiell fehlerhaft sein. Sie sind nicht für den produktiven Einsatz empfohlen.

Wenn es euch gefällt, hinterlasst einen Kommentar.
Kategorien
Wordpress

Tools zur Optimierung deiner Website

Wordpress Logo Schwarz/Weiss

Website-Optimierungstools sind Softwareprogramme oder Online-Dienste, die entwickelt wurden, um Website-Betreibern dabei zu helfen, ihre Websites zu verbessern und deren Leistung, Benutzererfahrung und Sichtbarkeit in Suchmaschinen zu optimieren.

All in One SEO

All in One SEO ist ein Plugin für WordPress. Es hilft, die Suchmaschinenoptimierung (SEO) einer Website zu verbessern. Es bietet eine Vielzahl von Funktionen und Werkzeugen, die es ermöglicht, ihre Website so zu optimieren, dass sie in den Suchmaschinenergebnissen besser gefunden wird.

Mit All in One SEO kann man den Titel und die Meta-Beschreibung jeder einzelnen Seite ihrer Website bearbeiten. Das Plugin hilft beim Hinzufügen von benutzerdefinierten Meta-Tags für die Suchmaschinenoptimierung.

Die Erstellung einer XML-Sitemap ist eine Weitere Funktion des Plugins. Die Erweiterung erstellt automatisch eine XML-Sitemap und reicht sie bei den wichtigsten Suchmaschinen ein, um sicherzustellen, dass der gesamte Inhalt der Website erfasst wird.

Darüber hinaus bietet All in One SEO Funktionen wie die Optimierung von Bildern, die Integration von Social-Media-Tags und die Verwaltung von Canonical-URLs. Es bietet auch Analyse-Tools, mit denen Benutzer den SEO-Fortschritt ihrer Website verfolgen können.

Antispam Bee

Antispam Bee ist ein Plugin für WordPress, das entwickelt wurde, um Spam-Kommentare auf einer Website zu bekämpfen. Es ist eine kostenlose Erweiterung, die von Pluginkollektiv, einer Gruppe von Entwicklern, entwickelt wurde.

Das Antispam Plugin verwendet verschiedene Methoden, um Spam-Kommentare zu erkennen und zu blockieren. Dazu gehören das Überprüfen von IP-Adressen, das Analysieren von Kommentarinhalt und das Überprüfen von Referer-Informationen. Das Plugin erkennt automatisch verdächtige Kommentare und markiert sie als Spam oder blockiert sie vollständig.

Eine der Stärken von Antispam Bee liegt in der Flexibilität. Das bedeutet eine Vielzahl von Einstellungen und Optionen zur Spam-Erkennung. Man kann beispielsweise bestimmte Wörter oder IP-Adressen auf eine Blacklist setzen, um Kommentare von bestimmten Quellen zu blockieren.

Compilanz GDPR/CCPA Cookie Consent

Das Werkzeug unterstützt bei der Einhaltung der Datenschutzbestimmungen, insbesondere der Datenschutz-Grundverordnung (GDPR) der Europäischen Union und des California Consumer Privacy Act (CCPA) in den USA.

Das Tool ermöglicht ein benutzerfreundliches Cookie-Zustimmungsbanner auf der Website einzurichten. Dieses Werkzeug bietet verschiedene Funktionen, darunter:

  1. Anpassbare Banner,
  2. Konfigurierbare Cookie-Kategorien,
  3. Automatische Cookie-Blockierung,
  4. Compliance-Berichte.

Es bietet zusammenfassend gesagt benutzerfreundliche Funktionen, um die Zustimmung der Besucher einzuholen und die Datenschutzeinstellungen anzupassen, um den Datenschutzrichtlinien zu entsprechen. Ob ihr die kostenpflichtige Version einsetzen sollt müsst ihr von Fall zu Fall entscheiden.

FBC Latest Backup for Updraft Plus

Fügt deinem Dashboard ein Widget hinzu, das dir das Datum und die Uhrzeit der letzten Sicherung anzeigt und wie viele Änderungen seitdem vorgenommen wurden.

Otter – Page Builder Blocks & Extensions for Gutenberg

Otter ist eine Erweiterung für den WordPress-Editor Gutenberg. Es bietet zusätzliche Funktionen und Erweiterungen für die Erstellung von Webseiten. Mit Otter kannst du eine Vielzahl von Anpassungen und Gestaltungsoptionen für die Gutenberg-Blöcke nutzen.

Dem Gutenberg-Editor werden neue Blöcke hinzu gefügt. Diese zusätzlichen Blöcke bieten erweiterte Funktionen und Gestaltungsmöglichkeiten für deine Inhalte. Du kannst zum Beispiel auf erweiterte Überschriftenblöcke, Fortschrittsbalken, Preislisten, Testimonials und vieles mehr zugreifen.

Otter bietet auch eine Reihe von Layoutblöcken, mit denen du komplexe Seitenstrukturen erstellen kannst. Du kannst Spaltenlayouts, Akkordeons, Tabs, Countdowns und andere Elemente verwenden.

Zusätzlich zu den erweiterten Blöcken enthält Otter eine Reihe von Einstellungen, mit denen du das Aussehen und Verhalten der Blöcke anpassen kannst. Du kannst Farben, Schriftarten, Hintergrundbilder und andere Stileigenschaften anpassen. Ich benutze aktuell die kostenfreie Version.

Quick Download Button

“Quick Download Button” ist ein Tool um das Herunterladen von Dateien auf einer WordPress-Website zu erleichtern. Es fügt der Website einen Download-Button hinzu. Besucher können schnell und einfach Dateien herunterladen.

Nach der Installation und Aktivierung der Erweiterung kannst du den Download-Button zu deinen Beiträgen, Seiten oder Widgets hinzufügen. Du kannst den Button mit Text, Farben und Symbolen anpassen.

Simple Lightbox

Ein weiteres Werkzeug für das Anzeigen von Bildern in einem Lichtbox-Stil auf einer WordPress-Website ist Simple Lightbox. Eine Lightbox ist eine modale Fensterbox, die über den Inhalt einer Webseite gelegt wird. Bilder werden vergrößert, um in einer benutzerfreundlichen Art und Weise betrachtet werden zu können

UpdraftPlus – Backup/Restore

Hier wird eine einfache und effektive Methode zur Sicherung und Wiederherstellung von WordPress-Websites geboten. Es ermöglicht Benutzern, vollständige Backups ihrer Website einschließlich aller Dateien, Datenbanken, Plugins und Themes zu erstellen und sie an einem sicheren Ort zu speichern.

Automatische Backups gemäß einem festgelegten Zeitplan oder manuelle Backups nach Bedarf sind die Kernfunktionen. UpdraftPlus – Backup/Restore unterstützt verschiedene Speicherorte für die Backups, darunter Cloud-Services wie Dropbox, Google Drive, Amazon S3 und andere.

Darüber hinaus ermöglicht UpdraftPlus auch die einfache Wiederherstellung von Backups. Mit nur wenigen Klicks ist eine Rücksicherung aus einem zuvor erstellten Backup erfolgt. Für viele Fälle reicht hier die kostenfreie Version.

WP Mail SMTP

Mit dem WordPress-Plugin “WP Mail SMTP” kannst du die Standard-E-Mail-Funktionen deiner WordPress-Website erweitern. Normalerweise verwendet WordPress die PHP-Mail-Funktion zum Versand von E-Mails. Dies kann jedoch zu Problemen führen wenn dein Hosting-Provider die Zustellung von E-Mails einschränkt oder deine E-Mails im Spam-Ordner landen.

WP Optimize

Mit WP Optimize kannst du deine Datenbank bereinigen, indem du unnötige Daten wie Spamkommentare, gelöschte Beiträge und Revisionen löschst. Dies reduziert die Größe deiner Datenbank und verbessert die langfristig die Ladezeiten deiner Website.

Die Funktions Bilder zu komprimieren, um ihre Dateigröße zu reduzieren, ohne die visuelle Qualität zu beeinträchtigen ist eine Hauptfunktion. Dies verbessert die Ladezeiten deiner Seiten, da kleinere Bilddateien schneller geladen werden.

Ein weiteres Feature von WP Optimize ist die Möglichkeit, Caching zu implementieren. Durch das Zwischenspeichern der statischen Inhalte deiner Website können Besucher die Seiten schneller anzeigen. Daten müssen nicht jedes Mal aus der Datenbank abgerufen werden.

WP Forms Lite

WPForms Lite ist eine kostenlose Version des Plugins, das von WPForms angeboten wird. Es bietet grundlegende Funktionen für die Erstellung und Verwaltung von Kontaktformularen. Es gibt auch eine kostenpflichtige Version namens WPForms Pro, die erweiterte Funktionen wie Online-Zahlungen, Umfragen, Abonnementformulare und mehr bietet.

Fazit

Der Modulare Aufbau von WordPress ermöglicht das Einbinden von Plugins für zusätzliche Funktionen und Erweiterungen, um die Leistungsfähigkeit und Anpassungsfähigkeit einer WordPress-Website zu verbessern. Diese Erweiterungen können für verschiedene Zwecke eingesetzt werden, darunter Website-Optimierung, Sicherheit, E-Commerce, Suchmaschinenoptimierung (SEO), Social Media-Integration und vieles mehr.

Je nach den individuellen Anforderungen und Zielen einer Website gibt es viele weitere beliebte WordPress-Plugins, die ausgewählt werden können. Plugins sind ein effektives Mittel zur Erweiterung der Funktionalität einer WordPress-Website und zur Verbesserung der Benutzererfahrung.
Viele weitere Werkzeuge findet ihr auf https://wordpress.org/plugins/

Kategorien
Webentwicklung

Was man über Super HTML 8.5 wissen muss

html code beispiel

SuperHTML Web Studio 8.5 ist ein professioneller, deutschsprachiger HTML/Webeditor. Er ist unter anderem zur Erstellung von Homepages, Webseiten, Webanwendungen und CMS-Templates geeignet.

SuperHTML Web Studio ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist.

Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, Ruby, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler. Weiterhin ist SuperHTML Web Studio vollständig Unicode-fähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Features in Super HTML Web Studio 8.5

Verbesserte Windows Vista-Unterstützung

Auch Windows Vista wird nun vollständig von SuperHTML Web Studio unterstützt. Unter Windows XP, Windows 2000 und Windows 98/ME lässt sich die Anwendung ebenfalls nach wie vor problemlos einsetzen.

Office 2007 Look & Feel

Mit der neuen Benutzeroberfläche im Office 2007 Stil (mit Multifunktionsleiste) erreichen Sie nun noch schneller mit weniger Klicks alle Funktionen. Und wer von dieser neuen Form der Benutzerschnittstelle noch nicht überzeugt ist, kann alternativ weiterhin die klassische Darstellung mit Menüs und Symbolleisten verwenden, die natürlich komplett Benutzer-anpassbar ist!

Projektverwaltung

Endlich verfügt SuperHTML nun auch über eine Projektverwaltung. Mit der Projektverwaltung lassen sich nicht nur alle Dateien, die zu einem Projekt gehören, einfach verwalten und schneller zugreifen, sondern auch Projekt-spezifische Einstellungen wie z.B. (S)FTP-Profil, Aufgabenlisten oder Offline-Includes-Optionen zusammen speichern.

Verzeichnis-weites Suchen in Dateien

Mit dem neuen, leistungsfähigen Suchassistenten lassen sich beliebige Wörter oder Texte in Dateien bestimmter Verzeichnisse suchen. Dabei können zusätzlich auch bereits im Editor geöffnete Dateien miteinbezogen werden.

Unterstützung der aktuellen Version von Tidy.exe

Das Tool Tidy.exe hat sich zum de facto Standard für Syntax-Ãœberprüfung und Code-Validierung bzw. Reparatur und Aufbereitung von (X)HTML/XML-Code etabliert. Während SuperHTML Web Studio 8.0 nur die proprietäre Tidy-Lib von 2003 unterstützt hat, arbeitet die neue Version nun direkt mit Tidy.exe zusammen.

So kann dieses Tool auch zukünftig leicht aktualisiert werden. Natürlich kann SuperHTML Web Studio auch beliebige Tidy-Konfigurations-Dateien laden bzw. Ihre Konfigurationen zur späteren Verwendung speichern.

Drag & Drop zwischen (S)FTP/SSH-Client und dem Windows Explorer / Arbeitsplatz

Lokale Dateien aus beliebigen Windows-Explorer bzw. Arbeitsplatzfenstern lassen sich nun per Drag & Drop auf den (S)FTP-Server kopieren. Der umgekehrte Weg funktioniert natürlich genauso. Somit brauchen Sie wirklich kein externes (S)FTP-Programm mehr.

Neue Syntax-Highlighting-Schemes

Neben den zahlreichen Syntax-Highlighting-Schemes für viele Websprachen gibt es nun auch Syntax-Schemes für Ruby, Rails und Apache-Konfigurationsdateien. Natürlich können Sie auch Ihre eigenen Syntax-Schemes erstellen oder bestehende nach Ihren Wünschen anpassen.

Programm-Startseite

Auf Wunsch erscheint nun bei jedem Programmstart eine aktuelle Startseite, welche Sie über verfügbare Updates und nützliche Funktionen im Programm informiert. So verpassen Sie keine Updates oder kostenlose Maintenance Releases mehr!

Unterstützung von weichen TABS

Zur besseren Lesbarkeit von Code (HTML, PHP oder andere Sprachen) werden Absätze häufig mit TABS (Tabstops) eingerückt. Da die dargestellte Länge eines TABS auf unterschiedlichen Systemen jedoch variieren kann, wirkt u.U. der Code nur noch schlecht lesbar. Weiche TABS sind eine Verkettung von Leerzeichen in der Länge eines TABS. So sieht Ihr Code auf allen Systemen gleich “gut” aus.

Verbesserte UTF-8-Unterstützung

Durch das automatische Einfügen von Codierungs-Meta-Tags und die verbesserte Erkennung von UTF-8-Dateien (auch wenn diese keine Sonderzeichen enthalten!), fällt die Arbeit mit UTF-8-codierten Dateien in SuperHTML Web Studio nun noch leichter.

Verbesserte CSS-Unterstützung in vielen Assistenten

In vielen Assistenten (z.B. zum Einfügen von Tabellen oder Hyperlinks) können nun CSS-Klassen angegeben werden und optional auch der generierte Code mit CSS-Formatierungen statt mit normalen HTML-Formatierungen ausgegeben werden.

Neue Möglichkeiten in der Vorschau

In der Vorschau informiert eine Info-Zeile nun stets über den aktuellen IE-Browser-Modus (Quirks-Mode bzw. Standards-Compliant-Mode). Außerdem lassen sich für Formular-Steuerelemente (z.B. Buttons oder Eingabezeilen) die Betriebssystem-spezifischen Skinning-Effekte (wie unter Windows XP oder Vista) ein- oder ausschalten.

Zahlreiche kleinere Detailverbesserungen und Bugfixes

Viele Detailverbesserungen machen die Arbeit mit SuperHTML Web Studio nun noch angenehmer als bisher. Die neuen Version 8.5 ist der Beweis dafür, dass sich auch bei voller Kontrolle über den Quellcode eines Dokuments komfortabel arbeiten lässt.

*Quelle: mirabyte.com

Kategorien
Stylesheets Webentwicklung

How to use Background-Size

CSS Programming Image

Einleitung

CSS background-size ist eine Eigenschaft, mit der man die Größe von Hintergrundbildern in einem HTML-Element definieren kann.

Die background-size Eigenschaft kann verwendet werden, um die Breite und Höhe des Hintergrundbildes anzupassen, um es entweder vollständig oder teilweise im Hintergrund des Elements anzuzeigen. Es gibt verschiedene Werte, die für die background-size Eigenschaft verwendet werden können:

  1. auto – Der Standardwert. Das Hintergrundbild wird in seiner ursprünglichen Größe angezeigt.
  2. cover – Das Hintergrundbild wird so skaliert, dass es den gesamten Hintergrund des Elements ausfüllt, wobei die Proportionen des Bildes beibehalten werden. Das Bild wird möglicherweise beschnitten, um den Hintergrund vollständig zu füllen.
  3. contain – Ein Hintergrundbild wird so skaliert, dass es vollständig im Hintergrund des Elements angezeigt wird, wobei die Proportionen des Bildes beibehalten werden. Wenn das Bild kleiner als das Element ist, wird es nicht vergrößert, um das gesamte Element auszufüllen.
  4. Prozentangaben – Man kann auch Prozentangaben für die background-size Eigenschaft verwenden, um das Verhältnis von Breite zu Höhe des Hintergrundbildes zu definieren. Zum Beispiel kann man background-size: 50% 50%; verwenden, um das Hintergrundbild auf 50% der Breite und 50% der Höhe des Elements zu skalieren.
  5. Pixelangaben – Man kann auch Pixelangaben für die background-size Eigenschaft verwenden, um die genaue Breite und Höhe des Hintergrundbildes zu definieren.
  6. Weitere spezifische Werte wie “contain-float”, “cover-float” und “auto-fit” für besondere Anforderungen.

Zusätzlich zur background-size Eigenschaft gibt es noch weitere Eigenschaften, die mit Hintergrundbildern in CSS verwendet werden können, wie background-image, background-position und background-repeat. Zusammen können diese Eigenschaften dazu beitragen, den Hintergrund eines HTML-Elements genau nach den Anforderungen zu gestalten.

Unterstützung

Die EIgenschaft Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

-moz-background-size:50% 30%; /* Firefox */
-webkit-background-size:50% 30%; /* Safari, Chrome */
background-size:50% 30%; /* Opera, IE*/

Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.

.schieberegler { 
   background-image: url(x_test_x.jpg);
   background-size: cover;
}

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer Komma getrennten Liste.

1. Beispiel: background-size: 200px;
2. Beispiel: background-size: 200px 100px;
3. Beispiel: background-size: 200px 100px, 400px 200px; 
4. Beispiel: background-size: auto 200px;
5. Beispiel: background-size: 50% 25%;
6. Beispiel: background-size: contain;
7. Beispiel: background-size: cover;

Browser-Support: Alle modernen Browser (IE ab Version 10).

SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG an die Größe anpassen lässt. Ihr müsst ein wenig damit probieren bis ihr das richtige Layout gefunden habt. Viel Erfolg.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K17

Joomla Logo flat

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

https://www.w3.org/Style/CSS/Overview.de.html

Zusammenfassung

Dieses Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen herauslaufen können. Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert. Hierbei ist der Abstand vom rechten Rand als Prozentwert angegeben und “schwimmt” somit mit der Browserbreite mit.

Bei diesem Beispiel muss man ein wenig Rechnen. Die Summe der Breiten ergibt 98%. Der Abstand vom Body-Rand zur ersten Box, plus ihre Breite plus den Abstand ergibt die left-position der nächsten Box. (alles in %).

Wenn Du nun also unterschiedlich breite Boxen oder mehr Abstand möchtest, brauchst Du diese Werte nur gegeneinander zu verschieben.

Weiterlesen “Joomla Template Reihe K17”
Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K04

Joomla Logo flat

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

https://www.w3.org/Style/CSS/Overview.de.html

Zusammenfassung

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px. Als primären Font verwende ich Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder: 

#container {width: 840px; 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. Dieses Template ist getestet mit Firefox 3 und dem IE 8. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

28 kB

Kategorien
Joomla Templates

Joomla Template Reihe K23

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

https://www.w3.org/Style/CSS/Overview.de.html

Zusammenfassung

Der Hauptrahmen hat eine Breite von 980px. Zentriert automatisch über margin:, besitzt einen Header und einen Top Bereich. Der Teil darunter nimmt den Pathway auf und die zugewiesenen Module.

#rahmen {
width:980px;
margin:0 auto;
text-align:left;
}
#top-aussen {
width:960px;
height:50px;
margin:0;
background-color:#FFFFFF;
border-left:20px solid #2664B7;
}
#header-aussen {
width:960px;
height:180px;
margin:0;
border-left:20px solid #000000;
background:#FFFFFF url(../images/bg-header-aussen.jpg);
}

Screenshot

Joomla Template K23
Joomla Template K23

Im Screenshot sind mehrere Module eingebettet, diese sind abhängig von der Zuweisung und Aktivierung im CMS selbst.

109 kB