15.04.2010
Internes - Layoutänderung
Dieses kleine private Weblog dient mir ja auch zum Designbasteln und Herumspielen. Und so sieht es hier und da immer mal wieder ein bisschen anders aus. Heute musste der alte gestreifte Hintergrund dran glauben. Ich wollte gern etwas im Hintergrund haben, was besser zum Titel des Blogs passt. Jetzt habe ich mir mit Hilfe von BgPatterns so etwas wie ein Netz erstellt (was zweifellos mit “Netzkescher” stimmig ist) und jedenfalls für den Augenblick für gut befunden. Gleich hochgeladen und da seht ihr es nun - es sei denn, euer Browserfenster ist zu klein. Dann sieht man vom Hintergund ja nicht so viel. Die Blautöne habe ich gewählt, weil ich den Blogtitel auch mit Wasser verbinde. Und bei Wasser denke ich halt an blau. Außerdem passt es zur Blogbeschreibung, finde ich zumindest. Ihr könnt bitte gern euren Kommentar angeben. Würde mich freuen.
Jetzt noch ein paar Worte zu BgPatterns.
BgPatterns
BgPatterns ist ein Onlinetool zum Erstellen von Hintergründen für Webseiten. In den wenigen Funktionen stecken eine ganze Menge Möglichkeiten. Ich beschreibe kurz, wie ich zu meinem neuen Hintergrund gekommen bin. Was hier in wenigen Punkten zusammengefasst ist, ist allerdings das Ergebnis von reichlich Herumexperimentiererei. Diese würde ich übrigens dringend empfehlen, unterstützt sie doch den Kreativprozess.
Bild ausgewählt und Skalierung festgelegt
Farben eingestellt
Kachelgröße und Textur gewählt
Transparenz
Dann ordentlich mit den Transparenzwerten beim Bild und Textur herumgespielt.
Tipp: Der Slider erscheint, wenn man in das kleine Textfeld klickt. Dann braucht man die Werte nicht eintippen.
Vorschau
Um einen guten Eindruck der Wirkung zu erzielen, ist das Vorschaufenster gut geeignet. Mit einem Klick auf “Apply Background” wird die aktuelle Einstellung auf die ganze Seite des Tools gekachelt. Dadurch gewinnt man einen noch besseren Eindruck des Designs.
Mit “Rotieren” experimentiert
Das habe ich doch tatsächlich zunächst übersehen. Wenn man hier verschiedene Winkel probiert muss man u.U. die Bildskalierung wieder anpassen. Dafür hatte ich aber keine Zeit mehr. Deshalb ist mein aktueller Hintergrund (noch?) gerade.
Download
Mit “Download Image” kann man sich das fertige Produkt herunterladen und in die eigene Seite einbinden. Bei mir geschieht dies mit der Zeile
body {
...
background: #010F2C url(../imgs/bg03.jpg) repeat;
...
}
Wenn ihr auch mit dem Tool einen Hintergrund erstellt habt, schreibt die URL euer Seite doch in einen Kommentar.
10.04.2010
Tabellen in Flatpress erstellen
Tabellen in Flatpress zu erstellen ist ein gruseliges Thema, weil es mit dem eingebauten Editor eigentlich gar nicht geht. Man muss eh HTML verwenden und dann bietet es sich an, die Tabelle gleich extern zu erstellen und den Code später einfach in den Flatpress-Editor zu importieren. Wenn man in der Konfiguration des BBCode-Plugins die Option “Benutzung von HTML-Code und BBCode erlauben” aktiviert hat, muss man nicht einmal Tags setzen. 
Damit die Erstellung des Grundgerüstes schneller geht, kann man sich z.B. eines Online-Tools bedienen. Zwei stelle ich hier beispielhaft vor.
Homepage-Total-Tabellengenerator
Mit diesem Tool geht das Entwickeln des Grundgerüstes sehr zügig.
Nach dem Aufruf der Seite erscheint die Grundversion. Man setzt die gewünschten Optionen (die Bedeutung der späteren HTML-Tags muss man natürlich kennen) und klickt auf “Anzeigen”. Der Quellcode erscheint und kann in den Flatpresseditor kopiert werden. Bei Bedarf lässt man sich eine Vorschau anzeigen. 
Weiter gehende Einstellmöglichkeiten erhält man, indem man auf das kleine +-Symbol klickt. 
Mit den nun möglichen Optionen lässt sich die Tabelle sehr individuell gestalten. Nicht vergessen, die Angaben, die man nutzen möchte, auch im Optionenfeld zu markieren! 
HTML Table Generator with CSS
Der Tabellegenerator von Spectrum Research geht noch einen Schritt weiter. Er legt die CSS-Formatierungsangaben in eine eigene Datei. Diese Lösung ist also nichts für die schnelle Tabelle zwischendurch, sondern mehr etwas für die grundlegende Arbeit am Design. 
Tipps zum Editieren in Flatpress
Dazu verweise ich mal auf die Artikel Flatpress Editor und Flatpress-Editor - Text Formating Toolbar sowie Firefox 3.6 und “Text Formatting Toolbar”.
26.03.2010
Icon-Suchmaschine Reloaded
Ich habe ja schon einmal in diesem Artikel auf eine Suchmaschine für Icons hingewiesen. Über den Blog von Matthias Schütz (mal wieder!!) bin ich heute auf eine weitere aufmerksam geworden. Find Icons ermöglicht den Zugriff auf z.Zt. über 280000 Icons.
Nachdem man einen Suchbegriff eingegeben hat und die passenden Ergebnisse präsentiert bekommt, kann man die Suche weiter verfeinern. Einen Überblick darüber vermittelt die folgende Abbildung.
Wieder ein gutes Tool, finde ich.
15.02.2010
Css-Color-Replace - Farbvarianten erstellen
Auf Tipps, die Matthias Schütz in seinem Blog veröffentlicht, habe ich hier schon mehrmals verwiesen. Ich habe auch keine Ahnung, wie er diese Dinge immer ausgräbt?? Also tragt euch am besten gleich selbst in seinen Feed ein, dann vermeidet ihr den Umweg über den Netzkescher.
Um was geht es heute?
Um ein Online-Tool, das hilft, die Farbangaben in einer CSS-Datei einfach zu verändern. Das geht in drei Schritten:
- Gewünschte CSS-Datei hochladen
- Farben ersetzen
- Die geänderte CSS-Datei herunterladen
Ich habe zum Testen die common.css des Flatpress-Standard-Themes “leggero” hochgeladen. Die in der Datei vorhandenen Farbwerte werden übersichtlich aufgelistet und können in einem Pop-Up-Fenster leicht verändert werden. Ist man fertig, klickt man eine Schaltfläche zum Erstellen der geänderten CSS-Datei und lädt die Datei anschließend über eine weitere Schaltfläche herunter. Die Farbangaben in der heruntergeladenen Datei sind entsprechend geändert. Simpel.
Seht euch auch den Originalartikel von Matthias an. Er gibt noch ein paar weitere Hinweise.