Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Como crear un bbcode con imagenesTema Solucionado

Dudas sobre BBCodes personalizados


Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Como crear un bbcode con imagenes

#1

Mensaje por Makoto »

Bueno como se puede crear un bbcode similar a esto

Imagen

Código: Seleccionar todo

[iloveidol=idol01] Peter Pan Pero no me gustaria no ver a mi familia (>_<)[/iloveidol]
Imagen

algo como

Código: Seleccionar todo

[iloveidol=idol02] Peter Pan! creo que yo quiero ser wendy (lol)[/iloveidol]
entiendo que es con css pero no se cuales u_u


URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#2

Mensaje por Alorse »

Intenta con algo así:
BBCode:

Código: Seleccionar todo

[ilibg]{TEXT}[/ilibg]
Reemplazo HTML:

Código: Seleccionar todo

<div style="background: url('paranuevopoketchisa.png') no-repeat; width: 180px; height: 175px; padding: 55px 0 0 140px; font-size: 1.8em;">{TEXT}</div>
Y debes jugar con el padding para la posición del texto.
El resto de las cosas creo que las entiendes.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#3

Mensaje por Makoto »

esta bien pero creo no me explique bien u_u (no lo hice u_u)

Hasta aqui todo bien, pero yo quisiera usar diferentes imagenes de chicas pero un mismo globo para todas
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#4

Mensaje por Alorse »

Makoto escribió:esta bien pero creo no me explique bien u_u (no lo hice u_u)

Hasta aqui todo bien, pero yo quisiera usar diferentes imagenes de chicas pero un mismo globo para todas
Y el globo siempre esta en la misma posición?
De ser así entonces el BBCode quedaría:

BBCode:

Código: Seleccionar todo

[ilibg={URL}]{TEXT}[/ilibg]
Reemplazo HTML:

Código: Seleccionar todo

<div style="background: url('{URL}') no-repeat; width: 180px; height: 175px; padding: 55px 0 0 140px; font-size: 1.8em;">{TEXT}</div>


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#5

Mensaje por Makoto »

estaba pensando algo asi

Código: Seleccionar todo

<div><div style="background: url('{URL1}') no-repeat; width: 180px; height: 175px;" >< div style="background: url('{URL2}') no-repeat; width: 180px; height: 175px;" padding: 55px 0 0 140px; font-size: 1.8em;">{TEXT}</div></div>
quiero poner la imagen separada del globo, imagenes independientes, este bbcode resultaria?
aunque estaba pensado tambien poner el globo ya no como imagen sino con css algo como el quote de absolution

lo que me interesa es saber como dividir en dos un bloque en un lado la imagen de la chica, al otro lado ya sea imagen del globo o un globo con css.
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#6

Mensaje por Alorse »

mmm bueno te puedo ayudar pero pasame 2 imágenes de muestra, la de la chica y la del globo (Y porque no quieres una sola imagen? acaso no es igual?).
Hay que hacer un div contenedor y y otro div globo, lo que dices del globo cambiarlo por algo así como lo que muestras la verdad es que tendría que tener el CSS de ese quote para poder hacerlo y seria mucho mejor ya que se adaptaría automáticamente al tamaño de texto.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#7

Mensaje por Makoto »

Bueno aqui esta el css y html del globo

Código: Seleccionar todo

.bbcodeidol{
	background: #ebebeb none 6px 8px no-repeat;
	border: 1px solid #dbdbdb;
	font-size: 0.95em;
	margin: 0.5em 1px 0 9px;
	overflow: hidden;
	padding: 5px;
	background-color: #eff8ff;
	background-image: url("{T_THEME_PATH}/images/quote_icon.png");
	border-color:#77a8ce;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.bbcodeidol cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}
.bubble {
	width: 9px; height: 13px;
	background-image: url("{T_THEME_PATH}/images/quote-left.png");
	background-repeat: no-repeat;
	margin-left: 1px;
	margin-top: 13px;
	position: absolute;
}

Código: Seleccionar todo

<div class="bubble"></div>
	<div class="bbcodeidol">
	<cite>Idol repondió:</cite>
	Hola
	<br />Hola
	</div>
imagenes.rar
(17.74 KiB) Descargado 76 veces
:chulo: Nesecitas algo más?

Puedes ver que el globo no se adapta al texto u_u
http://iloveidol.com/foro/ al final del index esta puesto el codigo
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#8

Mensaje por Alorse »

Esa imagen de el o la idol esta muy pequeña que quieres que haga con ella? creí que era como la que habías dejando antes, grande y con un espacio para el globo.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#9

Mensaje por Makoto »

Alorse escribió:Hay que hacer un div contenedor y y otro div globo, lo que dices del globo cambiarlo por algo así como lo que muestras la verdad es que tendría que tener el CSS de ese quote para poder hacerlo y seria mucho mejor ya que se adaptaría automáticamente al tamaño de texto.
esto, un div contenedor donde esten los dos bloques o div-s donde uno contenga la imagen de la chica y otro del globo en css :ok:
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#10

Mensaje por Alorse »

Si, pero crei que la imagen de la chicha iba a ser mucho más grande, mejor dicho, que esa imagen serviría como contenedor para el "globo", lo que pasa es que no me hago a una idea de lo que quieres, pero según como me lo imagino ahora, seria como la imagen de la chica y al lado derecho por fuera de dicha imagen en globo con el comentario.
Es así?


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#11

Mensaje por Makoto »

asi es

algo asi
http://www.iloveidol.com/foro/viewtopic ... 8&t=70#p96 u_u pero no me salio como queria ya que la imagen del quote esta definida con margin u_u me enredo u-u
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes  Tema Solucionado

#12

Mensaje por Alorse »

Ya comprendo, bueno así ya se como hacerlo, mira...
BBCode:

Código: Seleccionar todo

[ilibg={URL},{SIMPLETEXT}]{TEXT}[/ilibg]
Reemplazo HTML:

Código: Seleccionar todo

<style type="text/css">
.bbcodeidol{
	background: url("images/quote_icon.png")  #eff8ff 6px 8px no-repeat;
	border: 1px solid #dbdbdb;
	width: auto;
	float: left;
	font-size: 0.95em;
	margin: 2px 0 0 -1px;
	padding: 5px;
	border-color:#77a8ce;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.bbcodeidol cite {
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}
.bubble {
	width: 9px; height: 13px;
	background-image: url("images/quote-left.png");
	background-repeat: no-repeat;
	margin-left: 1px;
	margin-top: 13px;
	position: relative;
	float: left;
}
</style>
<img src="{URL}" title="" style="float: left;" />
<div class="bubble"></div>
	<div class="bbcodeidol">
	<cite>{SIMPLETEXT} repondió:</cite>
	{TEXT}
</div>
Linea de ayuda:

Código: Seleccionar todo

[ilibg=ruta_imagen,nombre_idol]texto[/ilibg]
Luego de eso debes subir las imágenes quote_icon.png y quote-left.png a la carpeta images/, con eso creo que quedará listo.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#13

Mensaje por Makoto »

Quede perfecto :cerveza: Gracias
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Alorse
Ex Staff
Mensajes: 5144
Registrado: 22 Mar 2008, 02:14
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#14

Mensaje por Alorse »

Cuando puedas deja un ejemplo de como quedo, para que los demás se animen con el BBCode.


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje
Avatar de Usuario
Makoto
Elite
Mensajes: 2929
Registrado: 10 Sep 2009, 23:44
Género:
Edad: 32

Re: Como crear un bbcode con imagenes

#15

Mensaje por Makoto »

Bueno lo probe individualmente y normal pero si pongo varios se surge este error

http://www.iloveidol.com/foro/viewtopic.php?f=29&t=71 Demo


/////////

Error corregido
al final del reemplazo html del codigo proporcionado por Alorse coloque

Código: Seleccionar todo

<br style="clear: both" />
URL del foro: FIIS-UNAC
Versión phpBB: phpBB3 ( 3.1.5)
Extensiones Instaladas
SPOILER_SHOW
  • Add User 1.0.2
  • Auto Database Backup 1.1.0
  • Auto Groups 1.0.0
  • Avatars on Memberlist 1.0.3
  • Board Announcements 1.0.2
  • Board Rules 1.0.1
  • cBB Chat 1.1.1
  • Fancy Lazy Topics loader 2.1.5
  • Genders 1.0.0
  • Last Post Avatar
  • Log failed logins
  • Rank Post Styling
  • Share On 1.0.0
  • SiteSplat BBCore 2.1.1
  • Sortables Captcha 2.0.0
  • Topic Author 1.0.1
  • Upload Extensions 3.1.2-beta2
Plantilla(s) usada(s):
  • FLATBOOTS 2.0.1
Servidor: Dattatec[/size]


Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Volver a “❓ Dudas sobre BBCode”