Insomnia modding με user styles και user scripts

[parsifal]

Καλησπέρα.

 

Ξεκινώ το θέμα αυτό για να μοιραζόμαστε μεταξύ μας user styles και user scripts που επηρεάζουν την εμφάνιση και τη συμπεριφορά του αγαπημένου μας forum! Για όσους δε γνωρίζουν, ας δούμε πρώτα σε μορφή σύντομων ερωταπαντήσεων τί ακριβώς είναι αυτά τα μαραφέτια και σε τί χρησιμεύουν.

 

 

Ερ.: Τί είναι τα "user styles";

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

 

 

Ερ.: Τί είναι τα "user scripts";

Απ.: Είναι κομμάτια κώδικα Javascript, με τα οποία μπορούμε να αλλάξουμε το περιεχόμενο και τη συμπεριφορά μίας ιστοσελίδας σε μία διαφορετική μορφή από την αρχική που όρισε ο δημιουργός της. Για παράδειγμα, μπορούμε να κάνουμε αντικαταστάσεις κειμένου, να εμφανίσουμε μενού με custom λειτουργίες που θέλουμε ή να αλλάξουμε τη συμπεριφορά υπαρχόντων μενού και πολλά ακόμη.

 

 

Ερ.: Ποια η διαφορά "user styles και scripts";

Απ.: Όπως αναφέρθηκε, με τα user styles επηρεάζουμε την εμφάνιση υπαρχόντων στοιχείων μίας ιστοσελίδας. Δε μπορούμε να προσθέσουμε νέα στοιχεία στη σελίδα ούτε μπορούμε να αλλάξουμε το περιεχόμενο των υπαρχόντων (μπορούμε βέβαια να τα εξαφανίσουμε, αλλά μέχρι εκεί). Για παράδειγμα, δε μπορούμε να αλλάξουμε το πού δείχνει ένας συγκεκριμένος υπερσύνδεσμος, γιατί αυτό αφορά περιεχόμενο. Μπορούμε όμως να του δώσουμε ένα διαφορετικό χρωματισμό ή να τον κάνουμε να εμφανίζεται bold κλπ., αφού αυτά είναι θέματα εμφάνισης. Αντίθετα, με τα user scripts θα μπορούσαμε αν θέλαμε να κάνουμε αυτόν τον υπερσύνδεσμο να δείχνει σε ένα άλλο site από ο,τι πριν. Κάτι άλλο που είναι άξιο αναφοράς: Θεωρητικά, με τα user scripts μπορούμε να κάνουμε οτιδήποτε θα μπορούσαμε με τα user styles. Είναι όμως πιο αποδοτικό να δουλεύουμε με user styles όταν ενδιαφερόμαστε μόνο για αλλαγή εμφάνισης, αφού κατά κανόνα η εφαρμογή κανόνων CSS σε έναν browser είναι πιο γρήγορη λειτουργία από ότι η εκτέλεση Javascript κώδικα που θα κάνει την ίδια δουλειά.

 

 

Ερ.: Βρήκα ένα έτοιμο user style ή user script που με ενδιαφέρει. Πώς το χρησιμοποιώ;

Απ.: Υπάρχουν διάφοροι τρόποι. Εξαρτάται από τον web browser που χρησιμοποιούμε

• Mozilla Firefox: Για user styles, υπάρχει το Stylish extension. Μας επιτρέπει να εγκαταστήσουμε user styles, είτε τα δικά μας είτε έτοιμα που βρίσκουμε από sites όπως το userstyles.org. Για user scripts, υπάρχει το GreaseMonkey extension. Μας επιτρέπει να εγκαταστήσουμε user scripts, είτε τα δικά μας είτε έτοιμα που βρίσκουμε από sites όπως το userscripts.org
  
• Google Chrome: Για user styles, υπάρχει αντίστοιχη έκδοση του Stylish extension. Για user scripts, δεν υπάρχει μεν extension αντίστοιχο του GreaseMonkey, αλλά δεν χρειάζεται κιόλας αφού ο Chrome έχει εγγενή υποστήριξη για user scripts
  
• Opera: Εδώ οδηγίες για user styles και εδώ για user scripts
  
• Internet Explorer: Χρειάζεται πρώτα η εγκατάσταση του IE7Pro addon. Στη συνέχεια, μπορούμε να εγκαταστήσουμε user scripts, αλλά και user styles αφού πρώτα μετατραπούν στο ισοδύναμό τους user script
  

[parsifal]

Αφού είδαμε μερικά εισαγωγικά για τα user styles και scripts, εδώ θα σας παρουσιάσω μερικά που ετοίμασα για το Insomnia.

 

 

Πρώτα τα user styles. Σε αυτό το link μπορείτε να δείτε τα user styles που ανεβάζω στο site userstyles.org. Ο τίτλος τους είναι ενδεικτικός για το τί κάνει το καθένα, αλλά μπορείτε να δείτε και να συγκρίνετε την «πριν» και «μετά» κατάσταση, κάνοντας κλικ στις εικονίτσες. Τη στιγμή που γράφονται αυτές οι γραμμές, υπάρχουν τα εξής styles:

 

 

[table]

Τίτλος

|

Πριν

|

Μετά

Darker breadcrumb | |

Hide left-side social sites' links | |

Hide right-side Facebook box | |

Maximize News section width | |

Proper hyperlinks | |

Slightly larger fonts in posts | |

Tahoma for default font | |

Buttonize "View New Content" link | Βλ. μήνυμα #40

Proper list margins | Βλ. μήνυμα #40

Proper code tag | Βλ. μήνυμα #40

Lightweight background images | Βλ. μήνυμα #40

Limit Active Users list height | Βλ. μήνυμα #40

[/table]

[Greco Mascara]

Είσαι ακούραστος!

[liopyr]

 

Εν τω μεταξύ ακριβώς όλα τα παραπάνω είναι όσα ήλπιζα να διορθωθούν στην τελική έκδοση.

(νταξ για το facebook widget δεν έτρεφα σοβαρές ελπίδες βέβαια).

[Rooters]

Επειδή είμαι λίγο άσχετος, εγώ θα ήθελα να υπάρχει επιλογή όπου να αλλάζει κατεξοχήν η εμφάνιση του forum...Γίνεται...;;;Ρωτάω επειδή αυτό που περιγράφεις parsifal δεν πολυκατάλαβα...

[parsifal]

Εξαρτάται τί εννοείς με το «να αλλάζει κατεξοχήν η εμφάνιση του forum». Είναι πολύ αόριστο.

 

Με τα παραπάνω user styles που έδωσα, ήδη πειράζεις κάποια στοιχεία εμφάνισης του forum, ας πούμε τα "building blocks" της ιστοσελίδας. Αυξάνοντας σταδιακά τον αριθμό αυτών που πειράζεις, μπορείς στο τέλος να την κάνεις εντελώς αγνώριστη τη σελίδα! Είναι θέμα του πόσο αποφασισμένος είσαι, πόσο χρόνο και γνώσεις έχεις κλπ. Υπάρχουν βέβαια και κάποιοι τεχνικοί περιορισμοί, όπως ανέφερα στο κομματάκι με τις ερωταπαντήσεις. Π.χ. χρησιμοποιώντας user styles δε μπορείς να δημιουργήσεις από το μηδέν κάποιο νέο στοιχείο όπως ένα DIV box με διάφορα περιεχόμενα μέσα και να το προσθέσεις στην ιστοσελίδα.

[bluesattack]

Respect parsifal για το χρονο-κοπο σου.

Ολα πολυ χρησιμα !! Οσο για το darker...

 

...θα ρωτησω κατι παρομοιο με το φιλο πιο πανω , υπαρχει η δυνατοτητα να αλλαξει λιγο πιο δραστικα η εμφανιση ?

 

Και το πλαισιο γυρω γυρω......κατι σε αυτα τα χρωματα πχ

[Rooters]

Εξαρτάται τί εννοείς με το «να αλλάζει κατεξοχήν η εμφάνιση του forum». Είναι πολύ αόριστο.

 

Με τα παραπάνω user styles που έδωσα, ήδη πειράζεις κάποια στοιχεία εμφάνισης του forum, ας πούμε τα "building blocks" της ιστοσελίδας. Αυξάνοντας σταδιακά τον αριθμό αυτών που πειράζεις, μπορείς στο τέλος να την κάνεις εντελώς αγνώριστη τη σελίδα! Είναι θέμα του πόσο αποφασισμένος είσαι, πόσο χρόνο και γνώσεις έχεις κλπ. Υπάρχουν βέβαια και κάποιοι τεχνικοί περιορισμοί, όπως ανέφερα στο κομματάκι με τις ερωταπαντήσεις. Π.χ. χρησιμοποιώντας user styles δε μπορείς να δημιουργήσεις από το μηδέν κάποιο νέο στοιχείο όπως ένα DIV box με διάφορα περιεχόμενα μέσα και να το προσθέσεις στην ιστοσελίδα.

 

Άλλο style εξ ολοκλήρου...Αλλη εμφάνιση, τα πάντα...Φυσικά γνώσεις δεν έχω καθόλου από τέτοια..

 

Μπορεί να πώ βλακεία και συγνώμη αν σε ζαλίζω, γίνεται να προσθέσεις ένα style που να μοιάζει κάπως με το παλίο...;;

Επεξ/σία 29 Νοεμβρίου 2010 από Rooters

[Gi0]

@parsifal

[liopyr]

Parsifal, αν τυχόν το έχεις κάπου έτοιμο, βάζεις και αυτό που κάνει unbold όλους τους τίτλους;

[parsifal]

...θα ρωτησω κατι παρομοιο με το φιλο πιο πανω , υπαρχει η δυνατοτητα να αλλαξει λιγο πιο δραστικα η εμφανιση ?

 

Και το πλαισιο γυρω γυρω......κατι σε αυτα τα χρωματα πχ

Όπως προανέφερα, με αρκετό χρόνο και επιμονή μπορείς να κάνεις αγνώριστη μία σελίδα.

 

Το χρώμα του γύρω πλαισίου μόνο νομίζω (δεν το έχω τσεκάρει ακόμη) πως είναι πολύ εύκολο να αλλάξει σε κάποιο άλλο και γίνεται με ελάχιστα μικρής έκτασης user style. Θα το τσεκάρω και θα επιβεβαιώσω.

 

 

Άλλο style εξ ολοκλήρου...Αλλη εμφάνιση, τα πάντα...Φυσικά γνώσεις δεν έχω καθόλου από τέτοια..

 

Μπορεί να πώ βλακεία και συγνώμη αν σε ζαλίζω, γίνεται να προσθέσεις ένα style που να μοιάζει κάπως με το παλίο...;;

Ένα user style που θα προσομοίαζε σε μεγάλο βαθμό την εμφάνιση του παλιού Insomnia: Ο,τι γίνεται, γίνεται. Θα απαιτούσε όμως:

• Πρόσβαση στο παλιό forum. Μόνο με screenshots δυστυχώς δε γίνεται η δουλειά. Και δεν πρέπει να έχει κρατήσει o Hal9000 σηκωμένο κάπου το παλιό forum. Μόνο τη βάση δεδομένων νομίζω
  
• Πάρα πολύ χρόνο! Ο τρόπος που δουλεύω τώρα, για όσους ενδιαφέρονται και γνωρίζουν, είναι να εξετάζω με τα (εξαιρετικά) Developer Tools του Google Chrome το DOM της σελίδας, για να εντοπίσω τα elements που θέλουν αλλαγή, να τεστάρω live το αποτέλεσμα τις αλλαγές των attributes τους και να κατασκευάσω τους απαραίτητους CSS selectors μαζί με τα statements που θα αναπαράγουν αυτό το αποτέλεσμα
  

 

Οπότε, αν μου ζητάς να φτιάξω ένα ολοκληρωμένο style που να κάνει το νέο Insomnia ίδιο με το παλιό, η απάντηση είναι δυστυχώς αρνητική! Μερικά συγκεκριμένα πραγματάκια όπως αλλαγή χρώματος background που ζητάει ο bluesattack είναι πιο εφικτά.

 

 

Parsifal, αν τυχόν το έχεις κάπου έτοιμο, βάζεις και αυτό που κάνει unbold όλους τους τίτλους;

Χμμμ...Ποιους τίτλους;

[Praetorian]

Πάρα πολύ καλά τα scripts. Τα ενσωμάτωσα ήδη όλα! Πολλά ευχαριστώ, parsifal!

 

Παραθέτω, με κάθε επιφύλαξη (εγώ το χρησιμοποιώ περίπου δύο μέρες τώρα), για το πρόβλημα που έχει ο Opera με το dropdown popup όταν πατάμε στο username μας πάνω-πάνω:

>
#user_navigation ul#user_link_menucontent a { 
font-size: 12px !important;
}

#primary_nav ul li a { 
height: auto !important;
}

 

Αυτό το προσθέτετε (με copy paste) στο user stylesheet file (.css) που έχετε ορίσει για τη σελίδα του insomnia.gr (το αρχείο το βλέπετε με δεξί κλικ κάπου στη σελίδα του insomnia, μετά "Edit site preferences..." -> "Display" -> και το path είναι στο πεδίο "My style sheet".

 

Disclaimer: Δεν έχω καμιά τρελή εμπειρία με css. Με το dragonfly του Opera πειραματίστηκα και το αποτέλεσμα είναι αρκετά καλύτερο από ό,τι αρχικά.

Αν κάποιος δει παρενέργειες, ας το αναφέρει.

Πριν: και Μετά:

 

edit: μετά τις πρόσφατες αλλαγές χρειάστηκε να μειώσω κι άλλο το μέγεθος του font για να φαίνονται σωστά τα links.

edit 2 07/12/2010: Το script τροποποιήθηκε γιατί η διόρθωση στο height property (αντί του font-size) δίνει καλύτερο αποτέλεσμα. Thanks to @bnvdarklord.

edit 3 08/12/2010: Νέα τροποποίηση γιατί η τελευταία αλλαγή δείχνει τα αντικείμενα στο dropdown πολύ μικρά (font-size 10px).

Επεξ/σία 8 Δεκεμβρίου 2010 από Praetorian

[bluesattack]

Aμα τα δεις (ολα) στην πραξη , δεν εχεις παρα να .. (και μονο η γραμματοσειρα , επιτελους !! )

Επεξ/σία 29 Νοεμβρίου 2010 από bluesattack

[liopyr]

 

 

 

Χμμμ...Ποιους τίτλους;

 

 

Των thread, όπως είχες φτιάξει το άλλο αλλά χωρίς το γκρι background.

[parsifal]

Μα τα bold στους τίτλους των θεμάτων σχετίζονται άμεσα με τη λειτουργικότητα: Δηλώνουν ποια θέματα περιέχουν νέα μηνύματα που δεν έχεις διαβάσει ακόμη!

 

Στο πρώτο-πρώτο user style που είχα φτιάξει τα είχα κάνει unbold όλα γιατί όλα ήταν bold και ο μόνος τρόπος που ξεχώριζες read/unread ήταν από το εικονίδιο στα αριστέρα τους. Από τη στιγμή που φτιάχτηκε αυτό και λειτουργεί όπως γνωρίζαμε από το vBulletin, δεν υπήρχε λόγος ύπαρξης του style.

 

Είσαι σίγουρος ότι θέλεις κάτι τέτοιο; Εγώ να το κάνω, κανένα πρόβλημα. Αλλά στο userstyles δεν το ανεβάζω, να ξέρεις! Θα στο στείλω με p.m.