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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش طراحی قالب (فصل پنجم – جلسه چهارم) : تکمیل استایل دهی قالب

25469 ۲ مرداد ۹۲

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

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

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

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

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

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

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

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

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

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

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

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

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

 سپس استایل عنوان مطلب رو می نویسیم : (مقداری متفاوت تر از psd)

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

(خط های 3 و 8 اضافه شده)

حال استایل این قسمت ها :

سپس برای از بین بردن خاصیت float بر سایر قسمت ها کد clear رو به فایل html، قبل از کد ادامه مطلب اضافه می کنیم. (خط شماره 8 اضافه شده)

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

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

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

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

در جلسه بعدی که بعضی اصلاحات را انجام خواهیم داد و باگ های قالب را خواهیم گرفت.

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

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

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

  • ‏‏
    hamed_z2001(۷ بهمن ۱۳۹۲)

    سلام من به چندتا مشکل برخوردم که لطف میکنی اگه جوابمو بدی!!
    1- وقتی عکس مربوط به خط همراه با فلش زیر عنوان بلوکهای چپ و راست رو میذارم(به عنوان بک گراند،طبق آموزش) خط روی عنوان قرار میگیره ….اینم عکسش:
    http://upload7.ir/imgs/2014-01/89138169478827360480.jpg

    2-وقتی صفحه رو تو مرورگر ریسایز میکنم قالب بهم میریزه چیکارش کنم؟؟
    اینم عکسش:
    http://upload7.ir/imgs/2014-01/53908820532258069867.jpg

    3-تو css چی جوری میشه اینجوری منو درست کرد؟؟با شیب؟؟
    عکس:
    http://upload7.ir/imgs/2014-01/04379592814705961214.jpg
    مرسی دوست خوبم.ببخش که یکم سوالام زیاد شد 😀

    • ‏‏
      سجاد دریس(۸ بهمن ۱۳۹۲)

      سلام.
      1. دقیقا کد رو درست نوشتین؟ انگار از padding-bottom استفاده نکردین.
      2. همچین مشکلی وجود نداره، شما قالب رو تا آخر طراحی کنید حتما این مشکل حل میشه چون هنوز قالبتون ناقصه این مشکل رو دارید.
      3. با استفاده از خاصیت transform skew میشه ایجادش کرد. ولی برای اینکه پیچیده نشه میتونید تصویر رو برش بزنید و به عنوان بکگراند منو ازش استفاده کنید
      برا آشنایی با خاصیت transform
      این آموزش رو مطالعه کنید.

      • ‏‏
        hamed_z2001(۸ بهمن ۱۳۹۲)

        ممنون سجاد جان
        1- آره.کدا رو دقیق از رو آموزشت زدم.padding bottom هم وقتی تعریف میکنم فقط لینکهایی که زیر عنوان نوشته شده رو پایین میبره.مطمئنی که اون خط باید به عنوان بکگراند استفاده بشه؟؟نباید به شیوه دیگه ای واردش کرد؟؟
        2-مشکلش حل شد.دستت درد نکنه.عرض wrapper رو تعریف نکرده بودم برا همین کل صفحه رو در نظر میگرفت و با ریسایز بهم میریخت
        3-منظورت از استفاده از skew اینه که هر طرف منو 2تا box بذارم و یکیشو بچرخونم؟؟

        • ‏‏
          سجاد دریس(۹ بهمن ۱۳۹۲)

          1.عجیبه. کدت رو بفرست ببنیم!
          3. آره

  • ‏‏
    hamed_z2001(۱۰ بهمن ۱۳۹۲)

    سجاد جون بیا دادا اینم کد کاملم:
    http://gigpars.com/upload/ex3l_theme.rar

    • ‏‏
      سجاد دریس(۱۱ بهمن ۱۳۹۲)

      سلام.
      این فایل رو جایگزین کن.

      • ‏‏
        hamed_z2001(۱۱ بهمن ۱۳۹۲)

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

        • ‏‏
          سجاد دریس(۱۲ بهمن ۱۳۹۲)

          توی خصوصیت background مقدار center bottom رو و ننوشته بودی تا که background در پایین نوشته قرار بگیره

  • ‏‏
    سید مجتبی علمدار(۲۸ فروردین ۱۳۹۳)

    سلام.خسته نباشید.
    تشکر بابت اموزش خوبتون.
    یه سوال داشتم خدمتتون؟
    من کدها را از اول با شما همراهی کردم و نوشتم ولی left-sidebar من درست در جای خودش قرار نگرفته؟
    می خواست ببینم ایراد کار کجاست؟؟
    فایل css و اچ تی ام ال:
    http://uplod.ir/62u20gfx22v2/style.css.htm
    http://uplod.ir/3ak6zht4n99g/index.html.htm
    ممنون از اموزش خوبتون.

  • ‏‏

    سلام من تو این جلسه هم به مشکل استفاده از float بر خوردم تو جلسه قبل تگ a رو نبسته بودم ولی الان همه تگهارو نگا کردم مشکلی نبود نمیدونم چرا بعد استفاده از float و clear کد درست عمل نمیکنه لطف میکنید بگین مشکلم کجاست
    ممنون
    http://upir.ir/1393.2/ghaleb_6c132.zip

    • ‏‏
      سجاد دریس(۴ خرداد ۱۳۹۳)

      سلام.
      آیدی left sidebar و right sidebar رو تصحیح کنید
      خط های 63 و 131
      بین right و sidebar و همینطور بین left و sidebar فاصله نذارید بلکه – قرار بدین.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram