Πλέον υπάρχει η δυνατότητα να κάνετε μόνοι σας edit το css του theme του blog σας. Αυτό σημαίνει ότι μπορείτε να πειράξετε/αλλάξετε σχεδόν ολοκληρωτικά την εμφάνιση του. Αν έχετε γνώσεις από css δεν θα δυσκολευτείτε καθόλου, αλλά ακόμα και αν δεν έχετε, με λίγο πειραματισμό μπορείτε να κάνετε αυτό που θέλετε.
- Αρχικά βρίσκετε ένα theme που να είναι αρκετά κοντά σε αυτό που θέλετε.
- Μετά, από την κεντρική σελίδα του blog σας (την public, όχι στο dashboard), κάνετε δεξί κλικ, επιλέγετε "view page source" και βρίσκετε στην αρχή σχετικά μια γραμμή που λέει
<link rel="stylesheet" href="http://<blog_name>.squat.gr/wp-content/themes/<theme_name>/style.css" type="text/css" media="screen" />
- Αυτό που σας ενδιαφέρει είναι αυτό το αρχείο .css . Παίρνετε δηλαδή το url, το http://<blog_name>.squat.gr/wp-content/themes/<theme_name>/style.css, το βάζετε στην γραμμή διευθύνσεων του browser, και αυτό θα σας δείξει τα περιεχόμενα του css που χρησιμοποιεί το theme που έχετε επιλέξει. Αυτό το κρατάτε κάπου για να βλέπετε τις αρχικές τιμές που έχουν οι μεταβλητές μορφοποίησης της σελίδας, τις οποίες μπορείτε να τις αλλάξετε ως εξής.
- Πηγαίνετε στο Appearance -> Custom CSS στο dashboard του wordpress, και εκεί μπορείτε να αλλάξετε όποια μεταβλητή σας ενδιαφέρει. Όταν ανοίξετε την σελίδα, ο χώρος του custom css είναι κενός, γι'αυτό χρειάζεστε και το αρχικό css που παίρνετε από την παραπάνω διαδικασία, για να μπορείτε να δείτε τις αρχικές τιμές και να αλλάξετε αυτά που θέλετε. Ό,τι γράφετε εδώ γίνεται overwrite πάνω από το αρχικό css, οπότε δεν χρειάζετε να τα ξαναορίσετε όλα, παρά μόνο όσα θέλετε να αλλάξετε.
- Για παράδειγμα αν θέλετε να αλλάξετε την εικόνα που βρίσκεται στην κεφαλίδα βρίσκετε μέσα στο πρωτότυπο css αρχείο κάτι περίπου σαν κι αυτό (ενδεχομένως η σύνταξη να διαφέρει στα διάφορα css's)
#header{ width: 680px; height: 330px; padding: 10px; background: url(graphics/header.jpg); border: 1px solid black; border-top: 0; margin-bottom: 10px; }
- Εδώ φαίνετε ότι βάζει για κεφαλίδα μια εικόνα με όνομα header.jpg. Αυτό μπορείτε να το αλλάξετε και να δείχνει σε μια άλλη εικόνα που θέλετε. Πχ, ανεβάζετε από το media -> add new μια εικόνα με ίδιες διαστάσεις με αυτή (ή μπορείτε να αλλάξετε και τις διαστάσεις αλλά αυτό ενδεχομένως να "τραβήξει" την σελίδα και να χαλάσει το layout) και αλλάζετε την γραμμή σε background: url(http://onomablog.domain.org/to/link/gia/tin/eikona.jpg); Μετά, αυτό που χρειάζεται να αποθηκεύσετε είναι ολόκληρο το block, δηλαδή το
#header{ width: 680px; height: 330px; padding: 10px; background: url(http://onomablog.domain.org/to/link/gia/tin/eikona.jpg); border: 1px solid black; border-top: 0; margin-bottom: 10px; }
- Αντίστοιχα μπορείτε να βάλετε τα blocks, όπου θα αλλάζετε το χρώμα, το μέγεθος, τα μεγέθη των στηλών κλπ κλπ. Έτσι, μπορείτε να κάνετε ό,τι αλλαγές θέλετε και να τις δοκιμάζετε. Αν κάτι πάει στραβά, απλώς σβήνετε ό,τι νομίζετε ότι είναι λάθος, ή ακόμα και όλα, και τότε αυτό θα χρησιμοποιήσει το default css.