Πώς να διορθώσετε μικρές ενοχλήσεις στον ιστό με κομψό [Firefox & Chrome]

Πώς να διορθώσετε μικρές ενοχλήσεις στον ιστό με κομψό [Firefox & Chrome]

Οι σχεδιαστές ιστοσελίδων έχουν σχεδόν αδύνατη δουλειά. Πρέπει να καταλήξουν σε ένα σχέδιο που αρέσει σε όλους. Όταν μιλάτε για μια υπηρεσία όπως το Gmail, που χρησιμοποιείται από αμέτρητα εκατομμύρια ανθρώπους σε όλο τον κόσμο, μπορείτε πραγματικά να εγκαταλείψετε το «σχεδόν» μέρος - είναι απλώς αδύνατο. Ακόμα κι αν ο επανασχεδιασμός αρέσει πολύ στους περισσότερους ανθρώπους, πάντα θα υπάρχουν χρήστες που πραγματικά δεν τους αρέσει η νέα εμφάνιση.





Μερικές φορές υπάρχουν αρκετοί από αυτούς τους χρήστες για να αναγκάσουν μια εταιρεία να κάνει πίσω, όπως έκανε πρόσφατα η Google με τα κουμπιά εικονιδίων Gmail. Αλλά τι γίνεται αν υπάρχει κάτι εσύ Πραγματικά μίσος, και η εταιρεία δεν το αλλάζει πίσω; Έχεις κολλήσει για πάντα; Χάρη στα στυλ των χρηστών, μπορείτε να διορθώσετε τέτοια προβλήματα μόνοι σας.



Παρουσίαση του Stylish

Το Stylish είναι ένα δωρεάν πρόσθετο που διατίθεται και για Firefox και Χρώμιο , και σας επιτρέπει να κάνετε κάτι πολύ μαγικό - εφαρμόστε τα δικά σας στυλ σε στοιχεία ιστοσελίδας. Ακόμα κι αν δεν είστε προγραμματιστής ιστού και δεν έχετε γράψει ποτέ λίγο CSS στη ζωή σας, αυτό είναι πολύ πιο εύκολο από ό, τι ακούγεται. Μπορείτε να χρησιμοποιήσετε το Stylish για να μεταμορφώσετε πλήρως τους ιστότοπους (όπως θα σας δείξω στην επόμενη ενότητα), αλλά ακόμη πιο σημαντικό, μπορείτε να χρησιμοποιήσετε το Stylish για να διορθώσετε μικρές ενοχλήσεις σε λίγα λεπτά.





Για παράδειγμα, είχα ένα πρόβλημα με το προεπιλεγμένο μέγεθος γραμματοσειράς στο Gmail. Η διεπαφή ήταν καλή - δεν ήθελα να κάνω μεγέθυνση (Ctrl +) με το πρόγραμμα περιήγησής μου, γιατί αυτό θα αύξανε το μέγεθος όλων των στοιχείων διεπαφής και θα ήταν πραγματικά άσχημο. Wantedθελα απλώς έναν τρόπο να κάνω τη γραμματοσειρά του μηνύματος ελαφρώς μεγαλύτερη.

Με το Stylish, ήταν πολύ απλό και θα σας δείξω πώς. Αλλά προτού εξετάσουμε τη δημιουργία των δικών σας στυλ χρηστών, ας μιλήσουμε για τη μόχλευση της εργασίας άλλων ανθρώπων.



UserStyles.org

Εάν κάτι σας ενοχλεί, είναι απολύτως πιθανό να μην είστε μόνοι. UserStyles.org είναι ένας ιστότοπος που επιτρέπει στους χρήστες να μοιράζονται στυλ που έχουν δημιουργήσει. Πάνω μπορείτε να δείτε ένα στυλ ( Προσθέστε ετικέτες στα εικονίδια της γραμμής εργαλείων ) συνιστάται από τον σχολιαστή MakeUseOf RandyN ως απάντηση στην ιστορία μας σχετικά με τα κουμπιά εικονιδίων του Gmail. Αυτό το στυλ σάς επιτρέπει να διατηρείτε τα εικονίδια, αλλά να προσθέτετε ετικέτες κειμένου - κάτι που η Google δεν σας επιτρέπει να κάνετε.

Το UserStyles.org είναι υπέροχο, αλλά δεν είναι τέλειο. Μερικά από τα σχέδια προσπαθούν να κάνουν πάρα πολλά (αλλάζουν εντελώς την εμφάνιση ενός ιστότοπου), και μερικά είναι για παλιές εκδόσεις ιστότοπων και είναι πλέον σπασμένα. Εάν προσπαθείτε να διορθώσετε κάτι μικρό και δεν μπορείτε να το βρείτε στο UserStyles.org, ίσως ο καλύτερος τρόπος δράσης σας είναι να το κάνετε μόνοι σας.



Δημιουργώντας το δικό σας απλό στυλ χρήστη

Για να δημιουργήσετε το δικό σας στυλ χρήστη, πρέπει πρώτα να γνωρίζετε ποιο στοιχείο της σελίδας προσπαθείτε να αλλάξετε και, στη συνέχεια, τι αλλαγή θέλετε να κάνετε. Έτσι, για να ξεκινήσετε, κάντε δεξί κλικ σε ό, τι θέλετε να αλλάξετε και επιλέξτε Επιθεωρήστε το στοιχείο Το Θα πρέπει να δείτε κάτι σαν αυτό:

Ο Firefox σκουραίνει την υπόλοιπη σελίδα και σχεδιάζει ένα πολύ σαφές πλαίσιο γύρω από το στοιχείο που έχετε επιλέξει. Πάνω από αυτό το στοιχείο, το κείμενο που λέει div#2d6.ii.gt.adP.adO , είναι μια δέσμη κλάσεων CSS, μαζί με ένα αναγνωριστικό (το τμήμα που ξεκινά με #). Αυτός είναι ο επιλογέας που επηρεάζει το στυλ για αυτό το στοιχείο. Στο κάτω μέρος της οθόνης υπάρχει μια γραμμή πλοήγησης που σας επιτρέπει να διασχίστε το δέντρο DOM », ή με πιο απλά λόγια, πηγαίνετε πάνω και κάτω στην ιεραρχία των στοιχείων που οδηγούν στο στοιχείο που έχετε επιλέξει.



Το όνομα του παιχνιδιού εδώ είναι να επιλέξετε το στοιχείο που θέλετε να διαμορφώσετε και να κάνετε την επιλογή όχι τόσο στενή ώστε να μην επηρεάσει όλα όσα θέλετε να επηρεάσετε, ούτε τόσο ευρεία ώστε να μπερδέψει άλλα πράγματα.

Έκανα κλικ σε ένα στοιχείο ψηλότερα, div.gs , ακριβώς επειδή μου αρέσει το όνομά του (μοιάζει με κάτι που δεν θα αλλάξει πολύ σύντομα, αλλά αυτό είναι μια πλήρης εικασία από μέρους μου). Επηρεάζει ολόκληρη την περιοχή μηνυμάτων. Μόλις επιλεγεί η περιοχή που θέλετε να στυλ, κάντε κλικ στο Στυλ κουμπί στην κάτω δεξιά γωνία, για να ανοίξετε το Κανόνες ψωμί:

Ξέρω, είναι τρομακτικό στην αρχή. Αλλά εδώ βλέπετε τους διαφορετικούς κανόνες CSS που επηρεάζουν το στοιχείο που επιλέξατε και εδώ μπορείτε να κάνετε τις δικές σας προσωρινές τροποποιήσεις και να δείτε την επίδρασή τους στη σελίδα σε πραγματικό χρόνο, χωρίς να το φορτώσετε ξανά. Τι πρέπει όμως να αλλάξετε; Κάντε κλικ στο Ιδιότητες κουμπί και αποεπιλέξτε Μόνο στυλ χρήστη :

Εδώ μπορείτε να δείτε μια πλήρη λίστα με όλα Κανόνες CSS. Μπορείτε να μετακινηθείτε προς τα κάτω στη λίστα μέχρι να βρείτε έναν κανόνα που να έχει νόημα για αυτό που χρειάζεστε (μέγεθος γραμματοσειράς στην περίπτωσή μας) και ακόμη και να κάνετε κλικ στο ερωτηματικό δίπλα του για να ανοίξετε μια σελίδα επεξήγησης. Έτσι, τώρα γνωρίζουμε ότι θέλουμε να τροποποιήσουμε την ιδιότητα μεγέθους γραμματοσειράς για όλα τα στοιχεία div που έχουν μια κατηγορία ' gs »(γραμμένο με συντομογραφία ως div.gs ).

Το μόνο ερώτημα που παραμένει είναι ποια είναι η αξία του. Για αυτό, επιστρέφουμε στο παράθυρο Κανόνες και αρχίζουμε να παίζουμε:

Τα 40 pixel μπορεί να είναι λίγο τρελά, αλλά έχετε τη γενική ιδέα. Παίξτε με αυτό και μη διστάσετε να προσθέσετε τυχόν άλλες ιδιότητες, έως ότου αποκτήσετε την εμφάνιση που θέλετε. Φροντίστε να μην κλείσετε τη σελίδα, επειδή οι αλλαγές σας είναι δεν σώζεται οπουδήποτε.

Αποθήκευση του νέου σας στυλ

Μόλις έχετε αυτό το μέρος του ιστότοπου για να φαίνεται ακριβώς όπως το θέλετε, ήρθε η ώρα να το αποθηκεύσετε. Κάντε κλικ στο Κομψός εικονίδιο στη γραμμή πρόσθετων και επιλέξτε Γράψτε νέο στυλ Το Το Stylish θα ήθελε τότε να μάθει σε ποιες σελίδες πρέπει να εφαρμόσει το νέο στυλ - στην περίπτωσή μας, επιλέξτε τη δεύτερη επιλογή, mail.google.com Το Στη συνέχεια, θα δείτε αυτό το παράθυρο διαλόγου:

Το έχω ήδη συμπληρώσει. Προφανώς, επέλεξα ένα όνομα και μερικές ετικέτες για το στυλ. Αλλά τα πραγματικά πράγματα συμβαίνουν μέσα στον κώδικα: Η γραμμή 3 ήταν ήδη εκεί - ο Stylish το έβαλε στη θέση του ώστε να γνωρίζει σε ποιες σελίδες εφαρμόζεται το στυλ. Αλλά η γραμμή 5-7 είναι δική μου. Ας τα αναλύσουμε:

Γραμμή 5: div.gs { - αυτό το μέρος πρέπει να το αναγνωρίσετε. Αυτό είναι το στοιχείο που αποφασίσαμε να διαμορφώσουμε. Το στήριγμα ανοίγματος σημαίνει ότι τώρα θα γράψουμε μερικούς κανόνες CSS. Γραμμή 6: font-size: 20px! important; -αυτός είναι ο κανόνας που θέλουμε να αλλάξουμε (μέγεθος γραμματοσειράς), ακολουθούμενος από τον νέο του ορισμό (20 εικονοστοιχεία) και στη συνέχεια από μια! Σημαντική δήλωση, που σημαίνει ότι ο Firefox θα υπακούσει σε αυτόν τον κανόνα ακόμη και αν ένα στοιχείο πλησιέστερο στο κείμενο προσπαθεί να ορίσει το μέγεθος της γραμματοσειράς σε κάτι διαφορετικό. Γραμμή 7:} - κλείσιμο του ορισμού στυλ.

Στη συνέχεια, κάντε κλικ στην επιλογή Προεπισκόπηση και θαυμάστε την εργασία σας:

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

Αυτό δεν είναι ένας πλήρης οδηγός

Γνωρίζω καλά ότι για να κρατήσω αυτό το σύντομο σεμινάριο εντός των ορίων μιας μόνο ανάρτησης, έπρεπε να κάνω πολλά άλματα και άλματα. Εάν μπερδευτήκατε στην πορεία, παρακαλώ δεχτείτε τη συγγνώμη μου. Το CSS είναι δύσκολο στην αρχή, αλλά δεν είναι τόσο περίπλοκο από τη στιγμή που θα το μάθετε - και η προσαρμογή των ιστότοπων σε τοπικό επίπεδο παραμένει ένας από τους καλύτερους τρόπους εκμάθησης.

Αν μπερδευτήκατε με κάτι, ρωτήστε με παρακάτω και θα κάνω ό, τι καλύτερο μπορώ για να βοηθήσω.

γιατί το βασικό μου βίντεο δεν λειτουργεί
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 5 Συμβουλές για την υπερφόρτιση των μηχανών σας VirtualBox Linux

Έχετε κουραστεί από τις κακές επιδόσεις που προσφέρουν οι εικονικές μηχανές; Δείτε τι πρέπει να κάνετε για να αυξήσετε την απόδοση του VirtualBox.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγράμματα περιήγησης
  • Ανάπτυξη διαδικτύου
  • Εργαλεία για Webmasters
  • Mozilla Firefox
  • Google Chrome
  • Σχεδιασμός Ιστού
Σχετικά με τον Συγγραφέα Έρεζ Ζούκερμαν(Δημοσιεύθηκαν 288 άρθρα) Περισσότερα από τον Erez Zukerman

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή