SoporteMyBB - Soporte para foros mybb en español
[MyCode] Fieldset al estilo Intercambiosvirtuales - Versión para impresión

+- SoporteMyBB - Soporte para foros mybb en español (https://soportemybb.es)
+-- Foro: Recursos y tutoriales (https://soportemybb.es/Foro-Recursos-y-tutoriales)
+--- Foro: Recursos y MyCodes (https://soportemybb.es/Foro-Recursos-y-MyCodes)
+--- Tema: [MyCode] Fieldset al estilo Intercambiosvirtuales (/Tema-MyCode-Fieldset-al-estilo-Intercambiosvirtuales)

Páginas: 1 2


Fieldset al estilo Intercambiosvirtuales - Jean Pierre - 30 March 2014

Fieldset al estilo Intercambiosvirtuales

Bueno, como dice el título el día de doy vengo con un mycode simple para sus foros, no es de gran importancia sino es un mycode que nos servirá para agrupar información con un título de encabezado y contenido, idénticamente como se hacen los aportes en Intercambiosvirtuales, en donde se ve la información muy ordenada, simple y elegante, al menos desde mi punto de vista lo es así.

Bueno, les dejo los campos a rellenar:

Título: Fieldset Intercambiosvirtuales

Expresión regular
Código:
\[fieldset=(.*?)\](.*?)\[/fieldset\]

Reemplazar por
Código:
<fieldset style="margin-left: 20px; border: 2px groove threedface;"><legend style="border: solid 1px #ccc; padding: 5px 10px; margin-left: -30px; font-weight: bold; text-transform: uppercase;">$1</legend><div style="text-align: justify;">$2</div></fieldset>

Forma de Uso

Código:
[fieldset=Título de encabezado]
Contenido
[/fieldset]

Vista Previa

[Imagen: 0RRmSVl.png]

Imagen de mi foro en donde aproveché el mycode para poder traer los posts de los episodios liberados cada semana de Naruto Shippuden Gran sonrisa, como ven la apariencia es idéntica, es como ver los mismos posts de intercambiosvirtuales pero desde sus propios foros.

Espero les haya gustado, es demasiado simple, gracias por leer. Sonrisa


RE: Fieldset al estilo Intercambiosvirtuales - DarkEternity - 30 March 2014

gracias por el mycode wow Cao 355 de Naruto Shippuden quede en el 342 o algo asi me toca ponerme a descargar para ponerme al dia


RE: Fieldset al estilo Intercambiosvirtuales - Whiteneo - 30 March 2014

Es bueno tener nuevas ideas Gran sonrisa, la verdad que es muy bueno contar con este tipo de herramientas :D.

Rep+


RE: Fieldset al estilo Intercambiosvirtuales - calamar - 31 March 2014

Gracias @Jean Pierre.

Con tu permiso he modificado el código para que se adapte a mi sistema ...
Llevo tiempo que me atrae las sombras y las esquinas redondas , os dejo si queréis probar ;

Reemplazar por

Código PHP:
<fieldset  style="background: #B7C9D4; border: 2px solid #000; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6); -moz-box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6); box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6); " ><legend style="border: solid 1px #ccc; padding: 5px 10px; margin-center: -30px; font-weight: bold; text-transform: uppercase; background: #B7C9D4; border: 2px solid #000; -moz-border-radius:5px; -webkit-border-radius:5px; -webkit-box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6); -moz-box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6); box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.6);">$1</legend><div  style="text-align: justify;">$2</div></fieldset

Resultado ;

   


RE: Fieldset al estilo Intercambiosvirtuales - joomlero - 29 August 2014

Excelente aporte compañero, solo que es posible que se muestre en el editor? osea en los bbcodes que ya se muestran...


gracias.


RE: Fieldset al estilo Intercambiosvirtuales - Whiteneo - 29 August 2014

Es posible agregándolo manualmente, creo que hay un manual en tutoriales, de no ser así en cuanto pueda lo subo ya que debo buscarlo en el respaldo de mi foro :D

1. Abrir el archivo jscripts/editor.js con Notepad++.

2. Buscar el siguiente código.

Código:
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

Esta sobre la línea 214 o cerca de esa Gran sonrisa.

3. Agrega una nueva línea colocando una coma al final de la de arriba.

Código:
{type: 'button', name: 'fieldset', insert: 'fieldset', image: 'fieldset.png', title: 'Fieldset'}

O sea:
Código:
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors},
{type: 'button', name: 'fieldset', insert: 'fieldset', image: 'fieldset.png', title: 'Fieldset'}


4. Los datos son los siguientes
name debe ser el nombre único e irrepetible de tu botón:
insert es el código que se insertará al presiona el boton
en image va la imagen del botón la cual debes agregar a la ruta jscripts/editor_themes/images.

5. Agregar la imagen a la ruta jscripts/editor_themes/EL EDITOR QUE USAS/images/.


6. Busca por:

Código:
case "video":
                this.insertVideo(extra);
                break;

7. Agrega abajo

Código:
case "fieldset":
                this.insertFiedlset();
                break;

8. Buscar:

Código:
insertVideo: function(type)
    {
        selectedText = this.getSelectedText($(this.textarea));

        if(!selectedText)
        {
            url = prompt(this.options.lang.enter_video_url, "http://");
        }
        else
        {
            url = selectedText;
        }

        if(url)
        {
            this.performInsert("[video="+type+"]"+url+"[/video]", "", true, false);
        }
        this.setDropDownMenuActiveItem($('editor_item_video'), 0);
    },

9. Agregar abajo:

Código:
insertFieldset: function()
    {
        selectedText = this.getSelectedText($(this.textarea));
        title = prompt("Agrega el título del encabezado.", "");

        if(title)
        {
            if(!selectedText)
            {
                text = prompt("Agrega el contenido.", "");
            }
            else
            {
                text = selectedText;
            }

            if(title && text)
            {
                this.performInsert("[fieldset="+title+"]"+text+"[/fieldset]", "", true, false);
            }

        }
    },

Listo, deberá funcionar, cualquier duda puedes comentarla por aquí, saludos...


RE: Fieldset al estilo Intercambiosvirtuales - Jean Pierre - 29 August 2014

Exacto, con lo que te está dejando @Dark Neo tendrás el botón en tu editor funcionando directamente gracias al código de javascript básico que tiene, al usar el prompt se te abrirá un alert en donde tendrás que poner la información que solicita, son 2 datos, el título de encabezado y el cuerpo del mensaje.

Aunque Dark, generalmente un fieldset esto se usa para encerrar grandes contenidos, no creo que en un pequeño campo de texto alguien pueda poner la información de casi todo su post que muchas veces tienen estilo personalizado usando las demás herramientas del editor. El segundo prompt para el contenido sería usado para colocar apenas una palabra y luego ya finalizado esto, editar el contenido por lo que queramos poner realmente. De todas formas es una manera muy dinámica de hacer funcionar este mycode, me gustó mucho tu minitutorial Gran sonrisa


RE: Fieldset al estilo Intercambiosvirtuales - Whiteneo - 29 August 2014

Solo das intro al segundo y colocas el contenido manual, o sinplemente se cambia el script para que solo salga un contenido y lo otro quede como tal, fue solo una idea general que se me ocurrio, pero igualmente se puede colocar al dar clic unicamente que ponga los datos y se coloquen manualmente :D

Lo que pasa es que me emocione un poco, jajaja.


RE: Fieldset al estilo Intercambiosvirtuales - BizarroL - 2 December 2015

(29 August 2014, 00:14 )Dark Neo escribió: Registrate o inicia tu sesión para ver este contenidoEs posible agregándolo manualmente, creo que hay un manual en tutoriales, de no ser así en cuanto pueda lo subo ya que debo buscarlo en el respaldo de mi foro :D

1. Abrir el archivo jscripts/editor.js con Notepad++.

2. Buscar el siguiente código.

Código:
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}

Esta sobre la línea 214 o cerca de esa Gran sonrisa.

3. Agrega una nueva línea colocando una coma al final de la de arriba.

Código:
{type: 'button', name: 'fieldset', insert: 'fieldset', image: 'fieldset.png', title: 'Fieldset'}

O sea:
Código:
{type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors},
{type: 'button', name: 'fieldset', insert: 'fieldset', image: 'fieldset.png', title: 'Fieldset'}


4. Los datos son los siguientes
name debe ser el nombre único e irrepetible de tu botón:
insert es el código que se insertará al presiona el boton  
en image va la imagen del botón la cual debes agregar a la ruta jscripts/editor_themes/images.

5. Agregar la imagen a la ruta jscripts/editor_themes/EL EDITOR QUE USAS/images/.


6. Busca por:

Código:
           case "video":
               this.insertVideo(extra);
               break;

7. Agrega abajo

Código:
           case "fieldset":
               this.insertFiedlset();
               break;

8. Buscar:

Código:
   insertVideo: function(type)
   {
       selectedText = this.getSelectedText($(this.textarea));

       if(!selectedText)
       {
           url = prompt(this.options.lang.enter_video_url, "http://");
       }
       else
       {
           url = selectedText;
       }

       if(url)
       {
           this.performInsert("[video="+type+"]"+url+"[/video]", "", true, false);
       }
       this.setDropDownMenuActiveItem($('editor_item_video'), 0);
   },

9. Agregar abajo:

Código:
   insertFieldset: function()
   {
       selectedText = this.getSelectedText($(this.textarea));
       title = prompt("Agrega el título del encabezado.", "");

       if(title)
       {
           if(!selectedText)
           {
               text = prompt("Agrega el contenido.", "");
           }
           else
           {
               text = selectedText;
           }

           if(title && text)
           {
               this.performInsert("[fieldset="+title+"]"+text+"[/fieldset]", "", true, false);
           }

       }
   },

Listo, deberá funcionar, cualquier duda puedes comentarla por aquí, saludos...

En el 1.8 editor.js no existe cual seria entonces ¿? o es que estoy perdido y no lo encuentro >.<


RE: Fieldset al estilo Intercambiosvirtuales - Whiteneo - 2 December 2015

Eso es para MyBB 1.6 en 1.8 es similar con el tutorial de agregar un botón al editor francamente es muy sencillo agregar nuevos botones complejos y simples, de hecho deje uno apenas en un tema de soporte donde se agrega el nuevo campo y MyCode tel a un foro, de ahí pueden ver que cosa ya que es relativamente fácil agregar nuevas cosas Gran sonrisa

El mensaje que te digo en cuestión sería este:

Registrate o inicia tu sesión para ver este contenido


De ahi ya tendrías la idea de como manejar el código, igualmente si deseas el tutorial lo cuelgo luego en la tienda sirve que serían algunos tutoriales o guias porque ahi no tenemos nada, serán gratuitos vaya, pero bueno ya nos comentas que cosa....