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

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو

مقدمه

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


Pathway

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

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

Mambo template css-pathway.png

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

ماژول‌ها

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

Mambo template css-modules.png

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

منوی اصلی

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

Mambo template css-menu.png

<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">

تیتر مطالب

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

Mambo template css-contentheading.png

<source lang="php">

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

</source>

نویسنده مطلب

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

Mambo template css-small.png

<source lang="php">

.small { }

</source>

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

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

Mambo template css-data.png

<source lang="php">

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

</source>

ادامه مطلب

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

Mambo template css-readmore.png

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

دکمه برگشت

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

Mambo template css-back.png

<source lang="php">

the Back button link .back_button { }

</source>

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

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

Mambo template css-contenttoc.png


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

خط زیر مطالب

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

Mambo template css-separator.png

<source lang="php">

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

</source>

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

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

Mambo template css-modifydate.png

<source lang="php">

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

</sorce>

نظرسنجی

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

Mambo template css-poll.png

<source lang="php">

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

</source>

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

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

Mambo template css-poll1.png

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

لینکستان

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

Mambo template css-weblinks.png

<source lang="php">

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

</source>

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

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

Mambo template css-category weblinks.png

<source lang="php">

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

</source>

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

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

Mambo template css-sectiontableentry1.png

و یا

Mambo template css-poll1.png

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

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

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

Mambo template css-search.png

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

<source lang="php">

the component's title. .componentheading { }

</source>

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

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

Mambo template css-inputbox.png

<source lang="php">

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

</source>

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

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

Mambo template css-mainboady.png

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



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


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


8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.