Χρησιμοποιήστε Firebug για εύρεση των κωδικών στο πρότυπό σας

Αρκετά από τα μηνύματα που δέχομαι τα περισσότερα αναφέρονται στην δυσκολία να εντοπίσουν κάποιο συγκεκριμένο κώδικα στο πρότυπο τους .

Ορισμένοι θέλουν να κάνουν αλλαγές, αλλά δεν αντιλαμβάνονται πού ακριβώς θα πρέπει να αλλάξει ο  κώδικας.
Για παράδειγμα, κάποιος με ρώτησε  πώς να καταργήσει ένα μενού ή το πάνελ σε ένα πρότυπο , αλλά δεν γνώριζε ποιο κομμάτι του κώδικα αντιστοιχεί σε αυτά.


Για να εντοπίζετε οποιοδήποτε κώδικα των σελίδων σας (και άλλα), σας συνιστώ τοFirebug , ένα add-ons που χρησιμοποιώ για να μετατρέψω ακόμα και τα θέματα Wordpress σε  Blogger.


Μετά την εγκατάσταση του Firebug, μεταβείτε στη σελίδα στην οποία θέλετε να τροποποιήσετε τον κώδικα (αν είναι το δικό σας blog , να πάτε στην κεντρική σελίδα και οχι στην σελίδα επεξεργασίας του κώδικα ), κάντε κλικ στην μπάρα του  browser Εργαλεία -Firebug – Επιτήρηση Αντικείμενου , όπως φαίνεται παρακάτω : 


Θα παρατηρήσετε ότι ανοίγει ένα παράθυρο στο κάτω μέρος της οθόνης , στη δεξιά πλευρά θα δείτε τον κώδικα CSS (που δίνει στυλ στη σελίδα) και στα αριστερά HTML.



Για να βρείτε τον κωδικό που αντιστοιχεί σε ένα συγκεκριμένο στοιχείο στη σελίδα, απλά τοποθετήστε το ποντίκι πάνω από αυτό (στη επικεφαλίδα του πρότυπο , για παράδειγμα) και θα παρουσιάστουν οι δύο αντίστοιχοι κώδικες:




κάντε κλικ για μεγέθυνση και δείτε τις λεπτομέρειες.

Δείτε την εικόνα που εμφανίζεται στα αριστερά έχει ήδη τονίσει τις αρχές του HTML κώδικα που αντιστοιχεί στην περιοχή του #main-wrapper  που έχω επιλέξει και στο κώδικα  CSS.


Μπορείτε να βρείτε κάθε λεπτομέρεια: κωδικός χρωμάτων , γραμματοσειρά, πλάτος  ,κάποιο  div, κ.λ.π.  απλά περνώντας  τον κέρσορα πάνω από το στοιχείο του πρότυπου που σας ενδιαφέρει . 

Αυτός είναι ένας εξαιρετικός τρόπος για να επεξεργαστείτε  τους  κώδικες και να κατανοήσετε  καλύτερα τη δομή του προτύπου σας.


Επισκεφτείτε και κατεβάστε τα add-ons εδώ :
Σχόλια