PDA

توجه ! این یک نسخه آرشیو شده می باشد و در این حالت شما عکسی را مشاهده نمی کنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : توضیحاتی مفید پیرامون کلاسهای css مامبو



Borna66
01-11-2010, 07:20 PM
آموزشی جهت روشن شدن هر چه بیشتر کلاسهای متداول مورد استفاده در CSS قالب مامبو نوشتند که با کلیک روی "ادامه مطالب ... " قادر به مشاهده آن خواهید بود :



تنظیمات کلاس patway

بخشی که مسیر حرکت شما را در سایت نشان میدهد .


به عنوان مثال : شما در حال بازدید از صفحه اصلی سوالات متداول می باشید.





the pathway class has four different styles. Default, link, visited, and hover.
.pathway { }
a.pathway { }
a.pathway:visited { }
a.pathway:hover { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به ماژول ها

بخشی که مربوط تنظیمات ماژول ها ، فونت ، بدنه ، سر تیتر و استایل کلی آنها .





Titles Modules formatting
the moduletable class has tree different styles that are assigned to the modules
table.moduletable { }
table.moduletable th { }
table.moduletable td { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به منوی اصلی

بخشی که مربوط به استایل منو و ظاهر منو میباشد . مثلا هنگامی که رو ی منو موس نگه داشته شود چه رنگی به خود میگیرد . یا برروی لینک کلیک شد چه رنگی شود.






the styling for the MAIN menu buttons. there is a three different styles
a.mainlevel:link { }
a.mainlevel:visited { }
a.mainlevel:hover { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به تیتر مطالب

بخشی که مربوط به تیتر مطالب شما میباشد . رنگ ، اندازه و ...







used in the contents Heading on the frontpage, Section's heading and other heading.
.contentheading { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به نویسنده مطلب

بخشی که مربوط به نویسنده مطالب شما میباشد . رنگ ، اندازه و ...






.small { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به تاریخ ایجاد مطلب

بخشی که مربوط به تاریخ ایجاد مطالب شما میباشد . رنگ ، اندازه و ...







the date that content or articles was created
.createdate { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به ادامه مطلب

بخشی که مربوط به لینک ادامه مطالب شما میباشد . رنگ ، اندازه و ...







the Next... or Read On... link for blogs, articals or contents. there is three styles for this class
a.readon:link { }
a.readon:visited { }
a.readon:hover { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به دکمه برگشت

بخشی که مربوط به لینک دکمه برگشت میباشد . رنگ ، اندازه و ...




the Back button link
.back_button { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به جدول صفحات محتوایی

در صفحات محتوایی وقتی صفحه به صفحه بودن فعال باشد جدولی ظاهر میشود که تعداد صفحات را به صورت جدولی نشان میدهد.







used for styling the Contents Table box for multipage content. there is three different style.
table.contenttoc { }
table.contenttoc td { }
table.contenttoc th { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به خط زیر مطالب

بخشی که میتوانید به وسیله آن خطی را زیر مطالب خود ایجاد کنید.







used for styling the Tag. (Horizontal Line)
hr { }
hr.separator { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به آخرین بروز رسانی مطلب

وقتی مطلبی را ویرایش میکنید علاوه بر تاریخ ایجاد ، یک تاریخ هم در مورد آخرین بروز رسانی نشان میدهد که از این طریق میتوانید تغییرات را در آن ایجاد کنید.






date of the Last updated of articles or contents
.modifydate { }






http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به نظر سنجی

بخشی که مربوط به تیتر بالای نظر سنجی(سوال نظر سنجی) میشود را میتوانید از این طریق ویرایش کنید.






set the title and border properties of the polls voting table
there is two styles for this class
.poll { }
.pollstableborder { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به نظر سنجی

بخشی که مربوط به جواب های نظر سنجی که بیننده تیک میزند(جواب های نظر سنجی) میشود را میتوانید از این طریق ویرایش کنید.







set the styles that differentiates between the rows in tables for polls, links, forums, etc.
there is two styles for this class
.sectiontableentry1 { }
.sectiontableentry2 { }




http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به لینکستان

بخشی که تیتر نام سایت قرار دارد.






format the links titles under the Weblinks component. there is two parameters
.weblinks { }
a.weblinks:hover { }






http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به لینکستان

بخشی که تیتر توضیحات سایت قرار دارد







format the category Weblinks
a.category:link, a.category:visited { }
a.category:hover { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به بین جداولی که در بخشهایی مانند نظرسنجی ،لینکستان و ...

بخشی که آیکنی کنار نام سایت قرار میگیرد.







set the styles that differentiates between the rows in tables for polls, links, forums, etc.
there is two styles for this class
.sectiontableentry1 { }
.sectiontableentry2 { }




http://pnu-club.com/imported/mising.jpg

http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به تیتر کامپوننت ها

بخشی که مربوط به تیتر نام کامپوننت ها میباشد.


به عنوان مثال : وقتی وارد صفحه جستجوی پیشرفته میشوید. نوشته ::: جستجوی پیشرفته ::: با این کلاس میتوانید مشخصات آن را تغییر بدهید.







the component's title.
.componentheading { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

توضیحات مربوط به جعبه ورود اطلاعات و دکمه ها

بخشی که مربوط به دکمه ها و جعبه ورودی اطلاعات میباشد.







Here are 2 styles that Mambo uses all over the site for forms fileds and buttons.
.button { }
.inputbox { }


http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

تنظیمات مربوط به مطالب وسط صفحه

بخشی که مربوط به دکمه ها و جعبه ورودی اطلاعات میباشد.






MainBody
..contentpaneopen { }







http://pnu-club.com/imported/mising.jpg

---------------------------------------------------------------------------

توضیحاتی در مورد کدهای css

مثالی در مورد کدهای css که در میان { } قرار میگیرد. برای درک بیشتر مطالب بالا .

در مثال زیر مشخص شده که تیتر مطالب : فونت آریال باشد - اندازه فونت 16 باشد - بدنه فونت توپر باشد - فونت به صورت راست چین باشد - رنگ فونت سیاه باشد. و...







.contentheading {


font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
font-weight : bold;
font-style : inherit;
text-transform : uppercase;
text-align : right;
line-height : 27px;
color : #000000;
width : 100%;





عماد هوشمند - تيم مامبولرن