Home › Widget Stylizing

Jab bhi mai kisi section me widget add karta hu to wo bedhanga dikhta hai. Unhe bhi stylize karo jo dark mode ke saath response kare. agar section me pahle se widget ko stylize na kiya gaya ho to norally wo kuchh aisa dikhna chhaiye- Widget ka border radius 5px ya something ka ho; widget border aur page border ke bich koi margin na ho; Bas bottom and top margin 5px ka ho taki saperation dikhe; border shadow ander ki or ho taaki widget ander dhasa hua dikhe. widget header title, title backgroud aur widget background theme customize setting se editable banane ke liye variables bhi chahiye dark and light dono mode ke liye, agar set na ho to background none ho; widget title ka font size normal and bld hona chahiye, jyada bada nahi;widget title center aligned ho; widget title bar ke niche ke line ho sapearation ko dikhane ke liye; widget border ka thickness 0px ho, wo sir shadow se alag dikhe. Baki widget ke gadget ke according andar ka content dikhe. Iske liye kya karna hoga.

May 30, 2026 0 Comments

 Standard widgets ko automatic tareeqe se ek jaisa, sundar, aur completely customizable banane ke liye hume Blogger ke <b:skin> me kuch naye Variables add karne honge aur ek universal CSS likhni hogi. Isse aap jab bhi koi naya widget add karenge, wo apne aap inset shadow (andar dhasa hua) ke sath background theme variables ke hisab se set ho jayega.

Ise poori tarah responsive aur customizable banane ke liye niche diye gaye 3 steps follow karein:

Step 1: Blogger Customizer Variables Add Karein

Sabse pehle, theme ke Advanced Customize setting me editable options dikhane ke liye variables add karne honge.

Theme ke Edit HTML me jayein aur jahan baaki <Group> tags khatam ho rahe hain (lagbhag line 50-60 ke aas-pas, jahan layout variables hain), wahan ye naye groups paste kar dein:

XML
    
    <Group description="6. Generic Widget Layout (Light Mode)" selector=".widget">
      <Variable name="widget.bg.light" description="Widget Background (Light)" type="color" default="transparent" value="transparent"/>
      <Variable name="widget.title.bg.light" description="Widget Title Background (Light)" type="color" default="transparent" value="transparent"/>
      <Variable name="widget.title.color.light" description="Widget Title Text (Light)" type="color" default="#222222" value="#222222"/>
    </Group>

    <Group description="7. Generic Widget Layout (Dark Mode)" selector="[data-theme='dark'] .widget">
      <Variable name="widget.bg.dark" description="Widget Background (Dark)" type="color" default="transparent" value="transparent"/>
      <Variable name="widget.title.bg.dark" description="Widget Title Background (Dark)" type="color" default="transparent" value="transparent"/>
      <Variable name="widget.title.color.dark" description="Widget Title Text (Dark)" type="color" default="#e4e4e4" value="#e4e4e4"/>
    </Group>

Step 2: CSS Variables Setup me Map Karein

Ab in template variables ko CSS Custom Properties me map karna hoga taaki ye dark mode aur light mode ke sath automatic switch ho sakein.

Theme me jahan :root aur [data-theme="dark"] ke andar baaki variables map hain (jaise --bg-color), wahan unke andar inko bhi shamil kar lijiye:

:root block ke andar ye add karein:

CSS
      --widget-bg: $(widget.bg.light);
      --widget-title-bg: $(widget.title.bg.light);
      --widget-title-color: $(widget.title.color.light);
      --widget-inset-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.07), inset -2px -2px 5px rgba(255, 255, 255, 0.7);

[data-theme="dark"] block ke andar ye add karein:

CSS
      --widget-bg: $(widget.bg.dark);
      --widget-title-bg: $(widget.title.bg.dark);
      --widget-title-color: $(widget.title.color.dark);
      --widget-inset-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -1px -1px 3px rgba(255, 255, 255, 0.05);

Step 3: Universal Widget CSS Apply Karein

Ab actual style apply karne ki baari hai jo border thickness ko 0px karega, inset shadow banayega, aur title bar ke niche line dega.

Theme me ]]></b:skin> ke thik upar ye universal CSS paste kar dein:

CSS
    /* ==========================================================================
       UNIVERSAL GADGET & WIDGET STYLIZER
       ========================================================================== */
    .widget {
      background: var(--widget-bg, none) !important;
      border: 0px none !important; /* 0px Thickness */
      border-radius: 5px !important; /* 5px Border radius */
      margin: 5px 0 !important; /* Top/Bottom 5px, Left/Right 0px (Page border se sata hua) */
      padding: 15px !important;
      box-shadow: var(--widget-inset-shadow) !important; /* Inset shadow for sunken effect */
      box-sizing: border-box !important;
      overflow: hidden;
    }

    /* Universal Widget Title Bar styling */
    .widget h2.title, 
    .widget h3.title, 
    .widget .widget-title h3,
    .widget .title {
      background: var(--widget-title-bg, none) !important;
      color: var(--widget-title-color) !important;
      font-size: 15px !important; /* Normal and clean size */
      font-weight: bold !important; /* Bold font */
      text-align: center !important; /* Center aligned */
      padding: 10px 15px !important;
      /* Title ko widget ke andar ki padding se chipkaane ke liye negative margin */
      margin: -15px -15px 15px -15px !important; 
      border-radius: 5px 5px 0 0 !important;
      border-bottom: 1px solid var(--border-color) !important; /* Separation line below title bar */
      display: block !important;
      letter-spacing: 0.5px;
    }

    /* Layout mode me widgets ke margins clear rakhne ke liye */
    body#layout .widget {
      margin: 10px 0 !important;
    }

Isse kya-kya badlega?

  1. Andar Dhasa Hua Look (Recessed Effect): var(--widget-inset-shadow) ki wajah se widget ke andar charo taraf ek halki shadow banegi jisse lagega ki widget screen ke andar dhasa hua hai.

  2. 0px Border: Isme border: 0px none use kiya gaya hai, isliye koi purani boundary line nahi dikhegi, sirf shadow se border ka andaza hoga.

  3. Sata Hua Layout: Left aur right margin 0 hone se ye page ke sections ke sath bilkul align rahega, aur har do widgets ke bich exact 10px (5px top + 5px bottom) ka gap automatic banta rahega.

  4. Customizer se Editable: Ab aap Blogger dashboards ➔ Theme ➔ Customize ➔ Advanced me jaakar dono modes ke liye background and title text colors bina code chhede change kar sakte hain. Default me ye transparent (none) hi rahega.

Related Posts

0 Comments

Post a Comment