phpBB España Oficial

phpBB España Oficial, Soporte Internacional Oficial del sistema de foros phpBB en Español, extensiones, estilos, traducciones, guías, tutoriales, videos, redes sociales, webmaster.
https://www.phpbb-es.com/foro/

[Pedido]Emoticones en caja o ventana flotante

https://www.phpbb-es.com/foro/viewtopic.php?t=38164

Página 1 de 1

[Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 02:48
por ElSanguinario
hola gente,
quería haceros un Pedido:
que los emoticones/smilies/caritas se muestren en una caja/ventatana flotante al presionar un Botón junto a los bbcodes. u algo parecido. Que aparezca en el postbody del viewtopic, de los MP y del Mchat
Bueno desde ya agradezco vuestra Ayuda... :clap:

Editado cambio del titulo y descripción por algo más apropiado. ;)

Re: [Pedido]Emoticones en PopUp-Box

Publicado: 05 May 2013, 02:54
por leviatan21
ElSanguinario escribió:emoticones/smilies/caritas se muestren en un popUP
Mostrar un pop-up es una característica que ya trae phpbb, cuando desde el ACP se dejan algunos ocultos.

Pero yo te entendí cuando hiciste referencia a ello hace un tiempo atrás en este tema :
Re: Ideas para hacer MODs

así que aquí van las instrucciones de la primera parte :
ElSanguinario escribió:Que aparezca en el postbody del viewtopic, de los MP
Prosilver

Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/theme/stylesheet.css
Agregar, al final del archivo

Código: Seleccionar todo

#ventana-flotante :after { content: ""; display: inline-block; left: 10px; position: absolute; top: -6px; }
#ventana-flotante  { width: 18%; height: auto; top: -1000px; left: 100%; z-index:999; background-clip: padding-box; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin: 1px 0 0 -10px; min-width: 160px; padding: 0; z-index: 1000; display: inline-block; }
.section-ucp #ventana-flotante  { width: 250px; }
#ventana-flotante .cerrar { float: right; border-bottom: 1px solid #bbb; border-left: 1px solid #bbb; color: #999; background: white; line-height: 17px; text-decoration: none; padding: 0px 14px; font-family: Arial; border-radius: 0 5px 0 5px; box-shadow: -1px 1px white; font-size: 18px; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; }
#ventana-flotante .cerrar:hover { background: #ff6868; color: white; text-decoration: none; text-shadow: -1px -1px red; border-bottom: 1px solid red; border-left: 1px solid red; }
#ventana-flotante .contenido { padding: 5px; margin: 5px; border-radius: 4px; overflow-y: auto; max-height: 136px; }
#ventana-flotante .contenido  img { padding: 2px 2px 0 0; }
.oculto { z-index: -1;    display: none;        position: fixed;    opacity: 0; -ms-opacity: 0; -moz-opacity: 0; }
.visible{ z-index: 1000; display: inline-block; position: absolute; opacity: 1; -ms-opacity: 1; -moz-opacity: 1; }
Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/template/posting_editor.html
Buscar:

Código: Seleccionar todo

			<strong>{L_SMILIES}</strong><br />
Reemplazar, por:

Código: Seleccionar todo

			<a id="phpbbsmilies" href="#" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;"><strong>{L_SMILIES}</strong></a>
			<div id='ventana-flotante' class="oculto">
				<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
				<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
				<div class="contenido bg3">
Buscar:

Código: Seleccionar todo

		<!-- IF BBCODE_STATUS -->
Antes, agregar:

Código: Seleccionar todo

			</div>
		</div>
Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/template/posting_buttons.html
Buscar:

Código: Seleccionar todo

		<!-- END custom_tags -->
	}
Debajo, agregar:

Código: Seleccionar todo


<!-- IF S_SMILIES_ALLOWED -->
	function changeClass(paren, elem, className1, className2)
	{
		paren = (paren) ? paren : 'phpbbsmilies'
		p = document.getElementById(paren);
		e = document.getElementById(elem);
		if (e.className == className1) {
			e.style.top = '-1000px';
			e.style.left = '100%';
			e.className = className2;
		} else {
			var Top = p.offsetTop;
			var Left = p.offsetLeft;
			e.style.top = Top+'px';
			e.style.left = Left+'px';
			e.className = className1;
		}
	}
<!-- ENDIF -->

SubSilver2

Abrir:

Código: Seleccionar todo

raiz/styles/subsilver/theme/stylesheet.css
Agregar, al final del archivo

Código: Seleccionar todo

#ventana-flotante :after { content: ""; display: inline-block; left: 10px; position: absolute; top: -6px; }
#ventana-flotante  { width: auto; height: auto; top: -1000px; left: -1000px; z-index:999; background-clip: padding-box; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); margin: 1px 0 0 -10px; min-width: 160px; padding: 0; width: 18%; z-index: 1000; display: inline-block; }
.section-ucp #ventana-flotante  { width: 250px; }
#ventana-flotante .cerrar { float: right; border-bottom: 1px solid #bbb; border-left: 1px solid #bbb; color: #999; background: white; line-height: 17px; text-decoration: none; padding: 0px 14px; font-family: Arial; border-radius: 0 5px 0 5px; box-shadow: -1px 1px white; font-size: 18px; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; }
#ventana-flotante .cerrar:hover { background: #ff6868; color: white; text-decoration: none; text-shadow: -1px -1px red; border-bottom: 1px solid red; border-left: 1px solid red; }
#ventana-flotante .contenido { padding: 5px; margin: 5px; border-radius: 4px; overflow-y: auto; max-height: 136px; }
#ventana-flotante .contenido  img { padding: 2px 2px 0 0; }
.oculto {display: none;          position: fixed;   opacity: 0; -ms-opacity: 0; -moz-opacity: 0; }
.visible{display: inline-block; position: absolute; opacity: 1; -ms-opacity: 1; -moz-opacity: 1; }
Abrir:

Código: Seleccionar todo

raiz/styles/subsilver/template/posting_body.html
Buscar:

Código: Seleccionar todo

	<!-- IF S_SMILIES_ALLOWED -->
Debajo, agregar:

Código: Seleccionar todo

		<a id="phpbbsmilies" href="#" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;" style="position: relative; top:0;"><strong>{L_SMILIES}</strong></a>
		<div id='ventana-flotante' class="oculto">
			<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
			<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
			<div class="contenido bg3">
Buscar y eliminar:

Código: Seleccionar todo

		<tr>
			<td class="gensmall" align="center"><b>{L_SMILIES}</b></td>
		</tr>
Buscar:

Código: Seleccionar todo

		</table>
Debajo, agregar:

Código: Seleccionar todo

				</div>
		</div>
Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/template/posting_buttons.html
Buscar:

Código: Seleccionar todo

			<!-- END custom_tags -->
		}
Debajo, agregar:

Código: Seleccionar todo

	<!-- IF S_SMILIES_ALLOWED -->
		function changeClass(paren, elem, className1, className2)
		{
			paren = (paren) ? paren : 'phpbbsmilies'
			p = document.getElementById(paren);
			e = document.getElementById(elem);
			if (e.className == className1) {
				e.style.top = '-1000px';
				e.style.left = '-1000px';
				e.className = className2;
			} else {
				var Top = p.offsetTop;
				var Left = p.offsetLeft;
				e.style.top = Top+'px';
				e.style.left = (Left+10)+'px';
				e.className = className1;
			}
		}
	<!-- ENDIF -->
Guardar los cambios, subir los archivos al servidor y desde el ACP -> ESTILOS actualizar las plantillas y temas de cada estilo

Re: [Pedido]Emoticones en PopUp-Box

Publicado: 05 May 2013, 03:03
por ElSanguinario
si bueno como cito y muestro en esté mensaje. http://www.phpbb-es.com/foro/debates-ph ... ml#p217263 -- no se como describirlo creo que la mejor descripción seria caja flotante verdad?

Re: [Pedido]Emoticones en PopUp-Box

Publicado: 05 May 2013, 03:06
por leviatan21
ElSanguinario escribió:seria caja flotante verdad?
si sería mejor descripción :P

Re: [Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 03:35
por ElSanguinario
me queda en blanco máster no entra al posting editor. :nolose:

Re: [Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 03:46
por leviatan21
Porque hiciste mal el primer paso, y creo que es porque tenias el add-on de los smilies en un div y al hacer estas ediciones lo rompiste.

aquí la solución en tu estilo:
Buscar:

Código: Seleccionar todo

	<div id="smiley-box">
    <div style="overflow:auto; height:300px; width:200px; background-color:#FFF">
    <table cellpadding="0"  border="1" bordercolor="#777" cellspacing="0" style="width:175px;">
        <tr>
            <td>
        <!-- IF S_SMILIES_ALLOWED and .smiley -->
    		<a id="phpbbsmilies" href="#" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;"><strong>{L_SMILIES}</strong></a>
			<div id='ventana-flotante' class="oculto">
				<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
				<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
				<div class="contenido bg3">
         <!-- BEGIN smiley -->
            <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
         <!-- END smiley -->

			</div>
		</div>
		<!-- IF BBCODE_STATUS -->
		<!-- IF .smiley --><hr /><!-- ENDIF -->
		{BBCODE_STATUS}<br />
		<!-- IF S_BBCODE_ALLOWED -->
			{IMG_STATUS}<br />
			{FLASH_STATUS}<br />
			{URL_STATUS}<br />
		<!-- ENDIF -->
		{SMILIES_STATUS}
		<!-- ENDIF -->
		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
			<!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
			<!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
		<!-- ENDIF -->
	</div>
Reemplazar por:

Código: Seleccionar todo

	<div id="smiley-box">
		<!-- IF S_SMILIES_ALLOWED and .smiley -->
			<a id="phpbbsmilies" href="#" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;"><strong>{L_SMILIES}</strong></a>
			<div id='ventana-flotante' class="oculto">
				<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
				<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
				<div class="contenido bg3">
			<!-- BEGIN smiley -->
				<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
			<!-- END smiley -->
		<!-- ENDIF -->
		<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
			<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
		<!-- ENDIF -->
			</div>
		</div>
		<!-- IF BBCODE_STATUS -->
		<!-- IF .smiley --><hr /><!-- ENDIF -->
		{BBCODE_STATUS}<br />
		<!-- IF S_BBCODE_ALLOWED -->
			{IMG_STATUS}<br />
			{FLASH_STATUS}<br />
			{URL_STATUS}<br />
		<!-- ENDIF -->
		{SMILIES_STATUS}
		<!-- ENDIF -->
		<!-- IF S_EDIT_DRAFT || S_DISPLAY_REVIEW -->
			<!-- IF S_DISPLAY_REVIEW --><hr /><!-- ENDIF -->
			<!-- IF S_EDIT_DRAFT --><strong><a href="{S_UCP_ACTION}">{L_BACK_TO_DRAFTS}</a></strong><!-- ENDIF -->
			<!-- IF S_DISPLAY_REVIEW --><strong><a href="#review">{L_TOPIC_REVIEW}</a></strong><!-- ENDIF -->
		<!-- ENDIF -->
	</div>
Debes tener mas cuidado 8-)

Re: [Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 04:15
por ElSanguinario
ahora si funciona perfecto. Fue un error mio intente sacar los cambio del smilies box pero se me paso por alto el div de arriva xD

veré si puedo crear un class con un emoticono amarillo luego moverlo junto al las solapas de tamaño de texto y fuente. bien cuando termine os posteo Gracias Máster ;)
duda: que tendría que cambiar para que salga para arriba del botón y no para abajo?

Re: [Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 05:37
por leviatan21
ElSanguinario escribió:duda: que tendría que cambiar para que salga para arriba del botón y no para abajo?
Abrir.

Código: Seleccionar todo

raiz/styles/prosilver/template/posting_buttons.html
Buscar:

Código: Seleccionar todo

			var Top = p.offsetTop;
Reemplazar por:

Código: Seleccionar todo

			var Top = p.offsetTop - e.offsetHeight;

Re: [Pedido]Emoticones en caja o ventana flotante

Publicado: 05 May 2013, 18:56
por leviatan21
ElSanguinario escribió:Que aparezca en el postbody del viewtopic, de los MP y del Mchat
Aquí están las instrucciones para implementar este add-on en el mChat !

Prosilver

Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/template/mchat_body.html
Buscar:

Código: Seleccionar todo

			<!-- IF not (MCHAT_ARCHIVE_MODE or MCHAT_CUSTOM_PAGE) and MCHAT_WHOIS and S_MCHAT_INDEX_STATS --><
Antes, agregar:

Código: Seleccionar todo

			<!-- IF MCHAT_ALLOW_SMILES --><a href="#" id="phpbbsmilies" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;" style="float:right;padding-right:5px;"><strong>{L_SMILIES}</strong></a><!-- ENDIF -->
Buscar y eliminar:

Código: Seleccionar todo

				<!-- IF MCHAT_ALLOW_SMILES and .smiley -->
				<input type="button" class="button2" onclick="mChat.toggle('Smiles');" value="{L_MCHAT_SMILES}" />
				<!-- ENDIF -->
Buscar:

Código: Seleccionar todo

				<div id="mChatSmiles" style="padding: 5px; display: none;">
reemplazar, por:

Código: Seleccionar todo

				<div id='ventana-flotante' class="oculto">
				<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
				<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
				<div class="contenido bg3">
Buscar:

Código: Seleccionar todo

					<a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>					
				</div>
reemplazar, por:

Código: Seleccionar todo

					<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>					
				</div></div>
Abrir:

Código: Seleccionar todo

raiz/styles/prosilver/template/mchat_bbcodes.html
Buscar:

Código: Seleccionar todo

							<!-- END custom_tags -->
						}
Debajo, agregar:

Código: Seleccionar todo


						<!-- IF MCHAT_ALLOW_SMILES -->
						function changeClass(paren, elem, className1,className2)
						{
							paren = (paren) ? paren : 'phpbbsmilies'
							p = document.getElementById(paren);
							e = document.getElementById(elem);
							if (e.className == className1) {
								e.style.top = '-1000px';
								e.style.left = '100%';
								e.className = className2;
							} else {
								var Top = p.offsetTop;
								var Left = p.offsetLeft - e.offsetWidth;
								e.style.top = Top+'px';
								e.style.left = Left+'px';
								e.className = className1;
							}
						}
						<!-- ENDIF -->
subsilver2

Abrir:

Código: Seleccionar todo

raiz/styles/subsilver2/template/mchat_body.html
Buscar:

Código: Seleccionar todo

			<!-- IF not (MCHAT_ARCHIVE_MODE or MCHAT_CUSTOM_PAGE) and MCHAT_WHOIS and S_MCHAT_INDEX_STATS --><
Antes, agregar:

Código: Seleccionar todo

			<!-- IF MCHAT_ALLOW_SMILES --><a href="#" id="phpbbsmilies" onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;" style="float: right; padding-right: 5px; position: relative; top:0;"><strong>{L_SMILIES}</strong></a><!-- ENDIF -->
Buscar y eliminar:

Código: Seleccionar todo

					<!-- IF MCHAT_ALLOW_SMILES and .smiley -->
					<input type="button" class="btnlite" onclick="mChat.toggle('Smiles');" value="{L_MCHAT_SMILES}" />
					<!-- ENDIF -->
Buscar:

Código: Seleccionar todo

				<div id="mChatSmiles" style="padding: 5px; display: none;">
reemplazar, por:

Código: Seleccionar todo

					<div id='ventana-flotante' class="oculto">
					<a class='cerrar' href='#' onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">x</a>
					<strong class="contenido"  onclick="changeClass('phpbbsmilies', 'ventana-flotante', 'visible', 'oculto'); return false;">{L_SMILIES}</strong>
					<div class="contenido bg3">
Buscar:

Código: Seleccionar todo

					<a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>					
				</div>
reemplazar, por:

Código: Seleccionar todo

						<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
					</div></div>
Abrir:

Código: Seleccionar todo

raiz/styles/subsilver2/template/mchat_bbcodes.html
Buscar:

Código: Seleccionar todo

							<!-- END custom_tags -->
						}
Debajo, agregar:

Código: Seleccionar todo


						<!-- IF MCHAT_ALLOW_SMILES -->
						function changeClass(paren, elem, className1, className2)
						{
							paren = (paren) ? paren : 'phpbbsmilies'
							p = document.getElementById(paren);
							e = document.getElementById(elem);
							if (e.className == className1) {
								e.style.top = '-1000px';
								e.style.left = '-1000px';
								e.className = className2;
							} else {
								var Top = p.offsetTop ;
								var Left = p.offsetLeft - e.offsetWidth;
								e.style.top = Top+'px';
								e.style.left = (Left+10)+'px';
								e.className = className1;
							}
						}
						<!-- ENDIF -->
Guardar los cambios, subir los archivos al servidor y desde el ACP -> ESTILOS actualizar las plantillas y temas de cada estilo

Re: [Pedido]Emoticones en caja o ventana flotante  Tema Solucionado

Publicado: 06 May 2013, 04:07
por ElSanguinario
probado y Funciona perfecto

Gracias Máster... :wink:
Todos los horarios son UTC+02:00
Página 1 de 1

Desarrollado por phpBB® Forum Software © phpBB Limited

Traducción al español por phpBB España