قرار دادن لیست استایل (list style) در قالب با استفاده از کد آماده

قرار دادن لیست استایل (list style) در قالب با استفاده از کد آماده

آموزش وردپرس

list style چیست ؟

در طراحی صفحات سایت ها از لیست ها یا فهرست ها بسیار استفاده میشه که در کنار هر ردیف ( یا li ) یک علامتی مثل مربع ، دایره ، …  یا آیکونی هستش که به اون list style میگن.

آموزش و کدهای list style قالب

بهترین کار این هستش ، برای این که قالب بهم نریزه و یکهو !! تمام li های قالب اون list style رو به خودشون نگیرند ، شما نگاه کنید و ببینید که کلاس یا id اون قسمت از قالب شما در فایل style.css چی هستش تا فقط به همین کلاس list style رو اضافه کنیم.

برای پیدا کردن کلاس باید یکمی هم آشنایی داشته باشید اما راست کلیک کنید روی اون قسمت قالب و اگر با گوگل کروم هستید گزینه inspect element رو بزنید ، و کلاس رو پیدا کنید.در قالب فعلی سایت من کلاسی که نوشته های من داخلش هستند posts. هستش.

بعد کافیه که یک خط به استایل اضافه کنید و نام اون کلاس رو بنویسید و یک فاصله بدید و بعدش li رو بنویسید و مقادیر زیر رو داخلش تعریف کنید.به فرض مثال برای کلاس posts. سایت من باید چنین کدی رو به استایل اضافه کرد.

.posts li{
background: url(http://www.taklearn.ir/wp-content/uploads/2016/07/check-list.png) no-repeat right!important;
padding-right: 28px!important;
list-style-type: none;
}

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

بعدش با این کار یک list style با آیکون تیک سبز به لیست های قسمت نوشته های قالب  اضافه میشه به این شکل

  • list style با آیکون تیک سبز رو این کنار ببینید !

اگر در ادیتور وردپرس یا ادیتور سیستم های مدیریت محتوای دیگه که همه شبیه هم هستند توجه کرده باشید ۲تا گزینه برای فهرست به صورت مرتب و نا مرتب وجود دارند .

اضافه کردن فهرست و لیست در ادیتور وردپرس

شما باید ازین ها هر کجای متن نوشته که می خواهید استفاده کنید ، ما قبلشم که تو قالب براشون تعریف کردیم کنارشون یک تیک سبز میان !

نت افراز

مشخصات

  • منبع: دکتر وردپرس

دانـــــلود

  • ۵۴۷ بازدید

برچسب ها

مطالب پیشنهادی ما

دیدگاه های شما

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *