آموزش كلاس های CSS ماژول Login در Joomla 1.5

[سامان آخته 12]

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

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

ما برای اینكه بتونیم ویژگی های ظاهری این المان ها را از طریق CSS تغییر بدیم، باید اسم كلاس ها و ID هایی رو كه این المان ها دارند رو بدونیم. بعد از اینكه اسم اون ها رو دونستید، كافیه كه فایل css قالب جوملایتان رو كه غالبآ template_css.css نامیده میشه رو باز كنین و قوانین CSS لازم رو برای اون 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 رو طوری تعریف كنید كه یك ماژول لاگین افقی داشته باشیم!!! به عبارتی دیگه، كلیه المان های فرم در یك سطر قرار بگیرند!

منبع : پرشيا سئو