How To Style Wordpress 2.5
21. March 2008 - 10:54 am UhrDrupal und Joomla bieten umfassende, dass im Falle von Drupal, ein Blog und Forum als Kernmodule. Themes diesen Plattformen kann sowohl durch CSS (Cascading Style Sheets) und PHP (Personal Home Page oder PHP: Hypertext Preprocessor) Code-Änderungen. Allerdings sind diese Plattformen sind komplex genug, und das Lernen zu installieren, verwalten und anpassen diesen Plattformen kann eine schwierige Aufgabe.
Nach dem Studium der beiden Plattformen, einschließlich der mit ihnen auch auf meinem Bett-Test-Plattform und über die Internet, entschied ich mich, um einen Blick auf WordPress als eine mögliche Lösung, um meine Zukunft Web-Bedürfnisse. Ich war überrascht, dass die neueste Version von WordPress ist einfach zu installieren, einfach zu bedienen und leicht zu Thema.
In diesem Artikel werde ich beschreiben, wie Sie WordPress 2.5.
STYLING WordPress - Jakob DESIGN
Der aktuelle Entwurf für meine persönliche Website, SelectDigitals.com, basiert auf der Arbeit und der Philosophie von Jakob Nielsen, http://www.useit. com /. Nielsen's Arbeit wurde für die nutzbaren Websites, die Inhalte, die einfach zu finden und leicht zu lesen.
Die Gestaltung von Nielsen's Website (und meiner Website, mit Genehmigung) ist einfach und elegant ist der Vorrangiges Ziel der Bereitstellung von Inhalten. WordPress hat auch das vorrangige Ziel der Bereitstellung von Inhalten. Also, mein erstes WordPress Design wird sich bemühen, den Blick und das Gefühl von unseren Seiten mit dem zusätzlichen Merkmal der Besucher Interaktivität. Ich werde auf diese, wie die Jakob-Design.
Es gibt sechs wichtige Komponenten, aus denen sich das Aussehen der Standard-WordPress-Blog:
1. Header-Grafik,
2. Blog-Titel,
3. Tagline,
4. Page,
5. Hintergrund, und
6. Fußzeile.
Um die Jakob-Blog schnell geladen werden, entschied ich mich nicht für die Verwendung eines Kopf-oder Fußzeile Grafik und Design, da die im Wesentlichen die Standard-WordPress Thema mit einem neuen Mantel, nur ein wenig Grafik-Design zu tun. In der Tat, ich nur erforderlich, eine Grafik auf, um die Blog-Seite mit den beiden Spalte Wirkung. Die Blog-Seite wird "Float" zentriert in einem dunkel-blau * * Hintergrund Stelle, die dazu dienen, die Frame-Seite.
Erstellen der Grafik
Ein Blick in die Bild-Verzeichnis für den Standard-WordPress Thema zeigt die Standard-Bilder für die Kubrick-Look. Im Moment gibt es nur eine Datei von besonderem Interesse: kubrickbgwide.jpg. Für die Jakob-Design, die anderen Kubrick Bilder sind nicht erforderlich, wird aber für die "Lust", komplexer Design.
Die Blog-Seite wird von einem "Stück" durch die Mitte der neuen Design. Die Scheibe ist ein schmales Bild der Breite der Blog-Seite.
Begann ich mein Design, indem eine grundlegende Seite (760px X 600px) in Adobe Illustrator. Ich mag mit Illustrator für Kunstwerke dieser Art, aber auch andere Programme verwendet werden könnten, zu.
Habe ich die grundlegenden Seite mit der Seite der Hintergrundfarbe (nicht zu verwechseln mit den dunkelblauen Körper * * Hintergrund ). Das Licht Hintergrundfarbe wird "show-off" farbigen Text, wie der Blog-Titel und Slogan.
I überlagert die Seite mit zwei Rechtecke, oder "Spalten". Die linke Hand, 510px-breiten Spalte ist gefüllt mit einem Pastell-gelbe Farbe, die der rechten Spalte, 230px breit, ist mit einer pastellblau Farbe. Die beiden Spalten innerhalb der Seite mit einer grundlegenden 10px Grenze der Seite Hintergrund um sie herum.
In Illustrator habe ich dann zu einer 760px X 40px Rechteck auf der Seite und verwendet dieses, um eine Scheibe. Ein Stück ist nichts mehr, dass ein Vertreter Stück ein größeres Bild, in diesem Fall, der das Blog-Design. Ich habe dann die Scheibe als kubrickbgwide.jpg. Kubrickbgwide.jpg werden, um die Blog-Seite Hintergrund. Als neue Inhalte in die Blog-Seite, Kopien der Scheibe wird vertikal gestapelt zu "wachsen" die zwei-Spalte Hintergrund. Dies ist das einzige Bild benötigt einen Browser, um die Blog-Homepage. Der Blog wird deshalb sehr schnell laden.
Bisher recht einfach, nicht wahr? Der Rest des Designs wird durch das Thema der CSS-Datei und / oder über die Schnittstelle zur Administration WordPress.
CSS Änderungen
Die Standard-CSS-Datei ist in der WP-content_themes_default Verzeichnis . Der CSS Text unten zeigt die Code-Änderungen zu style.css. Bevor Sie Änderungen an den Standard-CSS-Datei, die ich immer und speichern Sie eine Kopie des Originals. Die CSS-Datei geöffnet werden kann und geändert mit einem Text-Editor. Text zu streichen, wird in eckigen Klammern. Neue oder geänderte Text wird angezeigt, ohne Klammern.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]
background: # 636f89; / * Setzen Sie den Body Hintergrundfarbe blau * /
)
# page (
[background-color: white;]
[border: 1px solid # 959596;]
border: none ;
)
[# header (
background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;
)
# headerimg
(margin: 7PX 9px 0;
height: 192px;
width: 740px;
)]
# footer (
[background: # eee url ( 'images / kubrickfooter.jpg ') no-repeat top;]
background: # fffef2; / * Sehr leicht gelb * /
)
h1, h1 a, h1 a: hover, h1 a: visited, # headerimg [. Beschreibung]
(text-decoration: none;
[color: white;]
Farbe: rot; / * Machen Sie den Titel rot * /
padding-bottom: .5 em; / * Setzen Sie ein wenig Platz zwischen den Titel und den Slogan * /
)
.
Beschreibung (text-decoration: none;
color: blue; / * Machen Sie den Slogan blau * /
text-align: center;)
/ * End Typography & Colors * /
/ * Begin Structure * /
# page (
[background-color: white;]
background-color: fffef2; / * Sehr leicht gelb * /
[border: 1px solid # 959596;]
border: none;)
# header (
[background-color: # 73a0c5;]
background-color: # fffef2; / * Sehr leicht gelb * /
)
/ * End Structure * /
Nach und speichern diese Änderungen an der Datei style.css, die Blog-Seite neu gestaltet wird.
STYLING WordPress — - DIE FANCY DRESS DESIGN
Obwohl ich, wie die Einfachheit der Jakob-Blog-Design, wird es nicht Appell an alle. Viele Leute lieben "Glanz". Der Preis für ein WordPress Fancy Dress ist oft ein langsamer geladen Blog ohne Erhöhung der Benutzerfreundlichkeit. Allerdings, für diejenigen, die "dress up" das Auftreten von ihr Blog, hier sind weitere Möglichkeiten, diese erreicht werden kann.
Zunächst ist darauf hinzuweisen, dass dem Hintergrund der Standard-WordPress-Seite nutzt header (kubrickheader.jpg) und Fußzeile (kubrickfooter.jpg) Grafiken. Diese Grafiken werden nicht mit einer Farbe, wie in der Jakob-Design, aber mit einem Gefälle. Es scheint auch einen sehr kleinen Schatten unter der Seite.
Aufgrund der Komplexität der Standard-Seite, zusätzliche Grafiken erforderlich sind und somit mehr Scheiben benötigt werden. Außerdem, wenn ein komplexer Körper Hintergrund gewünscht wird, in dem auf "Float" die Seite, ein "Startkapital" für das Bild kann auch verlangt werden (dies ist, was die kubrickbgcolor.jpg Bild ist).
Nach wie vor habe ich eine Zeichnung von der Blog-Seite in Illustrator. Die Seite, mit abgerundeten Ecken, schwimmt auf die Standard-WordPress Hintergrund, hat eine gelbe Gradienten, und hat einen kleinen Schatten.
Ich zum ersten Mal ein 760px X 600px Rechteck auf der Illustrator artboard. Habe ich dieses Rechteck mit der Hintergrundfarbe (C: 8, M: 6, J: 6, K: 0).
Weiter, mit dem Abgerundetes Rechteck-Tool, habe ich eine 736px X 584px Rechteck und füllte ihn mit der gelben Farbverlauf. Im Wesentlichen habe ich die Seite so groß wie möglich in den Hintergrund, wobei genug Platz für den Schatten.
Schließlich habe ich den abgerundeten Rechtecks einen kleinen Schatten.
Um sicherzustellen, dass die Scheiben fusionieren perfekt in den Körper * * Hintergrund habe ich ein 60px X 60px Quadrat der gleichen Hintergrundfarbe (C: 8, M: 6, J: 6, K: 0) und gespeichert, wie es kubrickbgcolor.jpg. Das kleine Bild wird verwendet, um "Farbe" des Körpers Hintergrund. Dies ist ein wichtiger Schritt, da der Hintergrund für die Einrichtung und den Hintergrund für die Seite muss mit perfekt für die Lust auf Design.
Erstellen der Scheiben
Mit dem Rechteck-Werkzeug , Ich habe ein 760px X 200px Rechteck auf dem Layout oben beschrieben. Ich positioniert dieses Rechteck an der Spitze der Layout und benutzte es, um ein Stück für die Header-Grafik. Zuvor habe ich deaktiviert Schlaganfall und füllen.
Ich die Scheibe gespeichert als kubrickheader.jpg.
Habe ich den Fuß-und Seiten-Scheiben in ähnlicher Weise umbenannt und sie als kubrickfooter.jpg und kubrickbgwide.jpg, respectively. Kubrickfooter.jpg ist 760px X 63px und kubrickbgwide ist 760px X 40px.
Es gibt noch zwei weitere Kubrick-Bilder in der Bilder-Verzeichnis: kubrickbg-ltr.jpg und kubrickbg-rtl.jpg (von links nach rechts, und von rechts nach links). Diese Bilder sind die gleichen wie kubrickbgwide.jpg. Also habe ich zwei Kopien kubrickbgwide.jpg und sie entsprechend umbenannt.
CSS Änderungen
Die Standard-CSS-Datei ist in der WP-content_themes_default Verzeichnis. Der CSS Text unten zeigt die Code-Änderungen zu style.css. Eckige Klammern zeigen an, welche Codes zu löschen und den neuen Code wird ohne Klammern. Bevor Sie die Änderung, ich kopiert und gespeichert, die Original-Datei. Für die Lust auf Design, die CSS-Änderungen sind minimal.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]
background: # e7e7e7 url (' images / kubrickbgcolor.jpg ');)
# page (
[background-color: white;]
[border: 1px solid # 959596;]
)
# header (
[background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;]
background: # e7e7e7 url ( 'images / kubrickheader.jpg') no-repeat bottom center;)
# footer (
[background: # eee url ( 'images / kubrickfooter.jpg') no-repeat top;]
background: # e7e7e7 url ( 'images / kubrickfooter.jpg') no-repeat top;
)
h1, h1 a, h1 a: hover, h1 a: visited, # headerimg [Bezeichnung] (
[color: white;]
Farbe: rot; / * Machen Sie den Blog-Titel rot * /
padding-bottom: .5 em; / * Setzen Sie ein wenig Platz zwischen den Titel und den Slogan * /
)
.
Beschreibung (text-decoration: none;
color: blue; / * Nehmen Sie die Blog-Slogan blau * /
text-align: center;)
/ * End Typography & Colors * /
/ * Beginn Struktur * /
# page (
[background-color: white;]
background-color: # e7e7e7;
[border: 1px solid # 959596;]
border: none;)
# header (
[background-color: # 73a0c5;]
background-color: # e7e7e7;)
/ * End Structure * /
Nach die Gestaltung und die CSS-Arbeit, die WordPress zeigt es neue Kleider für den gesamten Internet.
STYLING WordPress - Der NO-GRAFIK DESIGN
Nichts alle schief geht, wenn ein Browser-Lasten eine Seite aus dem Internet, oder? Selbst wenn dies in der Tat der Fall ist, ist es immer noch sinnvoll, zu prüfen, wie eine Seite zeigt den Fall, dass die Grafiken nicht gefunden werden kann.
Bei der Jakob-Design, wenn kubrickbgwide . jpg nicht heruntergeladen haben, aus irgendeinem Grund, wird die Seite nicht angezeigt akzeptabel. Aufgrund der hellen Hintergrund, die für die Kopf-und Fußzeilen, sie normalerweise auf dem Display dunkel-blauen Hintergrund für den Körper. Allerdings ist die Seite Inhalt wird schwer zu lesen: sie fast verliert sich in der dunkel-blauen Hintergrund. Ein heller Hintergrund für den Körper hätte eine viel klüger Wahl.
Der Schöpfer der Kubrick Design dieses Problem gelöst, indem alternative Hintergrundfarben verwendet werden, wenn die Grafik nicht vorhanden waren. Die Aufgaben sind innerhalb der style.css-Datei:
body (background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');)
# header (background: # 73a0c5 url ( 'images / kubrickheader.jpg') no-repeat bottom center;)
# footer (background: # eee url ( 'images / kubrickfooter.jpg') no-repeat top;)
Wenn die Bilder nicht verfügbar sind, die alternative RGB Farbwert wird.
Wenn die Grafiken nicht zur Verfügung stehen, die Standard-WordPress-Blog ist noch präsentabel und nutzbar. Für eine erste Seite Redesign, beginnend mit dem grundlegenden Design Kubrick, ohne Grafiken, könnte ein guter Ort, um zu beginnen. Dies kann durch die Vereinfachung der Aussagen über:
body (background: # d5d6d7;)
# header (background: # 73a0c5;)
# footer (background: # EEE;)
Die Farben können dann geändert werden, um verschiedene Farbschemata Blog. Ändern Sie einfach die RGB-Farbe-Codes, speichern Sie die CSS-Datei, und aktualisieren Sie den Browser, um zu sehen, die Änderungen sofort.
Ihr für eine erfolgreiche Blog,
Royce Tivel
Comments Off | Internet

