हम Habré (उपयोगकर्ता-शैली या स्टाइलिश प्लगइन के माध्यम से) पर टिप्पणियों की शैली में सुधार करते हैं।

स्टाइलिश / हबराब्र - प्रेटीफ़ायर (फ़ायरफ़ॉक्स) स्टाइलिस्ट को फिर से डिज़ाइन किया गया है, यह दिखने के मामले में बहुत अच्छी तरह से डिज़ाइन किया गया है, लेकिन टिप्पणियों का एक अधिक कॉम्पैक्ट प्रदर्शन जोड़ा गया है। परिणामी शैलियों का उपयोग न केवल इसके साथ किया जा सकता है, बल्कि साइट (ओपेरा, क्रोम) के लिए उपयोगकर्ता शैलियों के रूप में भी सेट किया जा सकता है या क्रोम में स्टाइलिश के माध्यम से स्थापित किया जा सकता है (परीक्षण नहीं किया गया)। ।

फिलहाल, स्टाइलिस्ट के लेखक ने संस्करण 2.0.1.2 (05.24.10) अपलोड किया है , और अक्टूबर से पहले इसे अपडेट करने का वादा नहीं किया है। कुछ मामूली विवरण (पृष्ठ संख्या के चारों ओर गोल सीमाएँ) एक पुराने संस्करण 1.9.9.1 (02/13/2010) से लिए गए हैं।

तो स्टाइलिस्ट के बिना Habré पर टिप्पणी:



नुकसान के हैं:
1) बारीकी से स्थित बटन "+" और "-";
2) बटन पर जगह का नुकसान (लिंक) "उत्तर", जो, इसके अलावा, खराब दिखाई दे रहा है;
अधिकांश भाग के लिए, इन मुद्दों को प्रस्तावक में हल किया जाता है।

हम हब्रह्रब - Prettifier v.2.0.1.2 को शामिल करते हैं। (मैंने उनके साथ 3-4 महीने काम किया, उन्होंने खुद को सहज दिखाया।)



उपलब्ध सामग्री के साथ, हम यह करते हैं:

1) रेटिंग के बटन दूर रखें;
2) उत्तर बटन को किनारे पर खींचें और अंतरिक्ष को बचाएं;

(टिप्पणी पाठ के इंडेंटेशन को दाईं ओर सही करने के लिए काम शुरू किया गया था, लेकिन साइट के डेवलपर्स ने यह पहले ही शुरू कर दिया है।)

परिवर्तित लाइनें:
(पार्सिंग के लिए या उन लोगों के लिए उपयोगी है, जो बिना स्टाइलिश / हैबरहैब - प्रीटीफायर के यूजर-स्टाइल बनाना चाहते हैं

/* */
.comment_holder .entry- content {
max-width : 800px ;
margin-left : -6px !important ;
}
...
/* :*/
#comments {
padding-left : 74px !important ;
overflow : hidden ; margin-left : -49px !important ;
}
#comments > .hentry > .comment_holder {
margin-bottom : 0 !important ;
}
.entry- content {
margin-bottom : 0 !important ;
}
.comment_holder .entry- content ,
.popular-comment .entry- content {
padding : 10px 0 6px 5px !important ;
}
/* */
.comment_holder .mark {
margin : 1px 38px !important ;
}
/* :*/
.new-reply {
background : #E0E0F8 ;
}
.comment_holder .reply {
margin-top : 0 !important ; margin-bottom : 0 !important ;
}
.comment_holder .reply a {
background-color : #eee ;
width : 50px ;
padding : 2px 7px 5px !important ;
-moz-border-radius : 5px ;
}
.comment_holder .reply a :hover {
background-color : #ddd ;
}
/* :*/ </font >
.entry-content .reply a.js-serv {
position : relative ;
left : -71px ;
top : -12px ;
}
/* :*/
ul .hentry .vote .buttons a {
display : none ; /* */
float : none !important ; /* */
}
ul .hentry .vote .buttons {
padding-left : 15px !important ;
}
ul .hentry .vote .buttons a :last-child {
margin-left : -26px !important ;
margin-top : -16px !important ;
}
ul .hentry .vote .buttons a {
background-image : url ( 'http://habrahabr.ru/i/icos/icons_vote_posts.gif' ) !important ;
height : 15px !important ;
width : 11px !important ;
}
ul .hentry .vote .buttons .vote-for-comment {
margin-left : 11px ;
}
ul .hentry .vote .buttons a .vote_plus {
display : block ;
background-position : left bottom !important ;
}
ul .hentry .vote .buttons a.vote_minus {
display : block ;
background-position : -11px -15px !important ;
}
...
ul .hentry .vote .voted_plus a.vote_plus {
margin-right : 30px ;
background-position : 0 0 !important ;
}
/* - ( )*/
.comment_holder .msg-meta {
background : #ddd ;
}
.hentry .hentry .msg-meta ,
.popular-comment .msg-meta {
background : #ddd ;
}
/* "html-"*/
.comment-help dd span {
color : white ;
}
.comment-help dd span a.js-serv {
margin-top : 16px ;
float : right ;
}
#js-field-holder-with-help .comment-help dd span a.js-serv {
margin : 6px 18px 0 0; ;
}
#js-field-holder-with-help {
margin-top : -16px ;
}

नोट :
*) पूर्ण प्लगइन कोड में अन्य परिवर्तन महत्वपूर्ण नहीं हैं (लेकिन एक और उपयोगी सुधार है);
*) प्लगइन userstyles.org/styles/36690 पर स्थित है;
*) शैलियों संगत हैं और Habr Habratulz , Karmavyuyer के लिए एक्सटेंशन पूरक हैं।
*) लेखन की प्रक्रिया में, यह स्पष्ट था कि साइट के डेवलपर्स भी अलर्ट पर थे और टिप्पणियों के प्रकार पर काम कर रहे थे: अवतार और उपयोगकर्ता का नाम पृष्ठ के निचले भाग में इनपुट क्षेत्र से ऊपर गायब हो गया (अच्छी तरह से - यह केवल हस्तक्षेप किया गया)। इसलिए, हमने "संयुक्त रूप से" इनपुट फ़ील्ड की उपस्थिति को बदल दिया, और यह ऐसा हो गया (यह थोड़ा पहले का संस्करण है, बटन बाद में अंतिम रूप दिए जाते हैं):



*) एक गहरे रंग की पृष्ठभूमि पर पीला तीर खो जाता है, इसलिए एक अच्छे तरीके से आपको अभी भी बटन पैटर्न को काला करना होगा;
*) मैंने डेवलपर को भविष्य के संस्करणों में अपने सुधार या उनमें से एक हिस्से का उपयोग करने के प्रस्ताव के साथ एक पत्र भेजा और स्रोतों के सभी संदर्भों के साथ userstyles.org पर अपनी शैलियों का संस्करण पोस्ट किया।
*) यह भी अच्छा होगा यदि हेब डेवलपर्स किसी भी शैली को मूल रूप से लागू करें।
युपीडी:
*) बटन और हेडर हेडर में ग्रेडिएंट के साथ सुधारे जाते हैं - संस्करण 1.1 बनाया गया है।
हेडर पर स्नातक टिप्पणी के पहले स्तर और बाकी हिस्सों के लिए भिन्न होते हैं।


कोड userstyles.org/styles/36690 पर पोस्ट किया गया है। देखें कोड (स्थापना के बिना) - एक ही पृष्ठ के माध्यम से।
*) पठनीयता में सुधार करने के लिए बदल शैलियों: शीर्षक और बटन पीला है, पाठ उनके द्वारा अलग किया गया है। संस्करण userstyles.org/styles/36690 पर पोस्ट किया गया है।
*) यदि आप असुविधा ("*" और "/" के बीच 1 स्थान को हटाकर) नेटबुक के लिए कुछ पंक्तियों / * ... * /, हम नीचे एक साइडबार (जो आमतौर पर दाईं ओर है) और नीचे पाठ और टिप्पणियां - खिड़की की पूरी चौड़ाई (चौड़ाई के लिए) ब्राउज़र विंडोज़ 730-1000 पिक्सेल।) टिप्पणियों की बढ़ी हुई कॉम्पैक्टीनेस के साथ, यह उनके कम विंडो के साथ नेटबुक के लिए और भी सुविधाजनक हो जाता है। सामान्य साइडबार स्थिति वाला संस्करण 900 पिक्सल्स की विंडो चौड़ाई के साथ उपयोग करने के लिए सुविधाजनक है।
*) एक बड़े शून्य पाठ और टिप्पणियों को अलग करने के लिए एक बड़ी पीला खाकी फ़ील्ड द्वारा प्रतिस्थापित किया गया है - यह उस जगह की एक झलक पकड़ने के लिए अधिक सुविधाजनक है जहां टिप्पणियां शुरू हुई थीं।

UPD 09/13/10: संस्करण 1.2.1: लेखों में हस्ताक्षर को ऊपर ले जाया जाता है, कुछ मामूली क्षेत्रों को ऊंचाई में सही किया जाता है।
UPD 09/14/10: संस्करण 1.2.2: शीर्षलेख समतल (अस्पष्टता: 0.33) हो गए हैं, लेकिन जब आप माउस पर मँडराते हैं, तो वे अस्पष्टता बहाल करते हैं। स्क्रीनशॉट - userstyles.org/styles/36690 या उससे नीचे पर।