Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
Miguel92

Mini-complemento Notificaciones [Badge]

Recommended Posts

Esto es lo que se va a hacer:

discord.png.68d513de76c883b37daf666d349bdeb1.png

 

Es muy fácil de realizar.

 

1 - Buscamos en js/live.js y lo borramos

$(document).attr('title', global_data.s_title + ' (' + total_notis + ') - ' + global_data.s_slogan);

 

2 - Buscamos en sections/main_header.tpl

$(document).ready(function(){
// {/literal}
    {if $tsNots > 0} 
    notifica.popup({$tsNots});
    {/if}
    {if $tsMPs > 0 &&  $tsAction != 'leer'}
    mensaje.popup({$tsMPs});
    {/if}

debajo agregamos

  {if $tsNots + $tsMPs + $tsAvisos}
        var favBadge = {$tsNots + $tsMPs + $tsAvisos};
        var favicon = new Favico({
            animation:'popFade'
        });
        favicon.badge(favBadge)
    {/if}

Aunque no es necesario que usemos el IF ya que el complemento si ve que es 0 no mostrará nada!

 

Si tienes la versión v5/v6 que tiene $Shouts y $Posts lo puedes agregar tranquilamente

var favBadge = {$tsNots + $tsMPs + $tsAvisos + $Shouts + $Posts};

 

3 - Vamos a js/jquery.plugins.js y abajo de todo colocaremos esto:

Ver código

 

NOTA: Si quieres cambiar de color, posición, forma, efecto visita la página oficial del plugin

Favico.js

  • Like 1
  • Thanks 2
  • Downvote 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • By Miguel92
      Bueno decidí hacerlo porque me parece una forma de poder ver todos los smiles/emoticones sin problemas.
      Les va a quedar así.


      Literalmente me base en el mod de @Kmario19 [MOD] Emoticones Administrables V2, excepto que este NO ES ADMINISTRABLE.
      Bueno comencemos:
      1 - En inc/php/ajax/ajax.emoticones.php buscamos
          foreach($emoticones as $key => $emo){         echo '<a smile="'.$emo[0].'" href="#"><img src="'.$tsCore->settings['default'].'/images/smiles/'.$emo[1].'" style="margin:auto 2px;"/></a>';     } y la reemplazamos por 
          echo'<div class="smiles">';     foreach($emoticones as $key => $emo){         echo '<a smile="'.$emo[0].'" href="#"><img alt="'.$emo[0].'" src="'.$tsCore->settings['images'].'/smiles/'.$emo[1].'"></a>';     }      echo'</div>';  
      2 - En js/funciones.js buscamos 
      function moreEmoticons(margin){     var emos = $('#emoticons');     //     $('#loading').fadeIn(250);      $.ajax({         type: 'GET',         url: global_data.url + '/emoticones.php',         data: 'ts=false',         success: function(h){             if(margin) $(emos).css({marginTop : '1em'})             $(emos).append(h);             $('#moreemofn').hide();             $('#loading').fadeOut(350);          }     });    } y la reemplazamos por
      function moreEmoticons(margin){    $('#emoticons').slideToggle('fast');  }  
      3 - En js/wysibb.js buscamos
              buildSmilebox: function(container,bn,opt) {             if (this.options.smileList && this.options.smileList.length>0) {                 var $btnHTML = $(this.strf(opt.buttonHTML,opt)).addClass("btn-inner");                 var $btn = $('<div class="wysibb-toolbar-btn wbb-smilebox wbb-'+bn+'">').appendTo(container).append($btnHTML).append(this.strf('<span class="btn-tooltip">{title}<ins/></span>',{title:opt.title}));                   var $sblock = $('<div class="wbb-list">').appendTo($btn);                 if ($.isArray(this.options.smileList)) {                     $.each(this.options.smileList,$.proxy(function(i,sm){                         $('<span>').addClass("smile").appendTo($sblock).append($(this.strf(sm.img,this.options)).attr("title",sm.title));                     },this));                 }                 $btn.mousedown($.proxy(function(e) {                     e.preventDefault();                     this.dropdownclick(".wbb-smilebox",".wbb-list",e);                 },this));                 $btn.find('.smile').mousedown($.proxy(function(e) {                     e.preventDefault();                     //this.selectLastRange();                     this.insertAtCursor((this.options.bbmode) ? this.toBB($(e.currentTarget).html()):$($(e.currentTarget).html()));                 },this))             }         }, y la reemplazamos por
            buildSmilebox: function(container,bn,opt) {          var $btnHTML = $(this.strf(opt.buttonHTML,opt)).addClass("btn-inner");          var $btn = $('<div class="wysibb-toolbar-btn wbb-smilebox wbb-'+bn+'">').appendTo(container).append($btnHTML).append(this.strf('<span class="btn-tooltip">{title}<ins/></span>',{title:opt.title}));           $btn.mousedown($.proxy(function(e) {             e.preventDefault();             $('#emoticons').slideToggle('fast');          },this));       },  
      4 - En templates/modules/m.global_emoticons.tpl y reemplazamos todo el contenido por
      <div id="emoticons" style="display:none;">   <!-- La imagen la pueden cambiar por la que deseen --> <img src="{$tsConfig.tema.t_url}/i/loading-spin.svg"> </div> {literal} <script type="text/javascript"> $(document).ready(function() {   $.ajax({     url: global_data.url + '/emoticones.php',     success: function(h) {       $('#emoticons').html(h);     }   }); }); $('#emoticons').click(function(e) {   e.preventDefault();   var smile = e.target.alt;   $('.wysibb-body').append(smile); // Inserta el smile/emoticon al editor }); </script> {/literal}  
      5 - Ir templates/modules/m.posts_comments_form.tpl y buscamos
      <div id="procesando"><div id="post"></div></div> y debajo agregaremos
      {include file='modules/m.global_emoticons.tpl'}  
      6 - En extras.css al final de todo agregamos
      #emoticons {     text-align: center;     border: 3px solid #CCCCCCFF;     padding: 4px;     margin: 6px; } #emoticons .smiles {     display: table;     position: relative;     z-index: 2;     width: 100%; } #emoticons .smiles img {     float: left;     cursor: pointer;     margin: 4px 2px;     font-size: 20px; }  
    • By Miguel92
      Esto es una mini actualización del

      Lo había incluido en el theme Hydra, pero no lo voy a usar!

      ¿Cual es la diferencia con el original?
      Que solo he agregado una función que he buscado por internet, que en este caso leerá el directorio CSS y obtendrá todos los nombre que existan en dicha carpeta, y es por ello que estan escritas manualmente estilo.css, extras.css y phpost.css en el caso que exista otro css fuera de la carpeta lo tendrán que escribir...
      Todos los achivos encontrados serán mostrados en un select en el cual ustedes puede seleccionar y presionar editar ya que agrega el texto correspondiente en el input

      1 - Ir a js/admin.js y debajo de todo agregar
      /* EDITAR CSS */ var css = { editar: function(){ var e = $('input[name=file-css]').val(); if(css.check(e)){ $.ajax({ type: 'POST', url: global_data.url + '/css.php?ajax=1&pas=0', data: 'css=' + e, success: function(h){ $('textarea[name=css]').html(h).css({ width:'100%', height: '500px', resize: 'vertical' }).show(); $('button[name=savecss]').show(); } }); } else sinCss(); }, save: function(){ var e = $('input[name=file-css]').val(); var t = $('textarea[name=css]').val(); $.ajax({ type: 'POST', url: global_data.url + '/css.php?ajax=1&pas=1', data: 'css=' + t + '&name=' + e, success: function(h){ mydialog.show(); mydialog.title('Guardado...'); mydialog.body('Debes recargar <b>' + global_data.s_title + '</b> para que los cambios realizados en el archivos sean aplicados!'); mydialog.buttons(true, true, 'Regargar', 'admincss()', true, false, true, 'No', 'close', true, true); mydialog.center(); } }); }, check: function(filename){ var ext = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : ''; if(ext && /^(css)$/.test(ext)) return true; else return false; } } // admincss function admincss() { location.href = global_data.url + '/admin/css' } function sinCss() { mydialog.show(); mydialog.title('Error'); mydialog.body('Debes seleccionar o escribir un archivos CSS para poder elegir'); mydialog.buttons(true, true, 'Ya entendi!', 'close', true, true); mydialog.center(); }

      2 - Ir a templates/t.admin.tpl y debajo de
      {elseif $tsAction == 'rangos'} {include file='admin_mods/m.admin_rangos.tpl'}
      agregar
      {elseif $tsAction == 'css'} {include file='admin_mods/m.admin_css.tpl'}
      3 -  Ir a templates/admin_mods/ y crear un archivo llamado m.admin_css.tpl y agregar lo siguiente (El diseño esta realizado con bootstrap 4 y Material) por lo que deberán adaptarlo a su theme
      {literal} <script type="text/javascript"> function cambioOpciones() { document.getElementById("mostrarCss").value=document.getElementById("opciones").value; } </script> {/literal} <div class="card-header"> <h3>Editar CSS</h3> </div> <div id="rec" class="card-body"> <span class="d-block">Seleccione un archivo, si no se encuentra escribalo!</span> <div class="row"> <div class="col-4"> <select id="opciones" onchange="cambioOpciones();" size="8" class="custom-select"> <option value=''>Selecciona una opción</option> <option value='estilo.css'>Estilo</option> <option value='extras.css'>Extras</option> <option value='phpost.css'>Phpost</option> {php} $directorio = opendir("../../themes/".TS_TEMA."/css/"); //ruta actual while ($archivo = readdir($directorio)) { if (is_dir($archivo)) { } else { $txtCSS = ucfirst(str_replace('.css', ' ', $archivo)); echo "<option value='css/$archivo'>$txtCSS</option>"; } } {/php} </select> </div> <div class="col-8"> <input type="text" name="file-css" id=mostrarCss" class="d-inline form-control" placeholder="Ej: estilo.css o css/admin.css" size="15" style="width:70%" /> <button class="btn btn-outline-success" onclick="css.editar(); return false;">Editar</button> <textarea name="css" class="prettyprint lang-css" style="display:none;"></textarea> <button class="btn btn-outline-info" onclick="css.save(); return false;" name="savecss" style="display:none;">Guardar</button> </div> </div> </div>
      Veran en el código de m.admin_css.tpl esto
      $directorio = opendir("../../themes/".TS_TEMA."/css/"); //ruta actual
      en donde dice ".TS_TEMA." no funciona, solo le cambian por el nombre de su theme actual

      4 - En la misma carpeta buscan m.admin_sidemenu.tpl y buscan
      <li id="a_temas"><span class="cat-title"><a href="{$tsConfig.url}/admin/temas">Temas y apariencia</a></span></li> y  agregan
      <li id="a_rangos"><span class="cat-title"><a href="{$tsConfig.url}/admin/css">Editar CSS</a></span></li> 5 - Por último van a inc/php/ajax y crean un archivo llamado ajax.css.php y pegan esto
      <?php if ( ! defined('TS_HEADER')) exit('No se permite el acceso directo al script att Xtatter :P'); /*/ · EDITAR EL CSS EN LA ADMIN BY XTATTER /*/ if($tsUser->uid == 1){ $pas = (int)$_GET['pas']; if($pas == 0) { $file_css = $tsCore->setSecure($_POST['css']); $i = file_get_contents($tsCore->settings['tema']['t_url'] . '/' . $file_css); if(empty($i)) $i = 'Error: el archivo no existe'; die($i); } else { $css = $_POST['css']; $css = str_replace('\\n', '\n', $css); $css = str_replace("&#039;", "'", $css); $css = str_replace('&quot;', '"', $css); $file_css = $_POST['name']; $i = '../../'.$tsCore->settings['tema']['t_url'] . '/'; file_put_contents( '../../themes/'.$tsCore->settings['tema']['t_path'] .'/'. $file_css, $css ); } } else { return false; } ?>
      VISTA PREVIA

    • By Miguel92
      Pedido: [Mod] Imagen de cabecera en comunidades
      Por: @fellomix
       
      Una segunda forma de poder hacerlo!
       
      1 -  Ejecutar esta consulta
      ALTER TABLE `c_comunidades` ADD `c_headercom` VARCHAR(255) NOT NULL AFTER `c_nombre_corto`; 2 -  Buscar en c.comunidades.php en la función nueva_comunidad()
                      'fecha' => time(),                 'nombre' => $tsCore->setSecure($tsCore->parseBadWords($_POST['nombre']), true),                 'ncorto' => $tsCore->setSeo($tsCore->setSecure($_POST['ncorto'], true)),
      y debajo agregamos
                      'headercom' => $tsCore->setSeo($tsCore->setSecure($_POST['headercom'], true)),
      un poco más abajo buscamos
                  // Insertamos             if(db_exec(array(__FILE__, __LINE__), 'query', 'INSERT INTO c_comunidades (c_autor, c_nombre, c_nombre_corto,
      y le agregamos a lado 
                   c_headercom,
      un poquito más abajo de
                      VALUES (                     \''.$tsUser->uid.'\',                     \''.$dato['nombre'].'\',                     \''.$dato['ncorto'].'\',
      agregamos
                          \''.$dato['headercom'].'\',
      Luego buscamos la función editar_comunidad($comid)
                          'pais' => $tsCore->setSecure($_POST['pais']),                         'desc' => $tsCore->setSecure($_POST['descripcion']),                     'color' => $tsCore->setSecure($_POST['back_color']),
      y debajo pegamos
                          'headercom' => $tsCore->setSecure($_POST['headercom']),
      más abajo buscamos 
                          c_acceso = \''.(int)$dato['acceso'].'\',                     c_permisos = \''.$dato['permisos'].'\',
      y debajo pegamos
       
                         c_headercom = \''.$dato['headercom'].'\',             
      3 - Después buscamos en c.crear_left.tpl
          <div class="item_form clearfix">         <label>Categoría</label>         <select name="categoria" id="ShowCats" class="required" onChange="com.subcat()" tabindex="3">             <option value="0">Selecciona una categoría</option>             {foreach from=$tsCats item=c}             <option value="{$c.cid}" {if $tsDato.c_categoria == $c.cid}selected="selected"{/if}>{$c.c_nombre}</option>             {/foreach}         </select>     </div>
      y debajo o arriba pegamos (se me olvido quitar los required, ya que no es obligatorio)
          <div class="item_form clearfix">         <label>Cabecera!</label>         <input type="text" name="headercom" tabindex="10" maxlength="180" size="60" class="required input_text https" placeholder="URL de portada (debe tener https://)" pattern="https://.*" value="{$tsDato.c_headercom}">         <small class="mg-lt">Solo admitirá los https!</small>     </div> 4 - Después buscamos c.com_info.tpl [línea 24 y 25]
      <div class="ver_com_info">     <div class="vci_left floatL">
      y la reemplazamos por
      <div class="ver_com_info" style="background-image: url({$tsCom.c_headercom});">     <div class="opacity">     <div class="vci_left floatL">
      luego debajo de la línea 61 agregaremos un 
          </div> 5 -  Por último agregaremos esto a comunidades.css
      .ver_com_info {     padding: 0; } .headercom {      background-position: center center;     background-size: cover;     background-repeat: no-repeat; } .opacity {     padding: 20px 8px;     background-color: rgba(255,255,255,.6); }  
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×