+- پارس جوم :: انجمن های تخصصی جوملا (https://forums.parsjoom.ir)
+-- انجمن: پشتیبانی (/forum-70.html)
+--- انجمن: مباحث و مشکلات عمومی (/forum-33.html)
+--- موضوع: تغییر ظاهر دکمه ادامه مطلب (/thread-18715.html)
تغییر ظاهر دکمه ادامه مطلب - mo-hammad - ۳۰-۷-۱۳۹۴ ۱۰:۳۳ عصر
سلام من ادامه مطلب قالبم فقط یه متن هست - حالا من میخوام دورش یه کادر سفید باشه باید چیکار کنم؟
RE: تغییر ظاهر دکمه ادامه مطلب - mo-hammad - ۳۰-۷-۱۳۹۴ ۱۱:۱۱ عصر
با تمپلیت توستر قالب رو طراحی کردم ولی تو خود تمپلیت توستر چیزی واسه کادر دادن به گزینه ادامه مطلب نداشت - میشه راهنمایی کنید - مهمه
RE: تغییر ظاهر دکمه ادامه مطلب - mostafa272 - ۱-۸-۱۳۹۴ ۱۲:۳۷ صبح
سایت رو با فایرفاکس بیار بالا از قسمت
developer
مرورگر
Inspector رو
بزن و بعد برو روی دکمه مورد نظر تا بفهمی کجا و چجوری استایل داده شده
RE: تغییر ظاهر دکمه ادامه مطلب - hamzeh12hh - ۳-۸-۱۳۹۴ ۰۵:۱۲ عصر
سلام
روشی که دوستان مطرح کردند روی مرورگر های مختلف جوابگو هست ولی روی هر مرورگر به شیوه ای متفاوت.
به عنوان مثال روی مرورگر گوگل کروم با کلیک راست روی دکمه مورد نظر و انتخاب گزینه inspect element میتونید مسیر کلاس مربوط ب اون قسمت رو پیدا کنید و خاصیت دلخواه رو اعمال کنید.
RE: تغییر ظاهر دکمه ادامه مطلب - aaamin - ۴-۸-۱۳۹۴ ۰۷:۲۸ صبح
با سلام
اگه دکمه ها را دستی وارد میکنید ابتدا کدهای زیر را به انتهای فایل template.css قالب اضافه کنید
کد php:
.buttonred
{
display: inline-block;
vertical-align: middle;
cursor: pointer;
background-color:#fa1414;
font-family: google;
font-size: 15px;
text-align:center;
color: #ffffff;
padding: 10px 30px 10px 30px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-shadow:2px 2px 5px #272727;
margin-top: 20px;
margin-bottom: 10px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
-webkit-box-shadow: inset 0px 10px 10px 1px rgba(250, 150, 150, .5);
box-shadow: inset 0px 10px 10px 1px rgba(250, 150, 150, .5);
}
.buttonred:hover
{
color: #ffffff;
-webkit-box-shadow: inset 0px -10px 10px 1px rgba(250, 150, 150, .5) ,
0px 0px 5px 0px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px -10px 10px 1px rgba(250, 150, 150, .5) ,
0px 0px 5px 0px rgba(0, 0, 0, 0.4);
-webkit-transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
}
و برای
فراخواني كلاس در سايت هم کد زیر را در هر جا که مایل بودید بیارید
کد php:
<div class="buttonred">دانلود</div>
راه های زیادی هست که میتونید استفاده کنید و دکمه های زیبایی داشته باشید
فایل موجود در پیوست کدهای سی اس اس نمایشهای مختلف به همراه اچ تی ام ال می باشد
که میتونید به همون روشی که در بالا گفتم ازشون استفاده کنید
[attachment=8295]