استایل دهی قالب

استایل دهی قالب

ابتدا فایل style را در ویرایشگر کد باز کنید.

از قسمت container شروع می کنیم که باید رنگ آن را سفید (پس زمینه content و sidebars) قرار دهیم و مقداری محتوای آن را از حاشیه فاصله دهیم :

و حال با استفاده float مکان sidebarها و content را تعیین می کنیم. به کدهای زیر دقت کنید :

ما با اضافه کردن این کدها طبعاً تغیری نخواهید دید ، دلیل آن این است که هنوز عرض هر قسمت را تعیین نکرده ایم برای همین هنوز به شکل زیر هم قرار دارند پس کد فوق را به شکل زیر توسعه می دهیم :

اما اگر فایل را ذخیره و نتیجه را در مرورگر ببنید انگار مشکلی پیش آمده است!!

container به اندازه ی محتوایش کشیده نشده است و فوتر نیز تغییر مکان داده و به کنار پست آمده است. اگر به یاد داشته باشید این اشکال به خاطر استفاده از خاصیت float است پس فایل index.html را در ویرایشگر کد باز کنید و خط زیر را بعد کدهای left-sidebar قرار دهید : (خط سوم کد اضافه شده است)

حال که مشکل نیز رفع شد به content مقداری margin می دهیم تا از right-sidebar فاصله بگیرد :

پس از این کار به استایل دهی بلوک ها و پست خواهیم پرداخت، ابتدا زمینه بلوک ها و پست ها را با کد زیر ایجاد می کنیم :

و سپس استایل دهی عناوین بلوک ها :

حال استایل زیر رو برای لینک هایی که در داخل بلوک ها داریم می نویسیم.

اگر فایل رو ذخیره کرده باشید و نتیجه رو توی مرورگر دیده باشید فقط استایل تصاویر تبلیغات مانده است. پس با کد زیر آن ها را نیز استایل دهی می کنیم :

#left-sidebar .block .block-content a img {
margin-right: 15px;
border-radius: 4px;
border-bottom: 4px solid #a7a7a7;
}

#left-sidebar .block .block-content a img:hover {border-bottom-color:#234567;}

حال که استایل دهی sidebarها تمام شد، نوبت به قسمت مطالب می رسد، ابتدا فاصله محتوای پست را با کد زیر از بین می بریم :

۱

#content .post {padding: 0;}

سپس استایل عنوان مطلب رو می نویسیم : (مقداری متفاوت تر از psd)
#content .post .post-title {
color: #444;
background: #eee;
padding: 7px 20px 7px 0;
border-bottom: 1px solid #a7a7a7;
margin-bottom: 10px;
text-shadow: 1px 1px 1px #aaa;
border-radius: 3px 3px 0 0;
}

#content .post .post-title:hover {color: #234678;}

و حال استایل تصویر بند انگشتی و خلاصه متن. اما ابتدا چونکه میخواییم اون هارو با استفاده از float کنار هم قرار بدیم، پس بهتره که اول این دو رو در داخل یک div قرار دهیم پس کد های html قسمت مطلب (class=”post”) رو به شکل زیر ویرایش می کنیم :

(خط های ۳ و ۸ اضافه شده)

<div class=”post”>
<a href=”#”><h4>عنوان مطلب</h4></a>
<div class=”thumb-text”>
<img class=”post-thumb” src=”images/thumb.png” width=”150″ height=”150″ alt=”تصویر بند انگشتی” title=”تصویر بند انگشتی”/>
<div class=”post-content”>
<p>متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد…</p>
</div>
</div>
<a class=”read-more” href=”#”>ادامه مطلب</a>

حال استایل این قسمت ها :
#content .post .post-thumb {
margin: 0 10px;
float: right;
}
#content .post .post-content {
float: left;
width: 330px;
margin: 0 0 15px 15px;
}

#content .post .post-content p {
text-align: justify;
line-height: 20px;
font-family: tahoma;
font-size: 13px;
}

سپس برای از بین بردن خاصیت float بر سایر قسمت ها کد clear رو به فایل html، قبل از کد ادامه مطلب اضافه می کنیم. (خط شماره ۸ اضافه شده)
<a href=”#”><h4>عنوان مطلب</h4></a>
<div class=”thumb-text”>
<img class=”post-thumb” src=”images/thumb.png” width=”150″ height=”150″ alt=”تصویر بند انگشتی” title=”تصویر بند انگشتی”/>
<div class=”post-content”>
<p>متن مطلب در اینجا قرار می گیر ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد ، متن مطلب در اینجا قرار می گیرد…</p>
</div>
</div>
<br style=”clear: both;” />
<a class=”read-more” href=”#”>ادامه مطلب</a>

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

#content .post .read-more {
background: #fff;
position: relative;
right: 410px;
padding: 0 15px;
border: 1px solid #a7a7a7;
border-bottom-width: 4px;
border-radius: 3px;
font-size: 18px;
color: #777;
}

#content .post .read-more:hover {
color: #234678;
border-color: #234678;
}

و در آخر استایل اطلاعات پست را می نویسیم :

#content .post .post-meta {
background: #d2d2d2;
border-top: 1px solid #a7a7a7;
margin-top: 15px;
padding: 10px;
padding-top: 7px;
}

#content .post .post-meta * {display: inline;}

#content .post .post-meta .author,
#content .post .post-meta .date {margin-left: 50px;}

#content .post .post-meta div span ,
#content .post .post-meta div a {
color: #255497;
font: 14px tahoma;
}

#content .post .post-meta img {
position: relative;
top: 3px;
margin-right: 3px;
}

پس از نوشتن این کدها، فقط قسمت فوتر سایت باقی می ماند :

#footer {
background: #366995;
padding: 10px;
}
#footer .copyright {
color: #fff;
text-align: center;
font-size: 24px;
}

اگر فایل را ذخیره کنید و نتیجه را در مرورگر ببنید، همه قسمت ها استایل دهی شده و قالبمان آماده شده است