Kustominasi Tombol Dengan CSS

Hei semua, ini adalah upaya saya untuk menjawab semua pertanyaan orang tentang tombol CSS dan 1.x MyBB dengan membuat tutorial singkat.

Tutorial itu sendiri tidak terlalu sulit, tetapi akan berjalan Anda 10 menit atau lebih. Oleh karena itu, saya telah mengumpulkan sebuah kulit XML starter. Bagi mereka yang ingin melompat tepat ke dalamnya dengan tombol sudah bekerja, jadi jika Anda ingin melakukan itu hanya melompat ke bawah. Kredit untuk BitzDefender untuk tutorial asli .

Langkah 1: jQuery Beban
Langkah 2: Masukkan jQuery Plugin Cookie
Langkah 3: Tambahkan sebuah script kecil di bawah yang pada dasarnya akan menemukan cookie yang menyimpan id pos ditandai sebagai "dikutip", terbelah array, menemukan tulisan, menyoroti tombol, dll

Langkah 1-3 di sini (menambahkan ini ke bagian atas Ungrouped Templates > headerinclude ):

Kode: (Select All)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie=function(name,value,options){if(typeof value!="undefined"){options=options||{};if(value===null){value="";options.expires=-1;}var expires="";if(options.expires&&(typeof options.expires=="number"||options.expires.toUTCString)){var date;if(typeof options.expires=="number"){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=o​​ptions.expires;}expires="; expires="+date.toUTCString();}var path=options.path?"; path="+(options.path):"";var domain=options.domain?"; domain="+(options.domain):"";var secure=options.secure?"; secure":"";document.cookie=[name,"=",encodeURIComponent(value),expires,path,domain,secure].join("");}else{var cookieValue=null;if(document.cookie&&document.cookie!=""){var cookies=document.cookie.split(";");for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+"=")){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}retu​​rn cookieValue;}};
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {

if( $.cookie('multiquote') !== null ) {
var quoted = $.cookie("multiquote");
var quoted_split = quoted.split('|');
jQuery.each(quoted_split, function() {
$('#multiquote_link_' + this).addClass('multiquote_on');
});
}

$('a.button_multiquote').click(function() {
if($(this).hasClass('multiquote_on')) {
$(this).removeClass('multiquote_on');
} else {
$(this).addClass('multiquote_on');
}
});

});
</script>

Langkah 4: Buka semua template berikut dan mengeditnya bagaimana keinginan Anda, tapi kuncinya adalah untuk memberikan setiap kelas yang Anda bisa bergaya dengan mudah. Apa yang saya sarankan adalah memberikan setiap kelas generik (seperti "postbit_button") dan kelas tertentu (seperti "button_email"). Untuk tombol besar saya menggunakan "large_button" bukan postbit_button sehingga cara saya dapat membuat tombol-tombol tersebut sedikit lebih besar.

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

Berikut adalah contoh dari postbit_pm:

Kode: (Select All)

<a href="private.php?action=send&amp;uid={$post['uid']}" class="postbit_button button_pm" title="{$lang->postbit_pm}">PM</a>

Template yang paling penting adalah template yang postbit_multiquote, jadi saya sudah termasuk yang di sini juga, saya sarankan menggunakan yang satu ini sama. Harap dicatat bahwa kami perlu menyembunyikan <img> dengan CSS (lihat Langkah 5) agar hal berfungsi dengan benar.

Kode: (Select All)

<a href="javascript:Thread.multiQuote({$post['pid']});" style="display: none;" id="multiquote_link_{$post['pid']}" class="postbit_button button_multiquote" title="{$lang->postbit_multiquote}"><img src="{$theme['imglangdir']}/postbit_multiquote.gif" alt="{$lang->postbit_multiquote}" title="{$lang->postbit_multiquote}" id="multiquote_{$post['pid']}" />Quote</a>
<script type="text/javascript">
//<!--
$('multiquote_link_{$post['pid']}').style.display = '';
// -->
</script>

Perhatikan penggunaan class = "" dan judul = "", serta kenyataan bahwa Anda harus memasukkan sesuatu di antara <a> </ a> tag, aku lalai untuk menggunakan vars lang hanya karena MyBB tidak memiliki seragam vars lang untuk tombol-tombol dan aku tidak benar-benar ingin membuat yang baru, jika Anda ingin ada tutorial di luar sana pada menciptakan frase bahasa Anda sendiri dan Anda dapat melakukannya dengan cara itu.

Langkah 5: Tambahkan beberapa CSS untuk memberikan dimensi tombol.

Berikut adalah apa yang saya gunakan:

Kode: (Select All)

a.postbit_button, a.large_button {
display: inline-block;
border-radius: 3px;
-webkit-border-radius: 3px;
background: #2989d8;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGx​p​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3​Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc​2V0​PSIwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBv​ZmZz​ZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGl​uZWFy​R3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD​0idXJs​KCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(100%,#1e5799));
background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%);
background: linear-gradient(top, #2989d8 0%,#1e5799 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );
padding: 2px 6px;
text-align: center;
color: #FFF !important;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
font-weight: bold;
font-size: 10px;
margin: 1px;
}

a.large_button {
border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px 10px;
text-align: center;
font-size: 13px;
}

a:hover.postbit_button {
background: #6db3f2;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGx​p​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3​Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc​2V0​PSIwJSIgc3RvcC1jb2xvcj0iIzZkYjNmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBv​ZmZz​ZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzU0YTNlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3R​vcCBv​ZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzM2OTBmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIC​A8c3Rv​cCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTY5ZGUiIHN0b3Atb3BhY2l0eT0iMSIvP​gogIDwv​bGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0i​MSIgZmls​bD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
text-decoration: none;
}

a.multiquote_on {
background: #bfd255;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGx​p​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3​Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc​2V0​PSIwJSIgc3RvcC1jb2xvcj0iI2JmZDI1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBv​ZmZz​ZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzhlYjkyYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3R​vcCBv​ZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzcyYWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIC​A8c3Rv​cCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZWNiMmQiIHN0b3Atb3BhY2l0eT0iMSIvP​gogIDwv​bGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0i​MSIgZmls​bD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#9ecb2d));
background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
background: linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
}

a:hover.multiquote_on, a.button_newreply_closed {
background: #ff3019;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdo​​dD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGx​p​bmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3​Bh​Y2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc​2V0​PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMzAxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBv​ZmZz​ZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZjA0MDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGl​uZWFy​R3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD​0idXJs​KCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

.button_multiquote img {
display: none;
}

Harap dicatat bahwa saya telah menggunakan gradien CSS3 sini bahwa adalah browser yang kompatibel untuk semua browser utama. Anda dapat membuat gradien Anda sendiri dengan mudah di sini . Juga mengakui bahwa aku telah memberikan tombol multiquote saya (dalam template postbit_multiquote) kelas "button_multiquote". Hal ini sangat penting karena Anda perlu untuk menyembunyikan gambar (seperti yang disebutkan sebelumnya), dan Anda dapat melihat kode untuk bahwa dalam 3 baris bawah CSS. Saya juga bernama tombol tertutup saya "button_newreply_closed", sehingga akan berubah menjadi merah ketika thread ditutup. Anda dapat mendapatkan kreatif dengan yang Anda inginkan, Anda bahkan dapat menambahkan ikon untuk setiap tombol selama Anda memberikan setiap tombol nama kelas identifikasi yang unik (saya sudah melakukan ini dalam file XML., Hanya saja tidak menambahkan apapun ikon).

Saya TIDAK benar-benar teruji. File XML, saya melakukannya agak cepat, jadi jika anda menemukan bug beritahu saya dan III kompilasi ulang. Semua harus bekerja dengan baik meskipun, hanya dalam kasus.