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

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

پشتیبان رسمی سیستم مدیریت محتوا

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

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

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

آموزش نصب
ابتدا طبق آموزش قبلی فیلد دانلود رو ایجاد میکنیم

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

 در ادامه shortstory.tpl را باز کرده و کد زیر را بعد از تگ {short-story} قرار می دهیم:

<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*} قرار بدید.

تصاویر
http://www.datalifeengine.ir/uploads/posts/2016-02/1456158109_1455273780_2.jpg
ارسال نظر
نام:*
ایمیل:*
متن نظر:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
کد را وارد کنید: *
عکس خوانده نمی‌شود؟ کلیک کنید!