مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش دکمه css زیبا با قابلیت درخشندگی

آموزش دکمه Css زیبا با قابلیت درخشندگی
Thumbs Up 
خب دوستان امروز یه مدل کد دکمه css رو براتون میذارم که خیلی زیباست:
شما ابتدا این کد css رو در درون قالب global.css اضافه مینمایید:



کد:
.bigbutton {display: inline-block;
padding: 9px 15px;
background: #343434 url(images/highlight.png) repeat-x top;
color: white !important;
margin-bottom: 12px;
font-weight: bold;
border: 1px solid #000;
border-radius: 3px;
text-transform: uppercase;
font-size: 12px;
text-shadow: 1px 1px 1px #2E2E2E;
margin-top: -4px;-webkit-transition: 0.3s;transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;}
.bigbutton:hover {background-color: #126a7f;border-color: #1c87a1;box-shadow: 0px 0px 9px #1c87a1;}

خب حالا برای استفاده از این دکمه در محل مورد نظر کد html زیر را میگذاریم:


کد:
<a class="bigbutton" href="Adress"></a>

و یادتون نره این عکس هم در پوشه images هاستتون بریزید:

.png   highlight.png (اندازه 130 بایت / تعداد دانلود: 300)

خب این نوع دکمه بزرگ هست و مخصوص استفاده برای پاسخ جدید یا موضوع جدید میباشد...
نوع کوچکش هم میذارم در پست بعدیتصویر: images/smilies/heart.gif

اعتبار و سپس فراموش نشهتصویر: images/smilies/heart.gifتصویر: images/smilies/tongue.gif
حالا این محل مورد نظر برای دکمه های مختلفی که وجود داره مثل موضوع جدید و ارسال پاسخ و سایت و اعتبار و . . . . چیه و کجاست؟


www.ATAMALEK.ir
 
Thumbs Up 
مثلا برای اینکه این دکمه رو برای قسمت ارسال موضوع و پاسخ قرار بدیم:
برای تغییر دکمه ارسال موضوع به قسمت>>کنترل پنل>> قالب ها>> Show Thread قالب‌ها>> showthread_newreply>> بروید و تغییر دهید
و برای ارسال پاسخ به قسمت>>کنترل پنل>>قالب ها>>New Reply قالب‌>> newreply>> رفته و تغییر دهید
بزودی برای دکمه های پست بیت هم دکمه های کوچیک قرار میدهمتصویر: images/smilies/heart.gif
با تشکرتصویر: images/smilies/heart.gif
Thumbs Up 
این هم دکمه های کوچک که میتونید یه عکس کوچیک هم کنارش قرار بدید:
کدهای زیر را به global.css اضافه کنید:




کد:
.postbit_button {display: inline-block;
background: #2C3636 url(images/highlight_faint.png) repeat-x top;
color:
white !important;
padding: 5px 5px;
font-size: 11px;
border-radius: 2px;
-webkit-transition:0.2s;}
.postbit_button:hover {background-color: #237b90;box-shadow: 0px 0px 7px #237b90;}
.postbit_button img {
vertical-align: middle;
margin-right: 3px;
margin-top: -3px;
}
عکس زیر هم در images هاست قرار دهید:

.png   highlight_faint.png (اندازه 127 بایت / تعداد دانلود: 273)

و کد html که برای دکمه ها میتونید استفاده کنید:



کد:
<a class="postbit_button" href="search.php?action=finduser&uid=1"><img title="یافتن تمامی ارسال‌های این کاربر" alt="یافتن تمامی ارسال‌های این کاربر" src="images/icons/find.png"></img>
جستجو
</a>
کد بالا یک مثال است و میتونید مثلا عکس رو قرار ندید کنار دکمتون و یا تغییرات دیگه بدید درشتصویر: images/smilies/heart.gif
برای قرار دادن دکمه ها برای قسمت postbit به قسمت قالب ها>> postbit>> و یکی یکی هر یک از قالب های دکمه ها رو اونجا میتونید ببینید و ویرایش کنیدتصویر: images/smilies/heart.gif
با تشکرتصویر: images/smilies/heart.gif
نقل قول:مثلا برای اینکه این دکمه رو برای قسمت ارسال موضوع و پاسخ قرار بدیم:
برای تغییر دکمه ارسال موضوع به قسمت>>کنترل پنل>> قالب ها>> Show Thread قالب‌ها>> showthread_newreply>> بروید و تغییر دهید
تصویر: http://my-bb.ir/images/smilies/heart.gif
من این کار ها رو برای موضوع جدید انجام دادم


ولی پاسخ جدید تغییر پیدا کرد و نوشته ای هم براش ظاهر نشد


www.ATAMALEK.ir
 
باید برای تمامی گزینه های پست بیت
  • postbit_delete_pm
  • postbit_edit
  • postbit_email
  • postbit_find
  • postbit_forward_pm
  • postbit_multiquote
  • postbit_pm
  • postbit_quickdelete
  • postbit_quote
  • postbit_rep_button
  • postbit_reply_pm
  • postbit_replyall_pm
  • postbit_report
  • postbit_warn
  • postbit_www
  • forumdisplay_newthread
  • reputation_addlink
  • showthread_newreply
  • showthread_newreply_closed
قرار بدید . سپس در لینک دهی و کلاس دهی بایستی به درستی عمل کنین و گرنه نمایان نمیشه


خوشحالم به خاطر این همه پیشرفت
I'm happy to progress
دوست من دلیل اینکه نوشته ای براش نیموده اینه که شما نوشته ای وارد نکردید!
باید دو کد لینک a نوشته مورد نظر خود رو قرار بدید یعنی بدین شکل:

کد:
<a class="bigbutton" href="Adress">نوشته شما</a>
برای موضوع جدید کجا رو باید تغییر بدم؟


www.ATAMALEK.ir
 
ویرایش قالب: forumdisplay_newthread




موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش متصل کردن کاربران مای‌بی‌بی به وردپرس Tofighi 22 5,080 ۰۳ تير ۱۳۹۴، ۰۲:۵۹ ب.ظ
آخرین ارسال: Mohammadreza477
  آموزش تب بندی پروفایل به سبک VB Tofighi 162 29,550 ۱۱ فروردین ۱۳۹۴، ۰۶:۰۴ ب.ظ
آخرین ارسال: Masoud_MI
  آموزش زیبا سازی قسمت Navigation Tofighi 79 15,459 ۲۳ آبان ۱۳۹۳، ۰۳:۳۸ ب.ظ
آخرین ارسال: KalKalForum
  آموزش ساخت صفحات جداگانه پی اچ پی برای مای بی بی mybb 1 1,843 ۱۹ آبان ۱۳۹۳، ۰۶:۵۷ ب.ظ
آخرین ارسال: sajad1441
  آموزش فعال سازی Html امضا برای گروه‌های خاص Tofighi 5 2,631 ۲۲ مهر ۱۳۹۳، ۱۱:۴۷ ب.ظ
آخرین ارسال: akpar
  آموزش ست کردن مای بی بی با آمارگیر piwik TaK DoKhTaR 20 6,018 ۰۲ خرداد ۱۳۹۳، ۰۸:۳۸ ب.ظ
آخرین ارسال: Mehr@ban
  آموزش سئو وبسایت با استفاده از تگهای heading Tofighi 35 7,131 ۰۲ خرداد ۱۳۹۳، ۰۵:۴۸ ب.ظ
آخرین ارسال: Mehr@ban
  آموزش تبدیل اعداد انگلیسی به فارسی در MyBB Tofighi 5 2,497 ۲۹ دى ۱۳۹۲، ۱۲:۴۱ ب.ظ
آخرین ارسال: Amir-Me
Star آموزش ایجاد تولتیپ ویژه v2 KoG 10 3,164 ۲۵ دى ۱۳۹۲، ۱۲:۵۵ ب.ظ
آخرین ارسال: Arsalan
  آموزش ایجاد نوار نمایش امکانات Tofighi 48 7,990 ۲۵ دى ۱۳۹۲، ۱۲:۴۶ ب.ظ
آخرین ارسال: KoG

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir