Luxeritas चाइल्ड थीम को अनुकूलित करना (style.css)
Luxeritas जापान में बनी एक निःशुल्क और अत्यधिक कार्यात्मक Wordpress थीम है।इस ब्लॉग में, मैं चाइल्ड थीम की Style.css की अनुकूलन सामग्री पेश करूँगा।
Luxeritas चाइल्ड थीम को कैसे संपादित करें
Style.css को संपादित करने के दो तरीके हैं
1. सीधे "शैली पत्रक: style.css" में प्रवेश करें
प्रबंधन स्क्रीन: Luxeritas → चाइल्ड थीम संपादित करें → "style.css" टैग चुनें
नीचे "/* के बाद कोड लिखें, अपनी पसंद के अनुसार चाइल्ड थीम के लिए स्टाइल लिखें। */"।
2.उपस्थिति अनुकूलन के "अतिरिक्त सीएसएस" में इनपुट
प्रबंधन स्क्रीन: Luxeritas → अनुकूलित करें (उपस्थिति) → अतिरिक्त CSS
यह अनुशंसित है क्योंकि आप कोड दर्ज करते ही कोड प्रतिबिंब परिणाम देख सकते हैं।
Style.css की अनुकूलित सामग्री
बोल्ड साइट शीर्षक
उन लोगों के लिए जो कहते हैं कि मानक पाठ थोड़ा पतला है और थोड़ा प्रभाव छोड़ता है।
/* साइट का शीर्षक */ #sitename {फ़ॉन्ट-वेट: बोल्ड;}
स्ट्रिप मेनू के निचले भाग में एक छाया जोड़ें ताकि यह सामग्री जैसा दिखे
इसकी एक छाया है ...
यह होगा।यह एक सूक्ष्म अंतर है, लेकिन साइट का माहौल अप्रत्याशित रूप से बदल जाता है।
/*ग्लोबल नेवी के तहत शैडो*/ #एनवी { बॉक्स-शैडो: 0 2पीएक्स 10पीएक्स आरजीबीए(0,0,0,.2)}
होवर रंग जिसे उपस्थिति अनुकूलन से सेट नहीं किया जा सकता है
पहले और बाद में लेख शीर्षकों और लेखों के लिए मानक हॉवर रंग लाल है।मुझे नहीं लगता कि उपस्थिति अनुकूलन से सीधे बदलने के लिए कोई आइटम था।
रंग: आप नीचे अपना पसंदीदा रंग कोड डालकर इसे बदल सकते हैं।वैसे, "#00b22f" हल्का हरा है।साथ ही, लेख के शीर्षक को पढ़ने में आसान बनाने के लिए बोल्ड किया गया है।
/* आलेख शीर्षक */ .प्रविष्टि-शीर्षक a:hover{color:#00b22f;} .प्रविष्टि-शीर्षक {फ़ॉन्ट-वेट: बोल्ड;} /* लेखों से पहले और बाद में */ #pnavi a:hover{color:#00b22f }
अपने ब्लॉग कार्ड को मटीरियल डिज़ाइन में बदलें
इस तरह एक ब्लॉग कार्ड पूरा हो जाएगा।जब आप इसके ऊपर मँडराते हैं, तो यह फूला हुआ हो जाता है।
/* ब्लॉग कार्ड डिज़ाइन */ a.blogcard-href { पैडिंग: 0px; न्यूनतम-ऊंचाई: 102px; बॉक्स-शैडो: 0 2px 5px rgba(0, 0, 0, .13); संक्रमण: .3s; .blogcard- href: होवर {बॉक्स-शैडो: 0 4px 20px rgba(0,0,0,0.25); ट्रांसफ़ॉर्म: ट्रांसलेटवाई (-5px); } .blogcard-img { मार्जिन: 0px 10px 0 0; p.blog-card-title {मार्जिन: 5px 5px 5px 5px; } p.blog-card-desc {डिस्प्ले: कोई नहीं; } p.blogcard-लिंक {स्पष्ट: कोई नहीं; मार्जिन: 5px 0 5px 5px; स्क्रीन और (अधिकतम-चौड़ाई: 430px){ p .ब्लॉगकार्ड-लिंक { प्रदर्शन: कोई नहीं;
मैंने संदर्भ के रूप में निम्न पृष्ठ का उपयोग किया।
Luxeritas ब्लॉग कार्ड को सांगो की तरह फ़्लोट करने के लिए अनुकूलित करें
पृष्ठांकन रंग बदलें
जैसा कि लेख के शीर्षक के साथ था, यह लाल ही रहा और उपस्थिति अनुकूलन से बदला नहीं जा सका। "#999999" इसे ग्रे बनाता है।
.pagination>.active>span, .pagination>li>a:hover{ बैकग्राउंड: कोई नहीं;बैकग्राउंड-कलर: #999999;
बदलने के बाद ऐसा दिखता है
टैग क्लाउड रीडिज़ाइन
/* टैग क्लाउड रिडिजाइन */ .tagcloud a {बॉर्डर-रेडियस: 3px; /* गोल कोने */ पैडिंग-बॉटम: 1px; पैडिंग-लेफ्ट: 6px; पैडिंग-राइट: 3px; }
मैंने टैग के कोनों को गोल किया और लाइन की चौड़ाई को कम कर दिया।
लेख शीर्षक के नीचे की गद्दी हटाएं
जब मैंने Google Adsense के विज्ञापन को लेख के शीर्षक के नीचे रखा, तो मुझे चिंता हुई कि विज्ञापन के पहले और बाद में लाइन की जगह बड़ी लग रही थी। मार्जिन को हटाने के बाद, मैं इसे यथासंभव कॉम्पैक्ट रूप से स्थापित करने में सक्षम था।
/* मेटा जानकारी (अपडेटेड) निचला मार्जिन निकालें */ .meta, .post .meta { पैडिंग: 5px 0; मार्जिन-नीचे: 0px; } /* लेख के ऊपर और नीचे का मार्जिन हटाएं */ .post- शीर्षक-अपर, . पोस्ट-टाइटल-अंडर {मार्जिन-बॉटम: 1px;
बस यही है