آموزش:توضیحاتی مفید پیرامون کلاس‌های CSS قالب مامبو: تفاوت بین نسخه‌ها   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
جز (توضیحاتی مفید پیرامون کلاس‌های CSS قالب مامبو به آموزش:توضیحاتی مفید پیرامون کلاس‌های CSS قالب مامبو منتقل شد)
جز
سطر ۵: سطر ۵:
 
=Pathway=
 
=Pathway=
  
بخشی که مسیر حرکت شما را در سایت نشان میدهد .
+
بخشی که مسیر حرکت شما را در سایت نشان می‌دهد.
  
به عنوان مثال : شما در حال بازدید از '''صفحه اصلی''' > '''سوالات متداول''' می باشید.
+
به عنوان مثال : شما در حال بازدید از '''صفحه اصلی''' > '''سوالات متداول''' می‌باشید.
  
 
[[تصویر:Mambo_template_css-pathway.png]]
 
[[تصویر:Mambo_template_css-pathway.png]]
سطر ۲۳: سطر ۲۳:
 
</div>
 
</div>
  
=ماژول‌ها=
+
=[[ماژول]]‌ها=
  
بخشی که مربوط تنظیمات ماژول ها ، فونت ، بدنه ، سر تیتر و استایل کلی آنها .
+
بخشی که مربوط تنظیمات [[ماژول]]‌ها ، فونت ، بدنه ، سر تیتر و استایل کلی آنها .
  
 
[[تصویر:Mambo_template_css-modules.png]]
 
[[تصویر:Mambo_template_css-modules.png]]
سطر ۴۳: سطر ۴۳:
 
=منوی اصلی=
 
=منوی اصلی=
  
بخشی که مربوط به استایل منو و ظاهر منو میباشد . مثلا هنگامی که رو ی منو موس نگه داشته شود چه رنگی به خود میگیرد . یا برروی لینک کلیک شد چه رنگی شود.
+
بخشی که مربوط به استایل منو و ظاهر منو میباشد . مثلا هنگامی که رو ی منو موشواره نگه داشته شود چه رنگی به خود می‌گیرد . یا برروی لینک کلیک شد چه رنگی شود.
  
 
[[تصویر:Mambo_template_css-menu.png]]
 
[[تصویر:Mambo_template_css-menu.png]]
سطر ۸۹: سطر ۸۹:
 
=تاریخ ایجاد مطلب=
 
=تاریخ ایجاد مطلب=
  
بخشی که مربوط به تاریخ ایجاد مطالب شما میباشد . رنگ ، اندازه و ...
+
بخشی که مربوط به تاریخ ایجاد مطالب شما می‌باشد . رنگ ، اندازه و ...
  
 
[[تصویر:Mambo_template_css-data.png]]
 
[[تصویر:Mambo_template_css-data.png]]
سطر ۱۰۴: سطر ۱۰۴:
 
=ادامه مطلب=
 
=ادامه مطلب=
  
بخشی که مربوط به لینک ادامه مطالب شما میباشد . رنگ ، اندازه و ...
+
بخشی که مربوط به لینک ادامه مطالب شما می‌باشد . رنگ ، اندازه و ...
  
 
[[تصویر:Mambo_template_css-readmore.png]]
 
[[تصویر:Mambo_template_css-readmore.png]]
سطر ۱۲۱: سطر ۱۲۱:
 
=دکمه برگشت=
 
=دکمه برگشت=
  
بخشی که مربوط به لینک دکمه برگشت میباشد . رنگ ، اندازه و ...
+
بخشی که مربوط به لینک دکمه برگشت می‌باشد . رنگ ، اندازه و ...
  
 
[[تصویر:Mambo_template_css-back.png]]
 
[[تصویر:Mambo_template_css-back.png]]
سطر ۱۳۶: سطر ۱۳۶:
 
=جدول صفحات محتوایی=
 
=جدول صفحات محتوایی=
  
در صفحات محتوایی وقتی صفحه به صفحه بودن فعال باشد جدولی ظاهر میشود که تعداد صفحات را به صورت جدولی نشان میدهد.
+
در صفحات محتوایی وقتی صفحه به صفحه بودن فعال باشد جدولی ظاهر میشود که تعداد صفحات را به صورت جدولی نشان می‌دهد.
  
 
[[تصویر:Mambo_template_css-contenttoc.png]]
 
[[تصویر:Mambo_template_css-contenttoc.png]]
سطر ۱۵۳: سطر ۱۵۳:
 
=خط زیر مطالب=
 
=خط زیر مطالب=
  
بخشی که میتوانید به وسیله آن خطی را زیر مطالب خود ایجاد کنید.
+
بخشی که می‌توانید به وسیله آن خطی را زیر مطالب خود ایجاد کنید.
  
 
[[تصویر:Mambo_template_css-separator.png]]
 
[[تصویر:Mambo_template_css-separator.png]]
سطر ۱۶۹: سطر ۱۶۹:
 
=آخرین بروز رسانی مطلب=
 
=آخرین بروز رسانی مطلب=
  
وقتی مطلبی را ویرایش میکنید علاوه بر تاریخ ایجاد ، یک تاریخ هم در مورد آخرین بروز رسانی نشان میدهد که از این طریق میتوانید تغییرات را در آن ایجاد کنید.
+
وقتی مطلبی را ویرایش می‌کنید علاوه بر تاریخ ایجاد ، یک تاریخ هم در مورد آخرین بروز رسانی نشان می‌دهد که از این طریق می‌توانید تغییرات را در آن ایجاد کنید.
  
 
[[تصویر:Mambo_template_css-modifydate.png]]
 
[[تصویر:Mambo_template_css-modifydate.png]]
سطر ۱۸۴: سطر ۱۸۴:
 
=نظرسنجی=
 
=نظرسنجی=
  
بخشی که مربوط به تیتر بالای نظر سنجی(سوال نظر سنجی) میشود را میتوانید از این طریق ویرایش کنید.
+
بخشی که مربوط به تیتر بالای نظر سنجی(سوال نظر سنجی) می‌شود را می‌توانید از این طریق ویرایش کنید.
  
 
[[تصویر:Mambo_template_css-poll.png]]
 
[[تصویر:Mambo_template_css-poll.png]]
سطر ۲۰۰: سطر ۲۰۰:
 
</div>
 
</div>
  
==گزینه‌های نظرسنجی==
+
==گزینه‌های نظرسنجی==
  
بخشی که مربوط به جواب های نظر سنجی که بیننده تیک میزند(جواب های نظر سنجی) میشود را میتوانید از این طریق ویرایش کنید.
+
بخشی که مربوط به جواب‌های نظرسنجی که بیننده تیک میزند(جواب‌های نظرسنجی) می‌شود را می‌توانید از این طریق ویرایش کنید.
  
 
[[تصویر:Mambo_template_css-poll1.png]]
 
[[تصویر:Mambo_template_css-poll1.png]]
سطر ۲۵۰: سطر ۲۵۰:
 
</div>
 
</div>
  
=بین جداولی که در بخشهایی مانند نظرسنجی ،لینکستان و ...=
+
=بین جداولی که در بخش‌هایی مانند نظرسنجی ،لینکستان و ...=
  
بخشی که آیکنی کنار نام سایت قرار میگیرد.
+
بخشی که آیکنی کنار نام سایت قرار می‌گیرد.
  
 
[[تصویر:Mambo_template_css-sectiontableentry1.png]]
 
[[تصویر:Mambo_template_css-sectiontableentry1.png]]
سطر ۲۶۹: سطر ۲۶۹:
 
</div>
 
</div>
  
=تیتر کامپوننت‌ها=
+
=تیتر [[کامپوننت]]‌ها=
  
بخشی که مربوط به تیتر نام کامپوننت ها میباشد.
+
بخشی که مربوط به تیتر نام [[کامپوننت]]‌ها می‌باشد.
  
 
[[تصویر:Mambo_template_css-search.png]]
 
[[تصویر:Mambo_template_css-search.png]]
  
به عنوان مثال : وقتی وارد صفحه جستجوی پیشرفته میشوید. نوشته ::: جستجوی پیشرفته ::: با این کلاس میتوانید مشخصات آن را تغییر بدهید.
+
به عنوان مثال : وقتی وارد صفحه جستجوی پیشرفته می‌شوید. نوشته ::: جستجوی پیشرفته ::: با این کلاس می‌توانید مشخصات آن را تغییر بدهید.
  
 
<div dir=ltr>
 
<div dir=ltr>
سطر ۲۸۸: سطر ۲۸۸:
 
=جعبه ورود اطلاعات و دکمه‌ها=
 
=جعبه ورود اطلاعات و دکمه‌ها=
  
بخشی که مربوط به دکمه ها و جعبه ورودی اطلاعات میباشد.
+
بخشی که مربوط به دکمه‌ها و جعبه ورودی اطلاعات می‌باشد.
  
 
[[تصویر:Mambo_template_css-inputbox.png]]
 
[[تصویر:Mambo_template_css-inputbox.png]]
سطر ۳۰۴: سطر ۳۰۴:
 
=مطالب میان صفحه=
 
=مطالب میان صفحه=
  
بخشی که مربوط به دکمه ها و جعبه ورودی اطلاعات میباشد.
+
بخشی که مربوط به دکمه ها و جعبه ورودی اطلاعات می‌باشد.
  
 
[[تصویر:Mambo_template_css-mainboady.png]]
 
[[تصویر:Mambo_template_css-mainboady.png]]
سطر ۳۱۷: سطر ۳۱۷:
 
</div>
 
</div>
  
=توضیحاتی در مورد کدهای css=
+
=توضیحاتی در مورد کدهای [[CSS]]=
  
 
مثالی در مورد کدهای [[CSS]] که در میان { } قرار می گیرد. برای درک بیشتر مطالب بالا .
 
مثالی در مورد کدهای [[CSS]] که در میان { } قرار می گیرد. برای درک بیشتر مطالب بالا .
سطر ۳۴۷: سطر ۳۴۷:
  
 
{{معرفی پشتیبانی}}
 
{{معرفی پشتیبانی}}
 +
 
{{کپی رایت}}
 
{{کپی رایت}}
  
 
[[رده:طراحی قالب مامبو]]
 
[[رده:طراحی قالب مامبو]]

نسخهٔ ‏۲۱ ژانویهٔ ۲۰۱۰، ساعت ۱۱:۳۶

مقدمه

آموزشی که مطالعه می‌کنید، جهت روشن شدن هر چه بیشتر کلاس‌های متداول مورد استفاده در CSS قالب مامبو نوشته شده است. اما قبل از مطالعه این مقاله پیشنهاد می‌کنیم CSS را فرا بگیرید.


Pathway

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

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

Mambo template css-pathway.png

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

ماژول‌ها

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

Mambo template css-modules.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 { }

منوی اصلی

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

Mambo template css-menu.png

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

تیتر مطالب

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

Mambo template css-contentheading.png

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

نویسنده مطلب

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

Mambo template css-small.png

.small { }

تاریخ ایجاد مطلب

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

Mambo template css-data.png

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

ادامه مطلب

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

Mambo template css-readmore.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 { }

دکمه برگشت

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

Mambo template css-back.png

the Back button link
.back_button { }

جدول صفحات محتوایی

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

Mambo template css-contenttoc.png

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

خط زیر مطالب

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

Mambo template css-separator.png

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

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

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

Mambo template css-modifydate.png

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

نظرسنجی

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

Mambo template css-poll.png


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

گزینه‌های نظرسنجی

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

Mambo template css-poll1.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 { }

لینکستان

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

Mambo template css-weblinks.png

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

توضیحات لینکستان

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

Mambo template css-category weblinks.png

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

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

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

Mambo template css-sectiontableentry1.png و یا Mambo template css-poll1.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 { }

تیتر کامپوننت‌ها

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

Mambo template css-search.png

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

the component's title.
.componentheading { }

جعبه ورود اطلاعات و دکمه‌ها

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

Mambo template css-inputbox.png

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

مطالب میان صفحه

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

Mambo template css-mainboady.png

MainBody
.contentpaneopen { }

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

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

در مثال زیر مشخص شده که تیتر مطالب : فونت Arial باشد - اندازه فونت 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%;
}


نویسنده : عماد هوشمند


Indent support.png
هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.
8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.