نسخهٔ ‏۲۱ ژانویهٔ ۲۰۱۰، ساعت ۱۱:۳۶ (نمایش مبدأ) Mehrabun (بحث | مشارکت‌ها) جز → تفاوت قدیمی‌تر		نسخهٔ کنونی تا ‏۱۰ آوریل ۲۰۱۱، ساعت ۱۷:۴۸ (نمایش مبدأ) Hamidy (بحث | مشارکت‌ها)
سطر ۱۱:		سطر ۱۱:
	[[تصویر:Mambo_template_css-pathway.png]]		[[تصویر:Mambo_template_css-pathway.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the pathway class has four different styles. Default, link, visited, and hover.		the pathway class has four different styles. Default, link, visited, and hover.
	.pathway { }		.pathway { }
سطر ۱۹:		سطر ۱۸:
	a.pathway:visited { }		a.pathway:visited { }
	a.pathway:hover { }		a.pathway:hover { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=[[ماژول]]‌ها=		=[[ماژول]]‌ها=
سطر ۲۹:		سطر ۲۷:
	[[تصویر:Mambo_template_css-modules.png]]		[[تصویر:Mambo_template_css-modules.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	Titles Modules formatting		Titles Modules formatting
	the moduletable class has tree different styles that are assigned to the modules		the moduletable class has tree different styles that are assigned to the modules
سطر ۳۷:		سطر ۳۴:
	table.moduletable th { }		table.moduletable th { }
	table.moduletable td { }		table.moduletable td { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=منوی اصلی=		=منوی اصلی=
سطر ۴۷:		سطر ۴۳:
	[[تصویر:Mambo_template_css-menu.png]]		[[تصویر:Mambo_template_css-menu.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the styling for the MAIN menu buttons. there is a three different styles		the styling for the MAIN menu buttons. there is a three different styles
	a.mainlevel:link { }		a.mainlevel:link { }
	a.mainlevel:visited { }		a.mainlevel:visited { }
	a.mainlevel:hover { }		a.mainlevel:hover { }
−	</pre>	+
−	</code>	+	<source lang="php">
−	</div>	+
	=تیتر مطالب=		=تیتر مطالب=
سطر ۶۴:		سطر ۵۸:
	[[تصویر:Mambo_template_css-contentheading.png]]		[[تصویر:Mambo_template_css-contentheading.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	used in the contents Heading on the frontpage, Section's heading and other heading.		used in the contents Heading on the frontpage, Section's heading and other heading.
	.contentheading { }		.contentheading { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=نویسنده مطلب=		=نویسنده مطلب=
سطر ۷۹:		سطر ۷۱:
	[[تصویر:Mambo_template_css-small.png]]		[[تصویر:Mambo_template_css-small.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	.small { }		.small { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=تاریخ ایجاد مطلب=		=تاریخ ایجاد مطلب=
سطر ۹۳:		سطر ۸۳:
	[[تصویر:Mambo_template_css-data.png]]		[[تصویر:Mambo_template_css-data.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the date that content or articles was created		the date that content or articles was created
	.createdate { }		.createdate { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=ادامه مطلب=		=ادامه مطلب=
سطر ۱۰۸:		سطر ۹۶:
	[[تصویر:Mambo_template_css-readmore.png]]		[[تصویر:Mambo_template_css-readmore.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the Next... or Read On... link for blogs, articals or contents. there is three styles for this class		the Next... or Read On... link for blogs, articals or contents. there is three styles for this class
	a.readon:link { }		a.readon:link { }
	a.readon:visited { }		a.readon:visited { }
	a.readon:hover { }		a.readon:hover { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=دکمه برگشت=		=دکمه برگشت=
سطر ۱۲۵:		سطر ۱۱۱:
	[[تصویر:Mambo_template_css-back.png]]		[[تصویر:Mambo_template_css-back.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the Back button link		the Back button link
	.back_button { }		.back_button { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=جدول صفحات محتوایی=		=جدول صفحات محتوایی=
سطر ۱۴۰:		سطر ۱۲۴:
	[[تصویر:Mambo_template_css-contenttoc.png]]		[[تصویر:Mambo_template_css-contenttoc.png]]
−	<div dir=ltr>	+
−	<code>	+	<source lang="php">
−	<pre>	+
	used for styling the Contents Table box for multipage content. there is three different style.		used for styling the Contents Table box for multipage content. there is three different style.
	table.contenttoc { }		table.contenttoc { }
	table.contenttoc td { }		table.contenttoc td { }
	table.contenttoc th { }		table.contenttoc th { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=خط زیر مطالب=		=خط زیر مطالب=
سطر ۱۵۷:		سطر ۱۴۰:
	[[تصویر:Mambo_template_css-separator.png]]		[[تصویر:Mambo_template_css-separator.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	used for styling the Tag. (Horizontal Line)		used for styling the Tag. (Horizontal Line)
	hr { }		hr { }
	hr.separator { }		hr.separator { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=آخرین بروز رسانی مطلب=		=آخرین بروز رسانی مطلب=
سطر ۱۷۳:		سطر ۱۵۴:
	[[تصویر:Mambo_template_css-modifydate.png]]		[[تصویر:Mambo_template_css-modifydate.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	date of the Last updated of articles or contents		date of the Last updated of articles or contents
	.modifydate { }		.modifydate { }
−	</pre>	+
−	</code>	+	</sorce>
−	</div>	+
	=نظرسنجی=		=نظرسنجی=
سطر ۱۸۸:		سطر ۱۶۷:
	[[تصویر:Mambo_template_css-poll.png]]		[[تصویر:Mambo_template_css-poll.png]]
		+	<source lang="php">
−	<div dir=ltr>
−	<code>
−	<pre>
	set the title and border properties of the polls voting table		set the title and border properties of the polls voting table
	there is two styles for this class		there is two styles for this class
	.poll { }		.poll { }
	.pollstableborder { }		.pollstableborder { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	==گزینه‌های نظرسنجی==		==گزینه‌های نظرسنجی==
سطر ۲۰۶:		سطر ۱۸۲:
	[[تصویر:Mambo_template_css-poll1.png]]		[[تصویر:Mambo_template_css-poll1.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	set the styles that differentiates between the rows in tables for polls, links, forums, etc.		set the styles that differentiates between the rows in tables for polls, links, forums, etc.
	there is two styles for this class		there is two styles for this class
	.sectiontableentry1 { }		.sectiontableentry1 { }
	.sectiontableentry2 { }		.sectiontableentry2 { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=لینکستان=		=لینکستان=
سطر ۲۲۳:		سطر ۱۹۷:
	[[تصویر:Mambo_template_css-weblinks.png]]		[[تصویر:Mambo_template_css-weblinks.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	format the links titles under the Weblinks component. there is two parameters		format the links titles under the Weblinks component. there is two parameters
	.weblinks { }		.weblinks { }
	a.weblinks:hover { }		a.weblinks:hover { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	==توضیحات لینکستان==		==توضیحات لینکستان==
سطر ۲۳۹:		سطر ۲۱۱:
	[[تصویر:Mambo_template_css-category_weblinks.png]]		[[تصویر:Mambo_template_css-category_weblinks.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	format the category Weblinks		format the category Weblinks
	a.category:link, a.category:visited { }		a.category:link, a.category:visited { }
	a.category:hover { }		a.category:hover { }
−	</pre>	+	</source>
−	</code>	+
−	</div>	+
	=بین جداولی که در بخش‌هایی مانند نظرسنجی ،لینکستان و ...=		=بین جداولی که در بخش‌هایی مانند نظرسنجی ،لینکستان و ...=
سطر ۲۵۵:		سطر ۲۲۴:
	[[تصویر:Mambo_template_css-sectiontableentry1.png]]		[[تصویر:Mambo_template_css-sectiontableentry1.png]]
		+
	و یا		و یا
		+
	[[تصویر:Mambo_template_css-poll1.png]]		[[تصویر:Mambo_template_css-poll1.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	set the styles that differentiates between the rows in tables for polls, links, forums, etc.		set the styles that differentiates between the rows in tables for polls, links, forums, etc.
	there is two styles for this class		there is two styles for this class
	.sectiontableentry1 { }		.sectiontableentry1 { }
	.sectiontableentry2 { }		.sectiontableentry2 { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=تیتر [[کامپوننت]]‌ها=		=تیتر [[کامپوننت]]‌ها=
سطر ۲۷۷:		سطر ۲۴۶:
	به عنوان مثال : وقتی وارد صفحه جستجوی پیشرفته می‌شوید. نوشته ::: جستجوی پیشرفته ::: با این کلاس می‌توانید مشخصات آن را تغییر بدهید.		به عنوان مثال : وقتی وارد صفحه جستجوی پیشرفته می‌شوید. نوشته ::: جستجوی پیشرفته ::: با این کلاس می‌توانید مشخصات آن را تغییر بدهید.
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	the component's title.		the component's title.
	.componentheading { }		.componentheading { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=جعبه ورود اطلاعات و دکمه‌ها=		=جعبه ورود اطلاعات و دکمه‌ها=
سطر ۲۹۲:		سطر ۲۵۹:
	[[تصویر:Mambo_template_css-inputbox.png]]		[[تصویر:Mambo_template_css-inputbox.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	Here are 2 styles that Mambo uses all over the site for forms fileds and buttons.		Here are 2 styles that Mambo uses all over the site for forms fileds and buttons.
	.button { }		.button { }
	.inputbox { }		.inputbox { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=مطالب میان صفحه=		=مطالب میان صفحه=
سطر ۳۰۸:		سطر ۲۷۳:
	[[تصویر:Mambo_template_css-mainboady.png]]		[[تصویر:Mambo_template_css-mainboady.png]]
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	MainBody		MainBody
	.contentpaneopen { }		.contentpaneopen { }
−	</pre>	+
−	</code>	+	</source>
−	</div>	+
	=توضیحاتی در مورد کدهای [[CSS]]=		=توضیحاتی در مورد کدهای [[CSS]]=
سطر ۳۲۴:		سطر ۲۸۷:
−	<div dir=ltr>	+	<source lang="php">
−	<code>	+
−	<pre>	+
	.contentheading  {		.contentheading  {
	font-family : Arial, Helvetica, sans-serif;		font-family : Arial, Helvetica, sans-serif;
سطر ۳۳۸:		سطر ۳۰۰:
	width : 100%;		width : 100%;
	}		}
−	</pre>
−	</code>
−	</div>
		+	</source>
		+
		+
		+
		+	----
	'''''نویسنده : عماد هوشمند'''''		'''''نویسنده : عماد هوشمند'''''
سطر ۳۴۷:		سطر ۳۱۱:
	{{معرفی پشتیبانی}}		{{معرفی پشتیبانی}}
		+
	{{کپی رایت}}		{{کپی رایت}}
	[[رده:طراحی قالب مامبو]]		[[رده:طراحی قالب مامبو]]

---

نسخهٔ کنونی تا ‏۱۰ آوریل ۲۰۱۱، ساعت ۱۷:۴۸

مقدمه

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

Pathway

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

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

<source lang="php">

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

</source>

ماژول‌ها

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

<source lang="php">

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

</source>

منوی اصلی

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

<source lang="php">

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

<source lang="php">

تیتر مطالب

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

<source lang="php">

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

</source>

نویسنده مطلب

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

<source lang="php">

.small { }

</source>

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

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

<source lang="php">

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

</source>

ادامه مطلب

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

<source lang="php">

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 { }

</source>

دکمه برگشت

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

<source lang="php">

the Back button link .back_button { }

</source>

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

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

<source lang="php">

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

</source>

خط زیر مطالب

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

<source lang="php">

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

</source>

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

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

<source lang="php">

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

</sorce>

نظرسنجی

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

<source lang="php">

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

</source>

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

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

<source lang="php">

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

</source>

لینکستان

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

<source lang="php">

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

</source>

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

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

<source lang="php">

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

</source>

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

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

و یا

<source lang="php">

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

</source>

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

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

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

<source lang="php">

the component's title. .componentheading { }

</source>

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

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

<source lang="php">

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

</source>

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

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

<source lang="php">

MainBody .contentpaneopen { }

</source>

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

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

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

<source lang="php">

.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%; }

</source>

---

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

هر گونه سوال و یا مشکلی در این رابطه دارید، می‌توانید در انجمن تخصصی تیم جوملا فارسی جستجو کرده و در صورت عدم دریافت نتیجه مورد نظر، سوال جدیدی را مطرح کنید.