دیتالایف انجین فارسی

استایل دهی فیلد اضافی

تاریخ انتشار: 3 اسفند 1394
ارسال کننده: mohandesan
امروز آموزشی که قبلا دوست عزیزمون گذاشتن رو میخوایم استایل دهی زیبایی با استفاده از CSS و FontAwesome انجام دهیم
  • آموزش نصب
  • تصاویر
ابتدا طبق آموزش قبلی فیلد دانلود رو ایجاد میکنیم

استایل دهی فیلد اضافی

 در ادامه shortstory.tpl را باز کرده و کد زیر را بعد از تگ امروز آموزشی که قبلا دوست عزیزمون گذاشتن رو میخوایم استایل دهی زیبایی با استفاده از CSS و FontAwesome انجام دهیم
قرار می دهیم:

<BR> [xfgiven_download] <div class="download"><i class="fa fa-download"></i><a href=[xfvalue_download]>دانلود فايل</a></div> [/xfgiven_download]
به فایل style.css قالبتون رفته و کد های زیر را در انتهای فایل قرار می دهیم:

article .download { background-color: #36d7b7; margin: 15px 0; padding: 15px; border-left: 10px solid #2abb9b;
}
article .download a{ margin-right:7px;
}
article .download a:hover{ margin-right:7px; color:#fff;
}

 

خوب برای اینکه آیکون مورد نظرمونو بشناسه نیاز داریم کد زیر را در فایل main.tpl  در بین تگ head  صفحه قرار دهیم:

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

 شما میتونین برای تغییر آیکون کناری به سایت https://fortawesome.github.io رفته و آیکون مورد نظر رو طبق آموزش خودشون اضافه کنید

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

 

البته این استایل رو میتونین در فایل fullstory.tpl  بعد از تگ {full-story*} قرار بدید.

استایل دهی فیلد اضافی
7 نفر (5 کاربر و 2 میهمان) از این مطلب تشکر کرده اند.
تشکر
جهت ارسال نظر، فرم زیر را تکمیل نمائید:
نام:*
ایمیل:*
متن نظر:

 
پررنگکج خط دارخط دار در وسط|سمت چپوسط سمت راست|قرار دادن شکلکانتخاب رنگ|پنهان کردن متنقراردادن نقل قولتبدیل نوشته ها به زبان روسیقراردادن Spoiler
کد امنیتی: *