ویزنگاموت

بارها شده هنگامی که وارد سایتی میشید و به صفحه‌ای میرید که ارتفاع ِ اون صفحه از سایدبار کم‌تره، (هنگامی که قسمت مطالب، از سایدبار جدا باشه) سایدبار به آخر صفحه میچسبه و حالت‌ه نچسبی رو پیدا میکنه. درصورتی که وبلاگ ِ شما هم تم و ظاهری داره که همچنین حالتی گاهی براتون ایجاد میشه، کافیه از دستور زیر برای قسمت ِ مطالب استفاده کنید:

min-height: 600px;

از طرفی، بارها هم شده که باتوجه به تمی که دارید، عرض عکسها را تنظیم میکنید و هنگامی که تم‌تون رو عوض میکنید، عکس‌ها از ستون مطالب‌تون بیرون میزنن. کافیه به بلاک‌هایی که img رو درون‌شون دارن، این رو اضافه کنید: (یا اینکه خودتون یه بلاک‌ه جداگانه براش بنویسید)

max-width: 90%;

فعلاً همین.

قبلنا یه سری پست نوشته بودم که توشون به یه سری نکته‌ی خیلی ساده از طراحی وب و عمومن سی‌اس‌اس اشاره کردم که قصد دارم تو این پست یه‌کوچولو پام رو فراتر بذارم و بردرها (حاشیه‌ها) داخل‌ه سی‌اس‌اس رو به‌طور ِ نسبتن کاملی توضیح بدم.

یک)انواع بردرها از نظر استایل

dotted: به این صورت نمایش داده میشه.

dashed: به شکل حاشیه‌های بافاصله از هم نمایش داده میشه.

solid: به صورت حاشیه ِ یک پارچه نمایش داده میشه.

double:به صورت حاشیه ِ دوبل و یک‌پارچه نمایش داده میشه.

groove: به‌صورت ِ سه‌بعدی نمایش داده میشه که بستگی به رنگ ِ خط هم داره.

ridge: صورت ِ دیگه‌ای از نمایش سه‌بعدی.

inset: صورت ِ دیگه‌ای از نمایش سه‌بعدی.

outset: صورت ِ دیگه‌ای از نمایش سه‌بعدی.

هر کدوم از این حاشیه‌ها باید از دستور ِ متفاوتی استفاده کرد که به شکل زیر انجام میشه:

border:width/ border name/ color;

به عنوان مثال کد ِ زیر نمونه حاشیه سوم رو نمایش میده:

border:1px dashed #000;

دو) کنترل کامل بردرها

همونطور که احتمالن متوجه شده‌اید خطی که ما با توجه به دستورهای بالا در سی‌اس‌اس تولید میکنیم به‌صورت ِ یک‌سان اعمال میشه.ولی درصورتی که ما بخوایم که در هر بُعد از یک نوع حاشیه استفاده کنیم چاره چی‌ه؟

برای این‌کار باید ابتدا دستور ِ زیر رو برای بلاک ِ خودمون بنویسیم:

border:width/ color;

که همون‌طور که متوجه شدید شکل ِ خط رو از دستور حذف کردیم.حالا ما تعریف کردیم که حاشیه‌مون باید چه عرض و چه رنگی داشته باشه و تنها می‌مونه مشخص کردن ِ نوع حاشیه‌ای که میخوایم برای هر بعد از یک نوع ِ خاص استفاده کنیم.پس اون‌رو هم تعریف میکنیم:

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;

که مثال‌ش همچین چیزی میشه:

برای راست و چپ و همچنین پایین و بالا میتونیم از خط‌های مختلفی استفاده کنیم.

و البته شما مطمئنن از هر نوع خطی که میخواید میتونید به‌جای dotted و solid استفاده کنید.

نکات ساده:
۱-منظور از width در این مطلب عرض ِ خط‌هاست که با پیکسل و عدد مشخص میشه (مثال: ۱۰px)
2-منظور از color در این مطلب کد‌ یا نام ِ رنگ ِ مورد نظر برای خط‌هاست (مثال: black یا #۰۰۰).

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

پ.ن: اگه اشکال و مشکلی در متن هست ممنون میشم تو کامنتا بهم بگید :)

توی نسخه‌ی جدیدی که از یکی از تم‌های قبلی آماده کردم و الان هم رو وبلاگ‌ه،میبینید که تعداد کامنت‌ها در روبروی مطلب نمایش داده میشه.اول باید بگم که این قابلیت رو در یکی از پوسته‌هایی که فارسی کردم دیدم و جالب به نظرم اومد.اگه قبلن هم چنین تجربه‌های (ساده‌ای) داشته باشید میدونید که کار آسونی‌ه و مطمئنن خودتون میتونید به راحتی از پس‌ش بر بیاید،ولی اگه تازه کار باشید و بخواید به آسون‌تری راهی که میشه همچین کاری کنید این پست برای شماست.میتونید از روش زیر استفاده کنید.

یک) ویرایش پوسته ایندکس

احتمالن برای عنوان مطلب همچین کدی داخل این پوسته هست:

<h2 id="post-<?php the_ID(); ?>" class="title" ><a href="<?php the_permalink() ?>" rel="bookmark" title="خواندن <?php the_title(); ?>"><?php the_title(); ?></a></h2>

شما این کد رو باید به کد زیر تغییر بدید:

<h2 id="post-<?php the_ID(); ?>" class="title" ><div class="post-comments"><p><?php comments_popup_link(__('0'), __('1'), __('%'), '',__('-')); ?></p><br></div><a href="<?php the_permalink() ?>" rel="bookmark" title="خواندن <?php the_title(); ?>"><?php the_title(); ?></a></h2>

(بدون شک در صورتی که میخواید در صفحه‌هایی مثله تک‌نوشته و نتایج جستجو هم نمایش داده بشه،باید اون پوسته‌ها روهم  ویرایش کنید)

دو) نوشتن استایل برای تعداد نظرات

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

.post-comments {
float: left;
width: 2px;
height: 20px;
padding: 18px 0 0 24px;
font: 18px Times new roman;
margin: -7px 20px 0 10px;
background: url(images/commentbck.png) no-repeat;
padding-right: 30px; }
.post-comments p {
float: left;
margin-top: 0px;
margin-right: 100px; }

که باتوجه به تم‌تون و همچنین سلیقه‌تون،باید در مقدار  padding ، margin ، float ، عرض و طول و مشخصن آدرس بکگراند عکس رو هم باید تغییر بدید :)

اتفاقات ناگوار زیادی تو این چند روز گذشته افتاده که باعث شد این پست رو بزنم و  برای کسانی که میخوان تم وبلاگ‌شون رو سیاه کنن یادی از یه روش قدیمی کنم.

قبلن توی این پست یه اسکریپت معرفی کردم که با استفاده ازون میشد رنگ قسمت های مختلف وبلاگ رو تغییر داد.با استفاده از همین اسکریپت شما میتونید وبلاگ‌ خودتون رو مایل به سیاه کنین.

درصورتی که این تغییر ساده باشه و فقط جای سیاه و سفید با هم دیگه عوض بشه باید توی استایلی که مینویسید این دو کد زیر رو به جای هم (replace) کنید:

color:#fff;
به:
color:#444;

البته همونطور که متوجه شدید این عمل تنها زمانی کار میده که در استایل تم شما از رنگ سفید یا بک گراند سفید استفاده شده باشه و گرنه رنگ های بین سفید سیاه هم با بررسی نمونه‌هایی میتونید با استفاده از crtl+h جایشان را عوض کنید.

یکی دیگه از مواردی که باید مورد توجه‌تون قرار بگیره وضعیت لینک ها هست که عمومن باتوجه وضعیت ماوس بر روی اونها یا به دور ازونا تغییر میکنه.به عنوان مثال:

#header_logo {
color:#fff;
}
#header_logo a{
color:#ccc;
}

باید در هر دوی اونا تغییر ایجاد کرد و تغییر در یک کدوم ازونا باعث آشفتگی و زشتی وبلاگ‌تون میشه و این برای a:hover و a:visited هم صادقه.

■چطور با استفاده از سی‌اس‌اس یک عبارت رو قبل یا بعد از مثلن عنوان مطلب قرار دهیم؟

برای اینکار کافیه از دستورهای :after و یا :before استفاده کنیم.به عنوان مثال وقتی میخوایم که قبل از عنوان مطالب از یک عبارت «+» قرار بدیم کافیه داخل سی‌اس‌اس بنویسیم:
h2.post-title:before {
content: '+';
}
و برای اینکه بعد از اون قرار بگیره هم کافیه به جای before از after استفاده کنیم.
این تنها کاربرد این کدهای سی‌اس‌اس نیست بلکه از این کدها میشه استفاده‌های زیاد دیگه‌ای رو هم بکنید.یکی از اون‌ها رو مهران توضیح داده و یکی دیگه از کاربردهای این دستورها در استایل‌های فارسی‌ه که میشه معادل فارسی یک قسمت رو بعد یا قبل از اون نوشت.

■چطور یک خط جداکننده برای یک قسمت درنظر بگیریم؟

نمونه‌ش که تو تم این وبلاگ هم ازش استفاده شده داخل‌ه h2 یه سایدبار هست.برای اینکار باید از دستور border-bottom استفاده کنیم.به عنوان مثال:
#sidebar h2 {
border-bottom:1px dashed #000;
و بقیه کدها...
}

تا اونجایی که یادم میاد تو یکی از پستای وبلاگ به کد padding اشاره کرده بودم و حالا میخوام در همون مرحله ساده و ابتدایی،یکم قضیه رو بیشتر باز کنم.

■padding چه کاربردایی داره؟

padding کدیه که توی زبان سی‌اس‌اس و در واقع استایل کابردای زیادی داره.یکی از این کاربردا رو توی پست سوم آموزش سی‌اس‌اس بهش اشاره شده بود.

padding دستوریه که برای فاصله انداختن بین دو قسمت استفاده میشه.مثلن اگه شما بخواین برای عکساتون یه خط کناری بزارید همونطور که قبلن اشاره کرده بودم باید از کد border استفاده کنیم،ولی یه قسمت دیگه هم وجود داشت که padding رو مقدار ۴px قرار داد بود.حالا ببینیم این چه تاثیری داره:

۰ پیکسل:

۴ پیکسل:

۱۰ پیکسل:

×پس این کد باعث کنترل فاصله میشه.همچنین این کد اصلن فقط توی عکسها کاربرد نداره بلکه خیلی جاهای دیگه مثل ul li و … کاربرد داره.