How To Style Wordpress 2.5
Royce Tivel asked:
Es ist demnächst an der Zeit, meine Website für die "Web 2.0 Alter neu zu gestalten." Ich habe ernsthaft an zwei Plattformen, Drupal und Joomla, sah, mit denen dies zu erreichen.
Drupal und Joomla umfassende Pakete anzubieten, die im Falle von Drupal, umfasst ein Blog und Forum als Kernmodule. Themenbereich diesen Plattformen kann sowohl durch CSS erreicht (Cascading Style Sheets) und PHP (Personal Home Page oder PHP: Hypertext Preprocessor) Code-Änderungen werden. Allerdings sind diese Plattformen komplexen und Lernen genug zu installieren, zu verwalten, und passen Sie diesen Plattformen kann eine schwierige Aufgabe.
Nach dem Studium der beiden Plattformen, einschließlich der Verwendung sie beide auf meinem Prüfstand und auf der Plattform Internet, beschloss ich, einen Blick auf WordPress als eine mögliche Lösung für meine Zukunft Web Bedürfnissen. 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 Persönliche WordPress 2.5.
STYLING WordPress – DAS 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 nutzbar zu machen Websites, die Inhalte, die leicht zu finden und leicht zu lesen liefern gewidmet.
Das Design der Website Nielsen (und meiner Website, mit Erlaubnis) ist elegant und einfach und hat die Vorrangiges Ziel der Bereitstellung von Inhalten. WordPress hat auch das vorrangige Ziel der Bereitstellung von Inhalten. Also, mein erstes Wordpress Design bemüht, um das Aussehen und Verhalten unserer Website mit der zusätzlichen Funktion der Besucher Interaktivität. Ich bezeichne dies als die Jakob-Design.
Es gibt sechs wichtige Komponenten, aus denen 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 auf eine Kopf-oder Fußzeile Grafik verwenden, und da der Entwurf wird im Wesentlichen die Standard-WordPress-Theme mit einem neuen Mantel, nur ein wenig Grafik-Design Arbeit getan werden muss. In der Tat, ich brauchte nur auf Schaffung einer Grafik auf der Blog-Seite mit ihr erzeugen die beiden Spalte Wirkung. Die Blog-Seite "float" in einem dunklen zentriert blue * Körper * Hintergrund, die dazu dienen, um die Seite Frame.
Erstellen der Grafik
Ein Blick in die Bild-Verzeichnis für die Standard-WordPress-Theme zeigt die Standard-Bilder für die Kubrick Blick verwendet. Denn jetzt gibt es nur eine Datei von besonderem Interesse: kubrickbgwide.jpg. Für die Jakob-Design, sind die anderen Kubrick Bilder nicht notwendig, doch wird für die "Fancy", komplexere Designs benötigt werden.
Die Blog-Seite wird von einem "Stück" durch die Mitte des erstellt werden neues Design. Die Scheibe ist ein schmales Bild der Breite der Blog-Seite.
Begann ich meine Absicht, indem wir einen grundlegenden Seite (760px x 600px) in Adobe Illustrator. Ich mag mit Illustrator für das Artwork dieser Art, obwohl auch andere Programme verwendet werden könnten, zu.
Füllte ich die Grundstruktur der Seite mit Hintergrund-Farbe der Seite (nicht mit dem dunkelblauen Hintergrund * * Körper verwechselt werden ). Das Licht Hintergrundfarbe wird "show-off"-farbiger Text, wie der Titel des Blogs und Slogan.
I überlagert die Seite mit zwei Rechtecke, oder "Spalten". Die linke, 510px-breite Spalte ist mit einem pastellgelb Farbe gefüllt, die rechte Spalte, 230px breit, ist mit einem Pastell-blaue Farbe gefüllt. Die beiden Spalten fügen sich in die Grundstruktur der Seite mit 10px Rand der Seite Hintergrund um sie herum.
In Illustrator, legte ich ein 760px X 40px Rechteck auf der Seite und hat bei dieser ein Stück zu machen. Eine Scheibe ist nichts mehr, dass ein Vertreter Stück ein größeres Bild, in diesem Fall, der Blog-Design. Ich speicherte die Slice als kubrickbgwide.jpg. Kubrickbgwide.jpg werden verwendet, um die Blog-Seite Hintergrund erzeugen. Als neue Inhalte in der Blog-Seite hinzugefügt wird, werden Kopien der Scheibe vertikal gestapelt "wachsen" die Zwei-Spalten-Hintergrund. Dies ist das einzige Bild von einem Browser benötigt, um die Blog's home page zu erstellen. Der Blog wird daher sehr schnell zu laden.
Ziemlich einfach so weit, nicht wahr? Der Rest des Designs ist durch CSS-Datei des Designs und / oder durch die WordPress-Schnittstelle zur Administration.
CSS Änderungen
Die Standard-CSS-Datei ist im Verzeichnis wp-content_themes_default erreicht . Die CSS-Text zeigt den Code Änderungen style.css. Bevor Sie Änderungen an den Standard-CSS-Datei, mache ich immer und speichern Sie eine Kopie des Originals. Die CSS-Datei geöffnet werden kann und mit einem beliebigen Texteditor geändert. Text gestrichen wird in eckigen Klammern angegeben werden. Neue oder geänderte Text wird ohne Klammern angegeben werden.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]< br />
background: # 636f89; / * Set the Body Hintergrundfarbe blau * /
)
< br /> # 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 [. Bezeichnung] (
text-decoration: none;
[color: white;]
< br /> Farbe: rot / * Titel * Make rot /
padding-bottom: .5 em; / * ein kleiner Spalt zwischen den Titel und den Slogan * /
)
.
description (text-decoration: none;
color: blue; / * Make die Tagline blue * /
text-align: center;)
/ * End Typography & Colors * /
/ * Begin Structure * /
# page (
[background-color: white;]
background-color: fffef2; / * Sehr leicht gelb * / < br />
[border: 1px solid # 959596;]
border: none;)
# header (
[background-color: # 73a0c5;]
background-color: # fffef2; / * Sehr leicht gelb * /
)
/ * End Structure * /
Nachdem Sie und speichern diese Änderungen an der style.css-Datei ist die neu gestaltete Blog-Seite durchgeführt.
STYLING WordPress — – DAS SOUMONCES DESIGN
Obwohl Ich mag die Einfachheit des Jakob Blog-Design, wird es nicht appelliere an alle. Viele Menschen lieben "Glanz". Der Preis für einen Phantasie WordPress Kleid ist oft ein langsamer geladen Blog ohne Erhöhung der Benutzerfreundlichkeit. Doch für diejenigen, die "dress up" das Aussehen seines Blogs wollen, hier weitere Möglichkeiten, kann dies erreicht werden sollten.
Zunächst ist darauf hinzuweisen, dass der Hintergrund der Standard-WordPress-Seite nutzt header (kubrickheader.jpg) und Fußzeile (kubrickfooter.jpg) Grafiken. Diese Grafiken werden nicht mit einer bestimmten Farbe gefüllt, wie in der Jakob-Design, aber mit einem Gefälle. Es scheint auch ein sehr kleiner Schatten unter der Seite.
Aufgrund der Komplexität der Standard-Seite, sind zusätzliche Grafiken benötigt und somit mehr Schichten benötigt werden. Darüber hinaus, wenn ein komplexer Körper Hintergrund gewünscht wird, in dem zu "schweben" die Seite, ein "seed" Bild für diese, auch erforderlich sein (das ist, was die kubrickbgcolor.jpg Bild für sich).
Nach wie vor habe ich eine Zeichnung der Blog-Seite in Illustrator. Die Seite, mit abgerundeten Ecken, schwimmt auf dem Standard WordPress Hintergrund hat eine gelbe Gefälle, und hat einen kleinen Schatten.
Ich zunächst ein 760px x 600px Rechteck auf der Zeichenfläche Illustrator. Ich füllte dieses Rechteck mit der Hintergrundfarbe (C: 8, M: 6, Y: 6, K: 0).
Weiter, mit dem abgerundetes Rechteck-Werkzeug, habe ich ein 736px X 584px Rechteck und füllte es mit dem gelben Farbverlauf. Im Wesentlichen habe ich die Seite so groß wie möglich im Hintergrund laufen lassen genügend Raum für den Schlagschatten.
Schließlich gab ich das Rechteck mit abgerundeten Ecken einen kleinen Schatten.
Um sicherzustellen, dass die Scheiben perfekt verschmelzen in den Körper * * Hintergrund wird, habe ich ein 60px X 60px Quadrat der gleichen Hintergrundfarbe (C: 8, M: 6, Y: 6, K: 0) und speichern Sie es als kubrickbgcolor.jpg. Das kleine Bild wird benutzt werden, um "Farbe" des Körpers Hintergrund. Dies ist ein wichtiger Schritt, da der Hintergrund für den Körper und den Hintergrund für die Seite verwendet werden, müssen perfekt auf die Fancy Design Match verwendet.
Erstellen der Scheiben
Mit dem Rechteck-Werkzeug , stellte ich ein 760px x 200px Rechteck auf dem Layout oben beschrieben. Ich stellte dieses Rechteck an der Spitze des Layouts und benutzte es, um ein Stück für die Header-Grafik zu machen. Bevor wir dies tun, ich deaktiviert Schlaganfall und zu füllen.
Rettete ich die Scheibe als kubrickheader.jpg.
Ich habe die Fußzeile und Seite Scheiben in ähnlicher Weise und nannte sie als kubrickfooter.jpg und kubrickbgwide.jpg, respectively. Kubrickfooter.jpg ist 760px X 63px und kubrickbgwide ist 760px X 40px.
Es gibt zwei weitere Kubrick Bilder im Verzeichnis images: kubrickbg-ltr.jpg und kubrickbg-rtl.jpg (nach rechts und links rechts nach links). Diese Bilder sind die gleichen wie kubrickbgwide.jpg. Also machte ich zwei Kopien kubrickbgwide.jpg und nannte sie entsprechend.
CSS Änderungen
Die Standard-CSS-Datei wird in der WP-content_themes_default Verzeichnis. Die CSS-Text zeigt den Code Änderungen style.css. Eckige Klammern zeigen, welche Codes zu löschen und neue Code ohne Klammern angegeben. Vor der Änderung, kopiert und gespeichert ich die Original-Datei. Für die Lust auf Design, sind die CSS Änderungen minimal.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]< br />
background: # E7E7E7 url (' images / kubrickbgcolor.jpg ');)
< br /> # 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;]
< br /> Farbe: rot / * Blog-Titel rot * Make /
padding-bottom: .5 em; / * ein kleiner Spalt zwischen den Titel und den Slogan * /
)
.
description (text-decoration: none;
color: blue; / * the blog Slogan blue * Make / < br />
text-align: center;)
/ * End Typography & Colors * /
/ * Start Struktur * /
# page (
[background-color: white;]
background-color: # E7E7E7;
< br /> [border: 1px solid # 959596;]
border: none;)
# header (
[background-color: 73a0c5;]
background-color: # E7E7E7;)
/ * End Structure * /
Nach das Design und die CSS arbeiten, zeigt die WordPress es neue Kleider auf das gesamte Internet.
STYLING WordPress – DIE NO-GRAFIK DESIGN
nichts schief geht, wenn alle Browser lädt ein 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 bei der Grafik kann nicht gefunden werden.
Im Fall des Jakob-Design, wenn kubrickbgwide Anzeige . jpg nicht heruntergeladen haben, erhalten aus irgendeinem Grund würde die Seite nicht angezeigt akzeptabel. Aufgrund der hellen Hintergrund für die Kopf-und Fußzeile verwendet werden, zeigen sie normalerweise auf dem dunkelblauen Hintergrund der Stelle übertragen werden. Allerdings wird der Inhalt schwer zu lesen: es fast in den dunkelblauen Hintergrund verloren geht. Ein heller Hintergrund für die Einrichtung könnte eine viel klügere Wahl gewesen.
Der Schöpfer der Kubrick-Design löste dieses Problem durch die Vergabe stellvertretenden Hintergrundfarben verwendet werden, wenn die Grafik nicht vorhanden waren. Die Zuordnungen sind in der Datei style.css gemacht:
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, wird die alternative RGB-Farbwert verwendet werden.
Wenn die Grafik nicht verfügbar sind, ist die Standard-WordPress-Blog noch vorzeigbar und nutzbar sind. Für eine erste Seite Redesign, beginnend mit dem grundlegenden Design Kubrick, ohne Grafik, könnte ein guter Ort, um zu beginnen. Dies kann durch die Vereinfachung der obigen Aussagen erfolgen:
body (background: # d5d6d7;)
# header (background: # 73a0c5;)
# footer (background: # eee;)
Die Farben können dann geändert werden, probieren Sie verschiedene Farbschemata Blog. Ändern Sie einfach die RGB-Codes, speichern Sie die CSS-Datei, und aktualisieren Sie den Browser, um die Änderungen sofort sehen.
Yours für einen erfolgreichen Blog,
Royce Tivel
Sign Language For Babies And Beyond
Es ist demnächst an der Zeit, meine Website für die "Web 2.0 Alter neu zu gestalten." Ich habe ernsthaft an zwei Plattformen, Drupal und Joomla, sah, mit denen dies zu erreichen.
Drupal und Joomla umfassende Pakete anzubieten, die im Falle von Drupal, umfasst ein Blog und Forum als Kernmodule. Themenbereich diesen Plattformen kann sowohl durch CSS erreicht (Cascading Style Sheets) und PHP (Personal Home Page oder PHP: Hypertext Preprocessor) Code-Änderungen werden. Allerdings sind diese Plattformen komplexen und Lernen genug zu installieren, zu verwalten, und passen Sie diesen Plattformen kann eine schwierige Aufgabe.
Nach dem Studium der beiden Plattformen, einschließlich der Verwendung sie beide auf meinem Prüfstand und auf der Plattform Internet, beschloss ich, einen Blick auf WordPress als eine mögliche Lösung für meine Zukunft Web Bedürfnissen. 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 Persönliche WordPress 2.5.
STYLING WordPress – DAS 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 nutzbar zu machen Websites, die Inhalte, die leicht zu finden und leicht zu lesen liefern gewidmet.
Das Design der Website Nielsen (und meiner Website, mit Erlaubnis) ist elegant und einfach und hat die Vorrangiges Ziel der Bereitstellung von Inhalten. WordPress hat auch das vorrangige Ziel der Bereitstellung von Inhalten. Also, mein erstes Wordpress Design bemüht, um das Aussehen und Verhalten unserer Website mit der zusätzlichen Funktion der Besucher Interaktivität. Ich bezeichne dies als die Jakob-Design.
Es gibt sechs wichtige Komponenten, aus denen 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 auf eine Kopf-oder Fußzeile Grafik verwenden, und da der Entwurf wird im Wesentlichen die Standard-WordPress-Theme mit einem neuen Mantel, nur ein wenig Grafik-Design Arbeit getan werden muss. In der Tat, ich brauchte nur auf Schaffung einer Grafik auf der Blog-Seite mit ihr erzeugen die beiden Spalte Wirkung. Die Blog-Seite "float" in einem dunklen zentriert blue * Körper * Hintergrund, die dazu dienen, um die Seite Frame.
Erstellen der Grafik
Ein Blick in die Bild-Verzeichnis für die Standard-WordPress-Theme zeigt die Standard-Bilder für die Kubrick Blick verwendet. Denn jetzt gibt es nur eine Datei von besonderem Interesse: kubrickbgwide.jpg. Für die Jakob-Design, sind die anderen Kubrick Bilder nicht notwendig, doch wird für die "Fancy", komplexere Designs benötigt werden.
Die Blog-Seite wird von einem "Stück" durch die Mitte des erstellt werden neues Design. Die Scheibe ist ein schmales Bild der Breite der Blog-Seite.
Begann ich meine Absicht, indem wir einen grundlegenden Seite (760px x 600px) in Adobe Illustrator. Ich mag mit Illustrator für das Artwork dieser Art, obwohl auch andere Programme verwendet werden könnten, zu.
Füllte ich die Grundstruktur der Seite mit Hintergrund-Farbe der Seite (nicht mit dem dunkelblauen Hintergrund * * Körper verwechselt werden ). Das Licht Hintergrundfarbe wird "show-off"-farbiger Text, wie der Titel des Blogs und Slogan.
I überlagert die Seite mit zwei Rechtecke, oder "Spalten". Die linke, 510px-breite Spalte ist mit einem pastellgelb Farbe gefüllt, die rechte Spalte, 230px breit, ist mit einem Pastell-blaue Farbe gefüllt. Die beiden Spalten fügen sich in die Grundstruktur der Seite mit 10px Rand der Seite Hintergrund um sie herum.
In Illustrator, legte ich ein 760px X 40px Rechteck auf der Seite und hat bei dieser ein Stück zu machen. Eine Scheibe ist nichts mehr, dass ein Vertreter Stück ein größeres Bild, in diesem Fall, der Blog-Design. Ich speicherte die Slice als kubrickbgwide.jpg. Kubrickbgwide.jpg werden verwendet, um die Blog-Seite Hintergrund erzeugen. Als neue Inhalte in der Blog-Seite hinzugefügt wird, werden Kopien der Scheibe vertikal gestapelt "wachsen" die Zwei-Spalten-Hintergrund. Dies ist das einzige Bild von einem Browser benötigt, um die Blog's home page zu erstellen. Der Blog wird daher sehr schnell zu laden.
Ziemlich einfach so weit, nicht wahr? Der Rest des Designs ist durch CSS-Datei des Designs und / oder durch die WordPress-Schnittstelle zur Administration.
CSS Änderungen
Die Standard-CSS-Datei ist im Verzeichnis wp-content_themes_default erreicht . Die CSS-Text zeigt den Code Änderungen style.css. Bevor Sie Änderungen an den Standard-CSS-Datei, mache ich immer und speichern Sie eine Kopie des Originals. Die CSS-Datei geöffnet werden kann und mit einem beliebigen Texteditor geändert. Text gestrichen wird in eckigen Klammern angegeben werden. Neue oder geänderte Text wird ohne Klammern angegeben werden.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]< br />
background: # 636f89; / * Set the Body Hintergrundfarbe blau * /
)
< br /> # 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 [. Bezeichnung] (
text-decoration: none;
[color: white;]
< br /> Farbe: rot / * Titel * Make rot /
padding-bottom: .5 em; / * ein kleiner Spalt zwischen den Titel und den Slogan * /
)
.
description (text-decoration: none;
color: blue; / * Make die Tagline blue * /
text-align: center;)
/ * End Typography & Colors * /
/ * Begin Structure * /
# page (
[background-color: white;]
background-color: fffef2; / * Sehr leicht gelb * / < br />
[border: 1px solid # 959596;]
border: none;)
# header (
[background-color: # 73a0c5;]
background-color: # fffef2; / * Sehr leicht gelb * /
)
/ * End Structure * /
Nachdem Sie und speichern diese Änderungen an der style.css-Datei ist die neu gestaltete Blog-Seite durchgeführt.
STYLING WordPress — – DAS SOUMONCES DESIGN
Obwohl Ich mag die Einfachheit des Jakob Blog-Design, wird es nicht appelliere an alle. Viele Menschen lieben "Glanz". Der Preis für einen Phantasie WordPress Kleid ist oft ein langsamer geladen Blog ohne Erhöhung der Benutzerfreundlichkeit. Doch für diejenigen, die "dress up" das Aussehen seines Blogs wollen, hier weitere Möglichkeiten, kann dies erreicht werden sollten.
Zunächst ist darauf hinzuweisen, dass der Hintergrund der Standard-WordPress-Seite nutzt header (kubrickheader.jpg) und Fußzeile (kubrickfooter.jpg) Grafiken. Diese Grafiken werden nicht mit einer bestimmten Farbe gefüllt, wie in der Jakob-Design, aber mit einem Gefälle. Es scheint auch ein sehr kleiner Schatten unter der Seite.
Aufgrund der Komplexität der Standard-Seite, sind zusätzliche Grafiken benötigt und somit mehr Schichten benötigt werden. Darüber hinaus, wenn ein komplexer Körper Hintergrund gewünscht wird, in dem zu "schweben" die Seite, ein "seed" Bild für diese, auch erforderlich sein (das ist, was die kubrickbgcolor.jpg Bild für sich).
Nach wie vor habe ich eine Zeichnung der Blog-Seite in Illustrator. Die Seite, mit abgerundeten Ecken, schwimmt auf dem Standard WordPress Hintergrund hat eine gelbe Gefälle, und hat einen kleinen Schatten.
Ich zunächst ein 760px x 600px Rechteck auf der Zeichenfläche Illustrator. Ich füllte dieses Rechteck mit der Hintergrundfarbe (C: 8, M: 6, Y: 6, K: 0).
Weiter, mit dem abgerundetes Rechteck-Werkzeug, habe ich ein 736px X 584px Rechteck und füllte es mit dem gelben Farbverlauf. Im Wesentlichen habe ich die Seite so groß wie möglich im Hintergrund laufen lassen genügend Raum für den Schlagschatten.
Schließlich gab ich das Rechteck mit abgerundeten Ecken einen kleinen Schatten.
Um sicherzustellen, dass die Scheiben perfekt verschmelzen in den Körper * * Hintergrund wird, habe ich ein 60px X 60px Quadrat der gleichen Hintergrundfarbe (C: 8, M: 6, Y: 6, K: 0) und speichern Sie es als kubrickbgcolor.jpg. Das kleine Bild wird benutzt werden, um "Farbe" des Körpers Hintergrund. Dies ist ein wichtiger Schritt, da der Hintergrund für den Körper und den Hintergrund für die Seite verwendet werden, müssen perfekt auf die Fancy Design Match verwendet.
Erstellen der Scheiben
Mit dem Rechteck-Werkzeug , stellte ich ein 760px x 200px Rechteck auf dem Layout oben beschrieben. Ich stellte dieses Rechteck an der Spitze des Layouts und benutzte es, um ein Stück für die Header-Grafik zu machen. Bevor wir dies tun, ich deaktiviert Schlaganfall und zu füllen.
Rettete ich die Scheibe als kubrickheader.jpg.
Ich habe die Fußzeile und Seite Scheiben in ähnlicher Weise und nannte sie als kubrickfooter.jpg und kubrickbgwide.jpg, respectively. Kubrickfooter.jpg ist 760px X 63px und kubrickbgwide ist 760px X 40px.
Es gibt zwei weitere Kubrick Bilder im Verzeichnis images: kubrickbg-ltr.jpg und kubrickbg-rtl.jpg (nach rechts und links rechts nach links). Diese Bilder sind die gleichen wie kubrickbgwide.jpg. Also machte ich zwei Kopien kubrickbgwide.jpg und nannte sie entsprechend.
CSS Änderungen
Die Standard-CSS-Datei wird in der WP-content_themes_default Verzeichnis. Die CSS-Text zeigt den Code Änderungen style.css. Eckige Klammern zeigen, welche Codes zu löschen und neue Code ohne Klammern angegeben. Vor der Änderung, kopiert und gespeichert ich die Original-Datei. Für die Lust auf Design, sind die CSS Änderungen minimal.
/ * Begin Typography & Colors * / body (
[background: # d5d6d7 url ( 'images / kubrickbgcolor.jpg');]< br />
background: # E7E7E7 url (' images / kubrickbgcolor.jpg ');)
< br /> # 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;]
< br /> Farbe: rot / * Blog-Titel rot * Make /
padding-bottom: .5 em; / * ein kleiner Spalt zwischen den Titel und den Slogan * /
)
.
description (text-decoration: none;
color: blue; / * the blog Slogan blue * Make / < br />
text-align: center;)
/ * End Typography & Colors * /
/ * Start Struktur * /
# page (
[background-color: white;]
background-color: # E7E7E7;
< br /> [border: 1px solid # 959596;]
border: none;)
# header (
[background-color: 73a0c5;]
background-color: # E7E7E7;)
/ * End Structure * /
Nach das Design und die CSS arbeiten, zeigt die WordPress es neue Kleider auf das gesamte Internet.
STYLING WordPress – DIE NO-GRAFIK DESIGN
nichts schief geht, wenn alle Browser lädt ein 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 bei der Grafik kann nicht gefunden werden.
Im Fall des Jakob-Design, wenn kubrickbgwide Anzeige . jpg nicht heruntergeladen haben, erhalten aus irgendeinem Grund würde die Seite nicht angezeigt akzeptabel. Aufgrund der hellen Hintergrund für die Kopf-und Fußzeile verwendet werden, zeigen sie normalerweise auf dem dunkelblauen Hintergrund der Stelle übertragen werden. Allerdings wird der Inhalt schwer zu lesen: es fast in den dunkelblauen Hintergrund verloren geht. Ein heller Hintergrund für die Einrichtung könnte eine viel klügere Wahl gewesen.
Der Schöpfer der Kubrick-Design löste dieses Problem durch die Vergabe stellvertretenden Hintergrundfarben verwendet werden, wenn die Grafik nicht vorhanden waren. Die Zuordnungen sind in der Datei style.css gemacht:
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, wird die alternative RGB-Farbwert verwendet werden.
Wenn die Grafik nicht verfügbar sind, ist die Standard-WordPress-Blog noch vorzeigbar und nutzbar sind. Für eine erste Seite Redesign, beginnend mit dem grundlegenden Design Kubrick, ohne Grafik, könnte ein guter Ort, um zu beginnen. Dies kann durch die Vereinfachung der obigen Aussagen erfolgen:
body (background: # d5d6d7;)
# header (background: # 73a0c5;)
# footer (background: # eee;)
Die Farben können dann geändert werden, probieren Sie verschiedene Farbschemata Blog. Ändern Sie einfach die RGB-Codes, speichern Sie die CSS-Datei, und aktualisieren Sie den Browser, um die Änderungen sofort sehen.
Yours für einen erfolgreichen Blog,
Royce Tivel
Sign Language For Babies And Beyond
The Best Blogging Software Around – Wordpress
June 10, 2009 by admin
Filed under Video Tutorials
quesomanrulz asked:
quesomanrulz.com – Hello again everyone, this video tutorial is about Wordpress and how to install and use some of it’s basic features. Two ways of installing Wordpress are covered, Fantastico and Manual. Fantastico is preferred by most people and me, it makes the process simpler. If you have access to Fantastico then you should definitely use that. http and 000webhost.com both have the Fantastico service available for their free users. I use http and would suggest that. Thanks to …
WordPress Tutorial – Put Text Over Image – Image Behind Text
June 8, 2009 by admin
Filed under Video Tutorials
mcbuzzvideo asked:
This WordPress tutorial shows how to put text on top of an image, or, put another way, how to set an image behind text. The HTML code works on any web page, not just in WordPress.
Matt Mullenweg at SXSW talks about Wordpress
June 5, 2009 by admin
Filed under Video Tutorials
pop17 asked:
pop17.com
