شايد شما خواسته باشيد كه ظاهر ماجول login رو تو Joomla 1.5 تغيير بديد مثلا رنگ Label ها رو عوض كنيد يا براي فيلدهاي متني تصوير پس زمينه تعريف كنيد و يا حتي از يك Button زيبا به جاي دگمه login استفاده كنيد. براي اعمال چنين تغييراتي، شما اولآ بايد كمي CSS بلد باشين كه ما فرض ميگيرم كه شما بلدين! بعدش با CSS هاي ماجول لاگين جوملا آشنائي داشته باشين كه هدف منم تو اين مقاله بررسي كلاسها و ID هايي است كه جوملا هنگام توليد خروجي ماجول Login از آنها استفاده ميكنه.

بياين ايتدا يه نگاهي به شكل و شمايل ماجول لاگين بيندازيم. من يه تصوير از خروجي اين ماجول تهيه كردم كه درشكل زير اونو مي بينين.همانطوريكه تو شكل زير مشاهده مي كنين، خروجي توليد شده از يكسري Label و فيلدهاي متني و دگه لاگين و چند تا لينك براي فراموشي رمز و شناسه كاربري تشكيل شده است.

ما براي اينكه بتونيم ويژگيهاي ظاهري اين المانها را از طريق CSS تغيير بديم، بايد اسم كلاسها و ID هايي رو كه اين المانها دارند رو بدونيم. بعد از اينكه اسم اونها رو دونستيد، كافيه كه فايل css قالب جوملايتان رو كه غالبآ template_css.css ناميده ميشه رو باز كنين و قوانين CSS لازم رو براي اون class ها و ID ها تعريف كنين. دو شكل زير بطور تصويري Class ها و ID ها رو بصورت تصويري نشون ميده:

حالا ديگه همه چيز واضح و روشنه! مثلا اگه بخواين براي فيلدهاي ورودي تصوير پس زمينه تعريف كنيد، كافيه كه براي كلاس inputbox در فايل template_css.css يك استايل تعريف كنيد:

.fieldset.input input.inputbox{
background:url(../images/login_inputbox_bg.gif) no-repeat;
border:0; 
} 

ويا اگه بخواين كه رنگ و يا فونت Label ها رو عوض كنين. كافيه كه براي برچسب label استايل تعريف كنيم:

.fieldset.input label{
font-family: Tahoma;
font-size: 12px;
color:#666; 
} 

و بهمين ترتيب شما مي تونين كليه ويژگيهاي ظاهري اين ماجول را مطابق سليقه خودتون عوض كنين. حالا واسه تمرين، سعي كنين كه قوانين CSS رو طوري تعريف كنيد كه يك ماجول لاگين افقي داشته باشيم!!! به عبارتي ديگه، كليه المانهاي فرم در يك سطر قرار بگيرند!

نظرات (0)

نام

ايميل

وب سايت

عنوان

نظر

كوچكتر | بزرگ تر

از طريق ايميل در صورت ارسال پيغام جديد، با خبرم كن - فقط براي اعضا

نظر بدهيد