• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت 7 - سایدبار - بخش 2

18 9141 ۲۸ اردیبهشت ۹۳

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

اگر دقت کرده باشید کلمه ی " آخرین مطالب " و " پربازدیدترین ها " بین تگ h5 قرار گرفته. پس میتونیم برای اینکه فونت این دو تا کلمه رو به DroidKufi تغییر بدیم، فونت heading ها رو عوض کنیم.

برای این کار دوباره فایل _variables.scss رو باز کنید. دنبال متغیر $headings-font-family بگردید و مقدارشو از inherit به $droid-font-family تغییر بدید. با این کار، خیلی راحت فونت همه ی heading ها عوض میشه. ایرادی هم نداره که فونت همشون عوض بشه چون سایز اکثرشون زیاده و با فونت Tahoma قیافه بیریختی پیدا میکنه.

اگر روی کلمه " پربازدیدترین ها " کلیک کنید میبینید که هیچ تغییری نمیکنه و این pill ها عوض نمیشه. برای اینکه کار کنه کافیه فایل tab.js رو از مسیر bootstrap-sass-master\vendor\assets\javascripts\bootstrap بردارید و به پوشه js داخل پوشه قالب خودتون بریزید و بعدش هم کد زیر رو قبل از بسته شدن تگ body بنویسید:

حالا دیگه کار میکنه!

بریم سراغ بلاک بعدی سایدبارمون. داخل فایل index.html بین تگ aside بنویسید bs3-panel:heading و tab رو بزنید یا کد های زیر رو بنویسید:

بعد کدهارو مثل شکل زیر تغییر بدید.

RWD-bootstrap3-7-0

عکس me.png یه عکس 32 پیکسل در 32 پیکسل هست که ریختیم تو پوشه img . شما هم میتونید عکس آواتار خودتون رو 32 در 32 پیکسل save کنید و به جای این عکسی که من گذاشتم بذارید. کدهامون بع

حالا میخوایم واسه این پنل استایل بنویسیم. استایل panel-body که نیازی به دست کاری نداره ولی باید به panel-heading استایل بدیم.

فایل _panels.scss رو باز کنید.

RWD-bootstrap3-7-1

اولین قسمتی که باید دقت کنید اینه که این استایل ها رو برای .sidebar .panel-heading نوشتیم و برای سلکتور .panel-heading ننوشتیم. دلیلش هم در قسمت قبلی گفتم. چون هم برای بخش محتوا از پنل استفاده کردیم و هم برای بخش سایدبار و استایل هر کدوم متفاوته باید این کار رو کرد.

جاهایی که لازم نبود رو کامنت کردیم تا کامپایل نشه. رنگ بک گراند و رنگ نوشته ی panel-heading رو مشخص کردیم. -1 رو پاک کردیم چون مقدار متغیر $panel-border-radius به صورت پیشفرض 2پیکسل هست که حالا شما فرض کنید اگر از این 2پیکسل یه واحد کم شه دیگه چیزیش نمیمونه!

بعد هم که استایل کلاس about و تگ img رو نوشتیم.

حالا بلاک بعدی سایدبار. دوباره داخل تگ aside در فایل index.html بنویسید bs3-panel:heading و tab رو بزنید، بعد دوباره کدهارو مثل تصویر زیر تغییر بدید:

RWD-bootstrap3-7-3

توضیح خاصی نداره قبلا استایلش رو درست کرده بودیم :)

حالا برای بلاک آخر سایدبار در فایل index.html باز هم بنویسید bs3-panel:heading و tab رو بزنید و کدها رو مثل کدهای تصویر زیر تغییر بدید:

RWD-bootstrap3-7-4

از این tagcloud برای استایل دهی استفاده میکنیم که استایل ها قاطی نشه.

فایل _panels.scss رو باز کنید و برای .sidebar .panel-body کدی که تو تصویر میبینید رو بنویسید.

RWD-bootstrap3-7-5

البته درستش اینه که برای padding و margin و border-radius متغیر تعریف کنیم ولی خب حالا چون یکی بیشتر نیست دیگه تعریف نمیکنیم. $gray-lighter هم از قبل در فایل _variables.scss تعریف شده بوده.

این قسمت هم تموم شد. خسته نباشید!

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 18 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    نازنین(۱۲ خرداد ۱۳۹۳)

    سلام خسته نباشید
    خواهشا ادامه شو بذارید
    خیلی بین آموزش هاتون وقفه هست
    تنها دلخوشی من سایت شماس

  • ‏‏

    این مشکلم حل شد فقط مکان سایدبار دقیقا چسبیده به صفحه هستش وسایزشم بزرگتر از چیزی هست که توی دمو گذاشتین

  • ‏‏

    ببخشید ولی شما اصلا بلاکی رو طراحی نکردید که بهش کلاس about داده باشید ؟
    منظورتون از چیه ؟

  • ‏‏

    ببخشید مشکل حل شد!
    با عرض پوزش.

  • ‏‏

    سلام خسته نباشین
    چرا ساید بار من سمت چپه و آخرین مطالبم و پربازدید ترین رفته پایین

  • ‏‏
    karim mos(۱۵ مهر ۱۳۹۳)

    سلام خسته نباشد یه سوالی داشتم اگه تعداد ایتم های منو زیاد باشه وا صفحه رو زوم کنیم تو زوم 150% به هم میرسن و منو واکنش نشون نمیده تا فشرده بشه میخواستم ببنم راه حل چیه تا بتونیم زودتر منو رو فشرده کنیم البته واسه منو خود سایت سون لرن که امتحان کردم این مشکل به وجود نمیاد و منو به موقع واکنش نشون میده
    این عکس رو هم برای تفهمیم بهتر سوال میگذارم
    http://uploadkon.ir/fl/dd/40728

  • ‏‏
    karim mos(۱۸ مهر ۱۳۹۳)

    واقعا پاسخ گوییتون حرف نداره! :)

  • ‏‏
    karim mos(۱۸ مهر ۱۳۹۳)

    همینجور که تعریف ها رو سریع تایید میکنید اگه سوالی هم که نظر قبل کرده بودم پاسخ میدادید چقدر خوب بود 😉

  • ‏‏
    سید احسان عظیمی(۲۷ آذر ۱۳۹۳)

    واقعا توضیحات کاملن.ممنون خانم کلانتری

  • ‏‏
    محمد(۳۰ دی ۱۳۹۳)

    به شدت از گروه سون لرن متشکرم
    امیدوارم مسیرتون همیشه هموار باشه .
    من برنامه نویس دات نت و تو زمینه طراحی و ساخت دیتابیس فعال هستم و 5ماهی هست که روی طراحی وب کار می کنم و سایت سون لرن واقعا برای شروع چیزهایی که می خواستم یاد بگیرم همیشه مفید بوده.
    زنده باشید و سلامت

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram