Página 1 de 2
Como crear un bbcode con imagenes
Publicado: 10 Mar 2012, 01:06
por 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
Re: Como crear un bbcode con imagenes
Publicado: 10 Mar 2012, 02:30
por Alorse
Intenta con algo así:
BBCode:
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.
Re: Como crear un bbcode con imagenes
Publicado: 10 Mar 2012, 21:37
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
Re: Como crear un bbcode con imagenes
Publicado: 10 Mar 2012, 22:07
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:
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>
Re: Como crear un bbcode con imagenes
Publicado: 10 Mar 2012, 22:17
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.
Re: Como crear un bbcode con imagenes
Publicado: 11 Mar 2012, 03:31
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.
Re: Como crear un bbcode con imagenes
Publicado: 13 Mar 2012, 00:07
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>
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
Re: Como crear un bbcode con imagenes
Publicado: 13 Mar 2012, 02:51
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.
Re: Como crear un bbcode con imagenes
Publicado: 13 Mar 2012, 22:39
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
Re: Como crear un bbcode con imagenes
Publicado: 13 Mar 2012, 23:03
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í?
Re: Como crear un bbcode con imagenes
Publicado: 13 Mar 2012, 23:07
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
Re: Como crear un bbcode con imagenes Tema Solucionado
Publicado: 14 Mar 2012, 00:11
por Alorse
Ya comprendo, bueno así ya se como hacerlo, mira...
BBCode:
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:
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.
Re: Como crear un bbcode con imagenes
Publicado: 14 Mar 2012, 00:21
por Makoto
Quede perfecto
Gracias
Re: Como crear un bbcode con imagenes
Publicado: 14 Mar 2012, 00:25
por Alorse
Cuando puedas deja un ejemplo de como quedo, para que los demás se animen con el BBCode.
Re: Como crear un bbcode con imagenes
Publicado: 14 Mar 2012, 00:47
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
