Como crear un bbcode con imagenesTema Solucionado

[Makoto]

Bueno como se puede crear un bbcode similar a esto

Código: Seleccionar todo

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

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

[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.

[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

[Alorse]

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>

[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.

[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.

[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 184 veces

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

[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.

[Makoto]

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

[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í?

[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

[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.

[Makoto]

Quede perfecto Gracias

[Alorse]

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

[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" />