Saturday, June 18, 2011

Studying CSS for wordpress theme style

ကျနော်သုံးနေတဲ့ wordpress theme style ကိုပြင်ရေးဖြစ်တယ်၊ theme ကိုပြင်မယ်ဆိုတော့ css ကိုဖတ်ရတော့တယ်၊ theme ကို style.css ထဲမှာပဲ ပြင်ရေးတာပါ။ css ကို ဖတ်ရင်း အများဆုံးပြင်ရေးဖြစ်တဲ့နေရာလေးတွေကို မှတ်တမ်းလေးလုပ်ပြီးရေးထားပါတယ်။

ကျနော်ပြင်ရေးခဲ့တဲ့ theme နာမည်က SimpleBlog ပါ။ ကျနော်နဲ့ theme အမျိုးအစားမတူလို့ တခြား theme တွေဆိုရင်လည်း အခု ကျနော်ပြင်ရေးထားတဲ့နေရာလေးတွေကို ဖတ်ပြထားတာလေးကို ကြည့်ရင်လည်း css ကိုပြင်တဲ့အခါ အထောက်အကူပြုမယ်ထင်ပါတယ်။ အတူတူဖတ်ကြည့်ရအောင်..
body {
background:#282828 url(images/bg.png);}
(ဒါကတော့ ဆိုဒ်ရဲ့ backgrund colour နဲ့ background image ကိုဆိုလိုတာပါ၊ ကျနော်ကတော့ colour ကို 282828 မီးခိုးရောင်ရင့်ရင့်ကိုသုံးထားပါတယ်၊ backgorund image ကိုလည်းသုံးထားပါတယ်။)

font-family: 'Masterpiece Uni Sans', Myanmar3,Yunghkio, Parabaik, Padauk, 'WinUni Innwa', 'Win Uni Innwa', 'MyMyanmar Unicode',Myanmar2, (ဒါကတော့ font အမျိုးအစားအတွက် ရေးထားတာပါ)

margin:0 auto;

(ဒါက site တစ်ခုလုံးရဲ့ လေးအနားသက် margin ကိုဆိုလိုတာပါ။ 1,2 စသည်ဖြင့် ပြင်နိုင်ပါတယ်။)

font-size:16px; (ဒါက ဆိုဒ်အတွင်းက ဘလော့တွေရဲ့ စာလုံးအရွယ်အစားအတွက်ပါ)

a:link ,a:active ,a:visited { text-decoration: none; color : #038339; border: none;}

(ဒါကတော့ active ဖြစ်နေတဲ့ link colour ကိုဆိုလိုတာပါ ကျနော်ဆိုဒ်မှာဆို အစိမ်းရောင်လေးကိုသုံးထားပါတယ်)

a:hover { text-decoration: none; color : #bf02fd; border: none;}

(ဒါကတော့ အဲ့ဒီ active ဖြစ်နေတဲ့ link ပေါ်ကို mouse ထောက်လိုက်ရင် ပေါ်လာမယ် mouse hover colour အရောင်ကိုသက်မှတ်တာပါ။ ကျနော်က ခရမ်းရောင်လေးကိုသုံးထားပါတယ်)

textarea,input {color:#000000}

(ဒါက ဘလော့ကို comment ရေးပေးတဲ့အခါ ပေါ်မယ့် text colour ကိုဆိုလိုတာပါ၊ ကျနော်က အနက်ရောင်သုံးထားပါတယ်)

p img {padding: 0;max-width: 100%;}

(ဒါက webpage ထဲမှာ သုံးတဲ့ image တွေရဲ့ အရွယ်အစားကို သက်မှတ်ပေးထားတာပါ 100% မှာ လိုသလိုပြင်နိုင်ပါတယ်)

acronym, abbr, span.caps {cursor: help;}

(ဒါက ဆိုဒ်ထဲမှာ abbr အညွှန်းလေးတွေတပ်ပြီးသုံးတဲ့အခါ mouse ရဲ့ပေါ်လာမယ်ပုံစံက သက်မှတ်ထားတာပါ၊ ့help, busy, စသည်ဖြင့်ပြင်နိုင်ပါတယ်)

acronym, abbr {border-bottom: 0px dashed #999;}

(ဒါက အဲ့ဒီ abbr သုံးထားတဲ့နေရာရဲ့အောက်မှာ border line သက်မှတ်တာပါ၊ ကျနော်ကတော့ ဖြုတ်ထားပါတယ်)

.center {text-align: center;}

.hidden {display: none;}

.aligncenter,div.aligncenter {display: block;margin-left: auto;margin-right: auto;}

#wrapper {margin:0 auto;width:985px;}

(ဒါကတော့ စာရွက်တစ်ရွက်မှာ ဘယ်ဘက်ခြမ်း margin area သက်မှတ်သလိုမျိုးသက်မှတ်ပေးထားတာပါ၊ ဒီနေရာမှာ အောက်က header, main, footer တို့နဲ့ appropriately ဖြစ်အောင်တော့ ချိန်ညှိပေးရပါတယ်)

#wrapper #header {clear:both;height:75px; width:935px;padding:5px 10px;background:url() bottom left no-repeat; overflow:hidden;}

(ဒီမှာတော့ height:75px ဆိုတာ header area ကိုသက်မှတ်တာပါ၊ ဒါပေသိ ဒီ နေရာက px ကိုလျော့ချပြီး ကျဉ်းမယ်ဆိုရင်တော့ အောက်က main area ကအပေါ်က တက်လာပီး header area ကို ဖုံးပြီးကျဉ်းစေတာပါ၊ width:935px ကတော့ header nav width ကိုပဲ အဓိကဆိုလိုတာပါ။ padding:5px က header area ရဲ့ အပေါ်ပိုင်းအနားသက်အကျန် area ကိုသက်မှတ်တာပါ၊ လိုသလိုပြင်နိုင်ပါတယ်၊ 10px; ကတော့ header image ကို ဘေးဘယ်ညာ အတွက်သက်မှတ်တာပါ၊ 10px ထက်ငယ်ပေးရင် ညာဘက်ကို ကပ်သွားပီး၊ 10px ထက်ကြီးလိုက်ရင် ဘယ်ဘက်ကို ကပ်သွားမှာပါ။

#wrapper #main {clear:both;overflow:hidden;width:955px; padding:5px 10px; background:#eeeeee url() top left repeat-y;}

(ဒီမှာတော့ ဆိုဒ်ရဲ့ main page တစ်ခုလုံးရဲ့ အကျယ်ကို width: သက်မှတ်ပါတယ်၊ ကျနော်က 955px သုံးထားပါတယ်၊ padding:5px ကတော့ header area ရဲ့ အထက်အောက်အကျယ်ကို အလယ်ကနေ အတိုးအလျော့လုပ်ပေးဖို့သက်မှတ်ထားတာပါ၊ လိုသလိုပြင်နိုင်ပါတယ်။ 10px ကတော့ header image နဲ့ header nav ကို ဘေးဘယ်ညာ အတွက်သက်မှတ်တာပါ၊ background:# url() က main area တစ်ခုလုံးရဲ့ colour နဲ့ image ကိုသက်မှတ်ပေးဖို့ပါ။ ကျနော်ကတော့ bg colour ကို #eeeeee ကိုသုံးထားပြီး image ကိုတော့ဖြုတ်ထားလိုက်ပါတယ်၊

#wrapper #footer { color:#000000;clear:both;overflow:hidden; width:925px; padding: 20px 30px 10px 20px; background:#717171 url() top left no-repeat;}

( color:#000000 က footer ရဲ့ text colour ကိုဆိုလိုတာပါ၊ width က footer ရဲ့ ဘေးအကျယ်ကိုသက်မှတ်တာပါ၊ main , header တို့နဲ့ချိန်ညှိပြီးထားရတာပါ။ padding: 20px က fooder text ရဲ့ အပေါ်ပိုင်း area ကိုသတ်မှတ်တာပါ။ 30px က footer ရဲ့ ဘေးညာဘက် area ကိုသက်မှတ်တာပါ၊အထက်အောက် area ကိုသက်မှတ်တာပါ။ 10px က footer က footer text ရဲ့ အောက်ဘက် area အတွက်ရေးထားတာပါ။ 20px က fooder တစ်ခုလုံး area နဲ့ text width ရဲ့ အကျယ်ကိုသက်မှတ်တာပါ)

#header #nav .pages, #header #nav .pages * {margin:0; padding:0;list-style: none;}

#header #nav .pages { float:right; margin-top:23px;}

(ဒီမှာက header nav ရဲ့ အပေါ်ပိုင်း area နဲ့ ညာဘက်ခြမ်းမှာရှိနေစေဖို့အတွက် သက်မှတ်ပေးထားတာပါ)

#header #nav .pages li {display:inline; float:left; margin-right:10px;}

(ဒီမှာက header nav တစ်ခုတိုးရင် ဘယ်ဘက်ကိုတိုးတိုးသွားမယ်၊ ညာဘက်နေ တစ်ခုနဲ့တစ်ခုအကွာအဝေးက 10px အကွာအဝေးနဲ့တိုးပါဆိုပြီး ရေးထားတာပါ။ လိုသလိုပြင်နိုင်ပါတယ်)

#header #nav .pages li a:link, #header #nav .pages li a:visited, #header #nav .pages li a:active {color:#fc02dc;padding:auto;background:#000000;font-size:15px;height:33px;line-height:33px;padding-right:15px;}

(ဒီမှာတော့ header nav ရဲ့ active ဖြစ်တဲ့ text ရဲ့ colour,sizeအဲ့ဒီ text ရဲဲ့ backgorund colour အဲ့ဒီ bgcolour ရဲ့ area , line-hight တို့ကို စိတ်ကြိုက်ပြင်ရေးထားပါတယ်)

#header #nav .pages li a:hover {color:#0326fd;background:transparent url(images/navbg.png) repeat scroll top right;float:left}

(ဒီနေရာကတော့ header nav ရဲ့ text hover colour နဲ့ image တို့ကိုပြင်ဖို့ပါ)

#header #nav .pages li a:hover span {background:000000 url(images/navbg.png) repeat scroll left top;display:block;}

(ဒီနေရာက header nav ရဲ့ text bg colour နဲ့ hover image တို့အတွက်ရေးထားတာပါ)

#header #nav .pages li.current_page_item a:visited,#header #nav .pages li.current_page_item a:active,#header #nav .pages li.current_page_item a:link {background:transparent url(images/navbg.png) repeat scroll top right;color:#0404fb;float:left}

(ဒီနေရာကတော့ header nav မှာ လက်ရှိရွေးချယ်ထားတဲ့ page item ရဲ့ text colour နဲ့ bg image တို့ကို သက်မှတ်ပေးထားတာပါ)

#header #nav .pages li.current_page_item a:visited span,#header #nav .pages li.current_page_item a:active span,#header #nav .pages li.current_page_item a:link span {background:ffffff url(images/navbg.png) repeat scroll left top;display:block;}

#header #nav .pages li a:link span, #header #nav .pages li a:visited span, #header #nav .pages li a:active span {padding-left:10px;}

(ဒီနေရာကလည်း လက်ရှိရွေးချယ်ထားတဲ့ header nav က page item ရဲ့ bg colour ,image တွေအတွက်ရေးထားတာပါ)

#main #content { width:635px; float:left; margin:12px;}

(ဒီနေရာက အရေးကြီးပါ webpage ထဲမှာရှိတယ် blog ရဲ့ width area ကိုသက်မှတ်ပေးပြီး main margin နဲ့ အဲ့ဒီ စာပိုဒ် ရဲ့ကြားက အကွာအဝေးကိုလည်း သက်မှတ်ပေးတဲ့ နေရာပါ)

#main #sidebar {width:285px; float:right;line-height:19px; margin-right:7px;}

(ဒီနေရာကလည်း main content နဲ့ကပ်လျက်ရှိတဲ့ sidebar ရဲ့ width area , sidebar ထဲမှာ ရှိတဲ့ text တွေရဲ့ line spacing, sidebar နဲ့ main margin တို့ရဲ့ အကွာအဝေးကိုပါသက်မှတ်ပေးတဲ့ နေရာဖြစ်ပါတယ်)

#footer .left { float:left; width:45%;}

(footer ရဲ့ ဘယ်ဘက်ခြမ်းက width area ကိုသက်မှတ်ပေးတာပါ)

#footer .right { float:right; width:45%; text-align:right;} (footer ရဲ့ ညာဘက်ခြမ်းက width area ကိုသက်မှတ်ပေးတာပါ)

.widget { margin-bottom:20px; padding:0; overflow:hidden;clear:both; }

(ဒါက ကျနော်တို့ wordpress မှာထည့်ထည့်သုံးတဲ့ widget တစ်ခုနဲ့တစ်ခုရဲ့ အထက်အောက် အကွာအဝေး ကိုသက်မှတ်တာပါ၊ ကျနောကတော့ 20px ပဲထားလိုက်ပါတယ်)

.widget h4 { font-size:15px; margin:0; padding:0 5px 7px; color:#000000;font-weight:400;border-bottom:0px solid #f2f2f2;}

(ဒီနေရာမှာက widget ရဲ့ title font size ကိုပြင်ဖို့ပါ၊ padding:0 က widget ကိုပုံမှန်အတိုင်းထားဖို့ပါ၊ padding:0 မှာ ဂဏန်းတိုးလိုက်ရင် widget ကိုချုံ့သွားပြီး title က ဘေးထွက်သွားမှာပါ။ ဒါကြောင့် ဒီနေရာမှာ 0 ပဲသုံးလိုက်ပါတယ်၊ 5px က widget title ကို ဘေးဘယ်ညာ အနေအထားကိုသက်မှတ်ထားတာပါ၊ 7px က widget title နဲ့ widget အတွင်းအသုံးပြုထားတဲ့အရာနဲ့ကြားက အကွာအဝေးကိုပြောတာပါ၊

.widget ul { list-style:none; font-size:13px; margin:5px 0; padding:0;}

(ဒီနေရာက widget ထဲက font size နဲ့ ခေါင်းစဉ်၊ wedget တစ်ခုခုနဲ့တစ်ခုရဲ့ အကွာအဝေးအတွက်ရေးထားတာပါ)

.widget ul li { background:url(images/icon_bullet.png) 5px 2px no-repeat; padding:0 0 7px 24px;} (ဒါကတော့ widget အတွင်းက စာတွေကို bullet icon ကိုသုံးပြီး margin သက်မှတ်ပေးထားပါ)

.widget_categories ul li { width:41%; float:left; margin:0;} (ဒါက categories ရဲ့ width ကို % နဲ့သက်မှတ်ထားတာပါ)

.post {border-bottom:1px solid #cacaca;color:#6e6e6e;padding-bottom:3px;margin-bottom:20px;}

(ဒါက post တစ်ခုရဲ့ အဆုံးပိုင်းမှာ border line သက်မှတ်ဖို့အတွက် ရေထားတာပါ၊ 3px က post border line နဲ့ နောက် post တစ်ခုခေါင်းစဉ်ရဲ့ အကွာအဝေးကိုပြောတာပါ၊ 20px က post တစ်ခုအဆုံးပိုင်းစာနဲ့ border line အကွာအဝေးအတွက်ပါ၊

.post .title { width:555px!important;width:532px; float:left; padding-bottom:6px;}

(post title ရဲ့ width ကိုရည်ညွှန်းတာဖြစ်ပြီး၊ padding-bottom:5px က post title နဲ့ post စာသားတွေရဲ့ အကွာအဝေးကိုသက်မှတ်ပေးထားတာပါ)

.post .title h2 { color:#011c07; font-size:18px;margin:0;padding:0 0 9px 0;} (ဒီကတော့ post title ရဲ့ colour,size ကိုသတ်မှတ်ပြီး၊ post title နဲ့ post အမျိုးအစား၊ ရက်စွဲတို့ရဲ့ အကွာအဝေးကို 9px လောက်ပေးထားလိုက်ပါတယ်)

.post .title h2 a { color:#011c07;}

.post .title h2 a:hover { color:#1a03fb;}

(post title colour ကို 011c07 နဲ့အစိမ်ရင့်ရောင်ပေးထားပြီး၊ mouse hover ကို 1a03fb နဲ့ အပြာရောင်ကိုသုံးလိုက်ပါတယ်)

.post .title .meta { color:#3b3b3b; font-size:12px;}

(ဒါကတော့ post title ရဲ့အောက်က date အတွက်ပါ)

.post .title .meta a { background-color:#024310; color:#ffffff; padding:4px;}

(ဒါကတော့ post title ရဲ့ အောက်က Categories အတွက်ပါ၊ padding:4px က text bgcolour ရဲ့ area အတွက်ပါ)

.post .title .meta a:hover { background-color:#000000; }

(ဒါကတော့ Categories တွေရဲ့ bg mouse hover colour အတွက်ပါ)

.post .commentcount { font-weight:600;font-size:12px;width:35px; height:28px;text-align:center;margin:0 7px 0 10px;padding-top:8px; float:left; background:url(images/commentcount.png) top left no-repeat;}

.post .commentcount a {color:#000000;}

(commentcount ရဲ့ font size,colour နဲ့ image ရဲ့ အရွယ်အစားကိုပြင်သက်မှတ်ထားတာပါ)

.post .entry {line-height:25px;padding:10px;display:block; clear:both; overflow:hidden;color:#000000;}

.post p { margin:0; padding:0 0 9px 0;}

(ဒီမှာက post အတွင်းက စာကြောင်းတစ်ခုခြင်းရဲ့ line speacing နဲ့ enter ရိုက်ထားတဲ့ စာပုဒ်တစ်ခုခြင်းစီရဲ့ အကွာအဝေးအတွက် ရေးထားတာပါ)

.post blockquote { background:transparent url(images/quote.png) no-repeat scroll 0 0;font-size:0.9em;font-style:italic;line-height:1.5em;margin:5px 0 5px 0;padding:10px 15px 10px 60px;} (ဒါက ဘလော့ထဲမှာ quote လေးတွေသုံးတဲ့အခါ image တစ်ခုကိုအစားထိုးပြပေးဖို့ပါ၊ လိုသလိုပြင်နိုင်ပါတယ်)

ဒါလေးတွေက style.css ထဲက အကုန်လုံးတော့ မဟုတ်သေးပါဘူး၊ တစ်ချို့နေရာလေးတွေ သိပ်ပြင်မရေးဖြစ်တဲ့နေရာလေးတွေကိုတော့ ချန်ခဲ့ပါတယ်၊ ကိုယ်တိုင် wordpress theme ကို ပြင်ရေးချင်သူတွေအတွက်တော့ အနည်းငယ် အထောက်အပံ့ဖြစ်မယ်ထင်ပါတယ်။ အဆင်ပြေပါစေဗျာ.. source : www.sawsan23.com

ကျနော် ဒီ ဘလော့ကို ပြုပြင်ဖို့ လိုပါသေးတယ် ..

1 comment:

  1. အစ်ကိုရေ ကျွန်တော့် wordpress ဆိုဒ်လေးမှာ
    GamerCards
    Generate Reach & Xbox GamerCards High-Quality & Fast GamerCards
    gamercards.co
    Invision Design & Media
    Full service creative agency The medium, well done.
    invisioncreative.ca
    Webdesigning Company
    We are a webdesigning company which can design a web and graphics
    www.xbraindesigners.com
    "Do you hate filing?"
    Find anything in your office in 5 seconds or less. Free Trial!
    www.thepapertiger.com လိုကြော်ငြာကြီးတွေ လာပေါ်နေလို့ဗျာ ဘယ်လိုလို့ဗျာ အဲဒါကြီးတွေ ပျောက်ချင်ရင် ဘယ်လိုလုပ်ရလဲ ပြောပြပါ

    ReplyDelete