Trasteando con CSS para dejar mas bonito el FitOnPage y a la vez trasteando para conseguir que las imagenes tengan un ancho maximo, consegui añadirle un efecto de despliegue a FitOnPage, y ademas solucionar un fallo del plugin. No se le puede considerar un fallo, pero quizas que no redimensione la imagen hasta que cargue la web es algo malo, ahi va:
Explicacion:
Con este tuto pretendo enseñar como hacer que las imagenes NUNCA sobrepasen el ancho de nuestro foro ni durante la carga, aunque limitara al ancho maximo del mismo foro cuando se despliegue en su tamaño completo, y ademas hacer que cuando se desplieguen, no lo haga de golpe, si no poco a poco, en el tiempo que nosotros queramos.
Codigos:
Lo primero sera añadir este codigo a nuestro global.css, accesible desde /cache/themes/themeXX/, donde XX es el numero de nuestro tema, que generalmente nunca es el 1, va desde el 2 hasta el infinito. O tambien es accesible desde el panel de administracion, Estilos y Plantillas, nuestro tema, Global.css, y en "Editar hoja de estilo: modo avanzado".
Lo que hara es aplicarle un tamaño maximo a las imagenes que se encuentren dentro de un mensaje, gracias a la clase "post_body". Es posible (no soy adivino y solo conozco MyBB desde hace un par de meses) que no todos los temas tengan esta clase, para verlo solo tendremos que usar Inspeccionar Elemento en nuestro mensaje y ver que clase es la que engloba un mensaje, generalmente tendra este aspecto:
Si no tiene "post_body" en la zona donde este codigo lo tiene, solo tendras que copiar el que tu tienes, y reemplazarlo por el codigo que te doy ahora:
Nota 1:
600px es el ancho maximo que podra tener una imagen, desplegada y original. Cambiarlo al gusto. Obviamente, cuando tengamos una imagen redimensionada con FitOnPage, esta se vera como lo configuramos en el plugin, pero al desplegarla NUNCA sobrepasara el ancho del foro, y tampoco hara que esta quede muy grande hasta que cargue la pagina/plugin.
Nota 2:
Esto es receta de la casa, evita que haya texto pegado debajo de la imagen, muy poco estetico, le da un espacio debajo de la imagen de 5px, cambiar al gusto tambien.
Listo, con esta parte tenemos solucionado que la imagen se despliegue suavemente, pero ahora nos queda que tambien lo haga fitonpage.
Para eso, solo tenemos que ir otra vez al Global.css y añadir esto:
Nota 1:
Es el tamaño de la fuente que mostrara la ayuda de FitOnPage, sazonar al gusto.
Nota 2:
Color del texto, sazonar al gusto.
Para terminar, solo tenemos que ir a la configuracion de FitOnPage y en "Info-bar text class" (no se como lo tendreis en español, supongo que "Clase del texto de la barra de info" o algo asi", es la 4 opcion editable) pegar "claseredimension", sin las comillas claro.
Y listo, podreis ver como la imagen de despliega en vez de dar un brusco cambio, y ademas nunca excedera el tamaño que vosotros creais.
Saludos, espero que os sirva, y si teneis alguna duda, aqui estare.
Explicacion:
Con este tuto pretendo enseñar como hacer que las imagenes NUNCA sobrepasen el ancho de nuestro foro ni durante la carga, aunque limitara al ancho maximo del mismo foro cuando se despliegue en su tamaño completo, y ademas hacer que cuando se desplieguen, no lo haga de golpe, si no poco a poco, en el tiempo que nosotros queramos.
Codigos:
Lo primero sera añadir este codigo a nuestro global.css, accesible desde /cache/themes/themeXX/, donde XX es el numero de nuestro tema, que generalmente nunca es el 1, va desde el 2 hasta el infinito. O tambien es accesible desde el panel de administracion, Estilos y Plantillas, nuestro tema, Global.css, y en "Editar hoja de estilo: modo avanzado".
Lo que hara es aplicarle un tamaño maximo a las imagenes que se encuentren dentro de un mensaje, gracias a la clase "post_body". Es posible (no soy adivino y solo conozco MyBB desde hace un par de meses) que no todos los temas tengan esta clase, para verlo solo tendremos que usar Inspeccionar Elemento en nuestro mensaje y ver que clase es la que engloba un mensaje, generalmente tendra este aspecto:
Código:
<div id="pid_138" class="post_body"></div>Si no tiene "post_body" en la zona donde este codigo lo tiene, solo tendras que copiar el que tu tienes, y reemplazarlo por el codigo que te doy ahora:
Código:
.post_body img {
max-width:600px; /* Nota 1 */
margin-bottom: 5px; /* Nota 2 */
-webkit-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
transition:all 0.5s linear;
}Nota 1:
600px es el ancho maximo que podra tener una imagen, desplegada y original. Cambiarlo al gusto. Obviamente, cuando tengamos una imagen redimensionada con FitOnPage, esta se vera como lo configuramos en el plugin, pero al desplegarla NUNCA sobrepasara el ancho del foro, y tampoco hara que esta quede muy grande hasta que cargue la pagina/plugin.
Nota 2:
Esto es receta de la casa, evita que haya texto pegado debajo de la imagen, muy poco estetico, le da un espacio debajo de la imagen de 5px, cambiar al gusto tambien.
Listo, con esta parte tenemos solucionado que la imagen se despliegue suavemente, pero ahora nos queda que tambien lo haga fitonpage.
Para eso, solo tenemos que ir otra vez al Global.css y añadir esto:
Código:
.claseredimension{
font-size: 16px; /* Nota 1 */
-webkit-transition:all 0.5s linear; /* Chrome y Safari */
-o-transition:all 0.5s linear; /* Opera */
-moz-transition:all 0.5s linear; /* Mozilla Firefox */
-ms-transition:all 0.5s linear; /* Internet Explorer */
transition:all 0.5s linear; /* W3C */
color:#FFF; /* Nota 2 */
text-align:center;
}Nota 1:
Es el tamaño de la fuente que mostrara la ayuda de FitOnPage, sazonar al gusto.
Nota 2:
Color del texto, sazonar al gusto.
Para terminar, solo tenemos que ir a la configuracion de FitOnPage y en "Info-bar text class" (no se como lo tendreis en español, supongo que "Clase del texto de la barra de info" o algo asi", es la 4 opcion editable) pegar "claseredimension", sin las comillas claro.
Y listo, podreis ver como la imagen de despliega en vez de dar un brusco cambio, y ademas nunca excedera el tamaño que vosotros creais.
Saludos, espero que os sirva, y si teneis alguna duda, aqui estare.
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)
a mi me ha pasado eso de que la imagen sobrepase el ancho del foro pero nunca le tomé mucha importancia
Lo voy a probar en mi foro , bueno es que compartas .
Sin probarlo te doy mi reputación .
Saludos .
Sin probarlo te doy mi reputación .
Saludos .
(14 May, 2014, 3:44 pm)calamar escribió: Lo voy a probar en mi foro , bueno es que compartas .
Sin probarlo te doy mi reputación .
Saludos .
Muchas gracias, si no te funciona, avisame por aqui o por privado y lo miramos.
¡Saludos!
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)