Webboard

Pełna wersja: Button "Emotikony" do Shoutboxa, okienko z klikalnymi emotikonami
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Na wstępie chciałbym zaznaczyć, iż jest to edycja klikalnych emotikonek autorstwa Divir'a.


 

1 Edycja szablonów głównych



Przechodzimy do: ACP -> Style i szablony -> Szablony -> Szablony globalne-> dvz_shoutbox


Nad: 
Kod PHP:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/dvz_shoutbox.js"></script

Dodajemy:

Kod:
 <script>
       $('.smilie_dvz').click(function() {
           var smilie = $(this).attr("alt"),
               inputValue = $('#dvz_input').val();
           $('#dvz_input').val(inputValue + smilie);
       });
   </script>




 

2 Edycja szablonów głównych - panel



Przechodzimy do: ACP -> Style i szablony -> Szablony -> Szablony globalne-> dvz_shoutbox_panel

Widoczną zawartość zamieniamy na gotowy kod:


Kod:
<div class="panel">
<form>
<a href="#" onclick="$('#fast_nav').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><img src="{$theme['imgdir']}/button.png"/></a>
<div class="modal" id="fast_nav" style="display: none;">
                       <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
                           <tr>
                               <div id="smilies_box">
               <img src="{$theme['imgdir']}/smilies/smile.png" alt=":)" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/wink.png" alt=";)" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/cool.png" alt=":cool:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/biggrin.png" alt=":D" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/tongue.png" alt=":P" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/rolleyes.png" alt=":rolleyes:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/shy.png" alt=":shy:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/sad.png" alt=":sad:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/at.png" alt=":at:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/angel.png" alt=":angel:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/angry.png" alt=":angry:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/blush.png" alt=":blush:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/confused.png" alt=":s" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/dodgy.png" alt=":dodgy:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/exclamation.png" alt=":exclamation:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/heart.png" alt=":heart:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/huh.png" alt=":huh:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/lightbulb.png" alt=":idea:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/sleepy.png" alt=":sleepy:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/undecided.png" alt=":-/" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/cry.png" alt=":cry:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/sick.png" alt=":sick:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/arrow.png" alt=":arrow:" class="smilie_dvz clickable">
               <img src="{$theme['imgdir']}/smilies/my.png" alt=":my:" class="smilie_dvz clickable">
</div>
                           </tr>
                       </table>
               </div>
<input type="text" id="dvz_input" class="text" placeholder="{$lang->dvz_sb_default}" maxlength="{$maxlength}" autocomplete="off" />  
</form>
</div>

Zapisujemy i przechodzimy do FTP.

 

3 Wgranie plików do FTP



W tym celu łączymy się z naszym serwerem poprzez FTP / główny katalog plików (public_html) / i do images wrzucamy pobrane buttony z załącznika poniżej (jak wskazuje ścieżka 
Cytat:{$theme['imgdir']}/button.png
pliki wgrywamy bezpośrednio z folderu, nie z folderem, czyli button.png powinien znajdować się w /images, odpowiednio buttondark.png również.

 

4 Styl ciemny (dark)



Jeżeli posiadasz ciemny styl forum, zamień w ACP -> Style i szablony -> Szablony -> Szablony globalne-> dvz_shoutbox_panel

Kod:
<img src="{$theme['imgdir']}/button.png"/></a>

Na 


Kod:
<img src="{$theme['imgdir']}/buttondark.png"/></a>


Wygląd:

[Obrazek: lQhR7d8.png]



[attachment=13055][attachment=13056]