توضیحاتی مفید پیرامون کلاسهای css مامبو

[آبجی]

آموزشی جهت روشن شدن هر چه بیشتر کلاسهای متداول مورد استفاده در CSS قالب مامبو نوشتند که با کلیک روی "ادامه مطالب ... " قادر به مشاهده آن خواهید بود :

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

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


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




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



http://www.mambolearn.com/fa/images/stories/emad/patway.png

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

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

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




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://www.mambolearn.com/fa/images/stories/emad/modules.png

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

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

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


کد:

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



http://www.mambolearn.com/fa/images/stories/emad/menu.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/contentheading.png

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

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

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


کد:

.small { }





http://www.mambolearn.com/fa/images/stories/emad/small.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/data.png

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

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

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




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://www.mambolearn.com/fa/images/stories/emad/readmore.png

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

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

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

the Back button link
.back_button { }



http://www.mambolearn.com/fa/images/stories/emad/back.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/contenttoc.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/separator.png

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

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

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


کد:

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





http://www.mambolearn.com/fa/images/stories/emad/modifydate.png

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

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

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


کد:

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



http://www.mambolearn.com/fa/images/stories/emad/poll.png

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

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

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




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://www.mambolearn.com/fa/images/stories/emad/poll1.png

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

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

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

کد:


کد:

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





http://www.mambolearn.com/fa/images/stories/emad/weblinks.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/category_weblinks.png

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

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

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




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://www.mambolearn.com/fa/images/stories/emad/sectiontableentry1.png

http://www.mambolearn.com/fa/images/stories/emad/poll1.png

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

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

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


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




the component's title.
.componentheading { }



http://www.mambolearn.com/fa/images/stories/emad/search.png

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

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

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




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



http://www.mambolearn.com/fa/images/stories/emad/inputbox.png

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

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

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

کد:


کد:

MainBody
..contentpaneopen { }






http://www.mambolearn.com/fa/images/stories/emad/mainboady.png

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

توضیحاتی در مورد کدهای 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%;




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