توجه
با توضیحات زیر، دیگر شما خواهید توانست خودتان قسمت‌های مختلف را یافته و تغییر دهید. اگر در هنگام خواندن مطلب قسمتی را متوجه نشدید، باید مبانی HTML و CSS را بلد باشید. همچنین پس از مطالعه، لطفاً فقط درصورتی که تمام راه‌های ممکن را امتحان کردید تا قسمتی که در اینجا گفته نشده را تغییر دهید و به نتیجه نرسیدید، در انجمن سؤال کنید.
روش کلی برای اینگونه تغییرات اینست که شما ابتدا قالب مورد نظر را بیابید و سپس ببینید اگر می‌شود از طریق کلاس‌های CSS تغییرات را اعمال کرد که چه بهتر؛ در قسمت Themes می‌توانید این کار را انجام دهید. وگرنه باید درون همان قالب تغییر دهید؛ یا اینکه اصلاً درون یکی از فایل‌های انجمن‌تان این تغییر را بدهید. بهتر اینست که با اولویت زیر دنبال اعمال تغییرات باشید:
1- کلاس یا شناسه CSS
2- درون قالب
3- تغییر فایل
حالا با پاسخ به سؤالات شما، این مسئله روشن می‌شود.
این عکسی است که شما گذاشتید:
http://pnu-club.com/imported/mising.jpg
یافتن و تغییر هر قسمت از تصویر را با عنوان عدد آن توضیح می‌دهم:
1
در مورد قسمت 1 که گفتید، اینطور می‌شود عمل کرد: ابتدا برای پیدا کردن قالب مربوطه، بنظر می‌رسد در گروه‌قالب Footer باشد (چون در انتهای صفحه قرار دارد). بعد از وارد شدن به این گروه (در کنترل‌پنل مدیریت بروید به Templates & Style > Templates و سپس پوسته مربوطه را انتخاب کرده و بعد روی نام گروه‌قالب مورد نظر کلیک کنید تا قالب‌هایش ظاهر شوند) می‌بینیم که در قالب footer آن گروه یک نشانه‌هایی هست! چراکه یک div با شناسه copyright هست:
کد PHP:
در قسمت 1 از تصویر هم ما همین کپی رایت را می‌بینیم (که البته تغییر خود آن بسیار خطرناک است! اما کمی تغییر مکانش اشکالی ندارد
http://pnu-club.com/imported/mising.jpg).
پس ما یک شناسه(copyright) داریم و حالا باید دنبال کد CSS آن باشیم. بدین منظور می‌رویم به Templates & Style > Themes و انتخاب پوسته مربوطه، سپس چندین مورد stylesheet برای انتخاب کردن هست. اگر قسمتی که می‌خواهیم تغییرش دهیم، به موارد غیر از global.css مربوط نمی‌شود (از نامشان پیداست) پس باید به همان global.css برویم (بیشتر موارد همین‌جا هستند). البته چند تنظیم کلی پوسته هم در همان صفحه است.
به‌هرحال ما برای این مورد خودمان، می‌رویم به همان global.css. حالا اینجا یک Selector داریم که همان id(شناسه)ها و class ها و تگ‌هایی هستند که در قالب وجود داشتند و ما هم دنبال یک id به نام copyright هستیم. البته چون موارد زیادی در قسمت Selector وجو دارند پس یافتن یک مورد خاص ممکن است سخت باشد و همچنین موارد محدودی برای تنظیم کردن در اختیار داریم، پس می‌توان روی Edit Stylesheet: Advanced Mode کلیک کرد تا وارد حالت پیشرفته ویرایش بشویم و هر تغییری را بتوانیم اعمال کنیم. از نظر جستجو هم الان(حالت پیشرفته) کافی هست که فقط با استفاده از جستجوی خود مرورگر، عبارت کلیدی را جستجو کنیم (در اینجا copyright).
در اینجا سه نوع عنصر داریم: class (با نقطه شروع می‌شوند)، id (با # شروع می‌شوند)، tag (با خود نام tag شروع می‌شوند).
این به یافتن عناصر هم کمک می‌کند.
توجه داشته باشید: همانطور که قالب‌ها ممکن است در پوسته‌های مختلف متفاوت باشند، CSS های مربوطه هم همینطور هستند. مثلاً برای من چنین کدی در مورد پوسته Default وجود دارد:
کد:
#copyright {
font: 11px Verdana, Arial, Sans-Serif;
margin: 0;
padding: 10px 0 0 0;
}
در اینجا می‌خواهیم مکان این عنصر به قسمت دیگری منتقل شود. البته در تصویر شما، این قسمت سمت راست هست و شما گفته‌اید برود به جای اصلی آن؛ فرض کنیم منظور شما 'وسط' باشد. در اینجا مسئله متغیر بودن روشن می‌شود: الان این قسمت برای من در سمت چپ است و برای شما سمت راست. اول اینکه، تنظیمات یک عنصر در برگیرنده (مثل body) برای عناصر درون آن هم اعمال می‌شود مگر اینکه خودشان آن را مشخص کنند. مثلاً اگر متن در عنصر body از راست تراز شود، پس اگر عنصر copyright هم در آن باشد، از راست تراز می‌شود مگر اینکه مورد دیگری را مشخص کنیم. اینکه چطور مشخص کنیم هم بستگی به کدی دارد که الان در CSS پوسته شما وجود دارد. اما من اگر خودم بخواهم به راست ببرم باید این مورد را اضافه کنم:
;text-align: right
که درکل می‌شود:
کد PHP:
کد:
#copyright {
font: 11px Verdana, Arial, Sans-Serif;
margin: 0;
padding: 10px 0 0 0;
text-align: right;
}
بنابراین اگر شما بخواهید به وسط برود باید مقدار text-align را center قرار بدهید یا اینکه در یک عنصر دربرگیرنده، این مورد را تعیین کنید.
از مطالب گفته شده نتیجه می‌شود:
0. برای اعمال تغییرات نیاز به دانستن مبانی CSS و HTML است (و گاهی چند نکته از PHP نیز کمک می‌کند).
1. کد قالب‌ها و CSSها ممکن است در پوسته‌های مختلف متفاوت باشند.
2. باید مشخص باشد که چه عنصری در قالب را می‌خواهیم تغییر دهیم و همچنین چه CSS ای روی آن (و یا حتی عنصر(عناصر) در برگیرنده‌اش) اعمال شده است.
3. از دو مورد قبل نتیجه می‌شود که ایجاد یک تغییر در قالب یا CSS به پوسته مورد نظر مربوط است و حتی ممکن است شخصی‌سازی هم شده باشد! پس باید با درنظر داشتن این موارد، دنبال اعمال یک تغییر باشیم.
برای یافتن اینکه هر قسمت چه id یا class ای دارد می‌توان بدین روش هم عمل کرد که در فایرفاکس فقط قسمتی که عنصر در آنست را انتخاب کنیم، سپس کلیک‌راست روی آن کنیم و View Selection Source را بزنیم. حالا کد منبع صفحه که نمایش داده می‌شود هیچ!، علاوه برآن قسمتی که عنصر درآنست انتخاب هم شده است! پس کار خیلی راحت‌تر می‌شود و با بررسی همان منطقه میتوانیم عنصر مورد نظر را یافته و سپس ببینیم آیا مثلاً class دارد یا نه. همچنین توضیحاتی درون کد وجود دارد که بوضوح محدوده یک قالب را مشخص می‌کتد. پس براحتی می‌توان فهمید که این کد از کدام قالب آمده است. مثلاً کدهای بین
کد PHP:
کد:
<!-- start: footer -->
و
<!-- end: footer -->
در قالب footer قرار دارند.
حالا برای سایر قسمت‌های تصویر، قالب آنها را می‌گویم (و همچنین اگر کلاس یا شناسه خاصی داشتند)، یک متغیر هم می‌گویم که شما باید آن را در قالب بیابید و سپس CSS عنصر در برگیرنده‌اش را تنظیم کنید (برای قسمت دوم از تصویر بیشتر شرح می‌دهم):
2
قالب footer از مجموعه‌قالب Footer؛ متغیر lang_select (متغیرهای PHP با $ شروع می‌شوند و در قالب‌ها معمولاً درون آکولاد({}) قرار دارند). در قالب من دور این متغیر یک div است با کلاسی به نام float_left. پس یا باید این کلاس را در CSS (یعنی مثلاً همان global.css) تغییر بدهم،
یا از یک کلاس دیگر استفاده کنم (مثلاً float_right):
کد PHP:
کد:
<div class="float_right">{$lang_select}</div>
یا از یک id استفاده کنم، مثلاً:
کد PHP:
کد:
<div id="lang_select_id">{$lang_select}</div>
یا در قسمت style از خود تگ div، آن CSS موردنظر را وارد کنم:
کد PHP:
کد:
<div style="float:right;">{$lang_select}</div>
(برای مشاهده تغییرات در صفحه مربوطه، Ctrl+F5 را بزنید)
حالا کدام روش بهتر است؟
اگر یک کلاس موجو داریم بهتر است از همان استفاده کنیم،
وگرنه اگر می‌خواهیم از این خصوصیات در عناصر دیگری هم استفاده کنیم یک کلاس جدید اضافه کنیم (یا کلاس موجود را تغییر دهیم)،
وگرنه یک id اضافه کنیم یا در قسمت style از همان عنصر، CSS را وارد کنیم.
تغییر یک کلاس به همه عناصر استفاده کننده از آن کلاس منتقل می‌شود (چون یک کلاس را می‌توان برای چندین عنصر استفاده کرد). اما تغییر یک id یا style فقط روی همان عنصر تأثیر دارد (البته در همه این موارد، عناصر درونی از عناصر در برگیرنده ارث می‌برند). پس اگر می‌خواهیم فقط روی یک عنصر تغییر دهیم، بهتر است به جای تغییر یک کلاس، یک id تعریف کنیم یا از قسمت style همان عنصر استفاده کنیم.
در مورد تصویر شما، باید برای عنصر مربوطه این قاعده را بکار برید تا به سمت چپ برود:
float:left
(بین قواعد CSS از ; استفاده کنید، اما در انتهای آن اجباری نیست)
آن‌وقت باید قسمت 3 هم خود‌به‌خود در سمت راست تراز شود.
3
قالب footer از مجموعه‌قالب Footer؛ درست بعد از قسمت 2.
این مورد هم جالب هست، چون هیچ کلاس یا شناسه‌ای ندارد و یک متغیر تنها هم نیست. با دیدن عباراتی مثل contactlink (که به 'ارتباط با ما' مربوط است) درون این div، پی می‌بریم که این div قسمت 3 را در بر می‌گیرد.
4
قالب index از مجموعه‌قالب Index Page؛ محتویات تگ dl.
برای من شروع تگ چنین است:
کد PHP:
کد:
<dl class="forum_legend smalltext">
یعنی از دو کلاس forum_legend و smalltext استفاده می‌کند. این دو کلاس خودشان کلی هستند، اما اگر بخواهیم همه قسمت‌هایی که از آنها استفاده می‌کنند از راست تراز شوند، می‌توان در همین‌ها تغییر داد. البته وقتی forum_legend را در global.css بیابیم، می‌بینیم که در کنارش دوتا مشتق هم دارد forum_legend dd و forum_legend dt که یعنی تگ‌های dd و dt دورن عنصری که کلاس forum_legend دارد را تنظیم می‌کنند. پس اگر float درونشان را به right تغییر دهیم، همگی می‌روند به راست.
7,6,5
اگر کلاس tcat را تغییر دهید، روی تمام این قسمت‌ها تأثیر می‌گذارد. برای تغییر رنگ پس زمینه می‌توانید مقدار خاصیت background آن را تغییر دهید.
وگرنه اگر بصورت مجزا می‌خواهید:
5
قالب index_stats از مجموعه‌قالب Index Page؛ عبارت boardstats. می‌توانید به td دور آن style بدهید.
6
قالب index_whosonline از مجموعه‌قالب Index Page؛ عبارت whos_online. می‌توانید به td دور آن style بدهید.
7
قالب forumbit_depth1_cat از مجموعه‌قالب Forum Bit؛ عبارت forumbit_forum برای 'انجمن'، عبارت forumbit_threads برای 'موضوعات'، عبارت forumbit_posts برای 'ارسال‌ها'، عبارت forumbit_lastpost برای 'آخرین ارسال'.
هرکدام از این قسمت‌ها را بخواهید تغییر دهید، می‌توانید به td دور آن style بدهید.
8
قالب header از مجموعه‌قالب Header؛ عبارت welcomeblock درون div با شناسه panel. بنابراین درون CSS ها می‌توانید خصوصیات panel را تغییر دهید.
