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.

Cambiar (Agregar) fondo al foro usando el Estilo Flat StyleTema Solucionado

Dudas sobre estilos phpBB 3.3
💡 Como instalar un estilo
Cerrado
Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#1

Mensaje por jorup16 »

Hola, con otra consulta rápida... ¿hay forma de poder cambiar el fondo al estilo flatsyle?

Imagen

Mi idea es llenar hacer un fondo que tenga un vacío en el centro y jugar con ese espacio en blanco. ¿se puede hacer algo así?

Gracias.



URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#2

Mensaje por AbaddonOrmuz »

Lo puedes hacer modificando los archivos CSS, añadiendo background-image, aunque recomendaría sólo mostrarla cuando el usuario navega desde una PC, porque en móviles no se vería bien, las dimensiones serían distintas.

Por ejemplo:

Código: Seleccionar todo

@media only screen and (min-width: 1220px) {
	.wrap {
		background-image: url('./images/fondo.jpg');
		background-repeat: no-repeat;
	}
}

El espacio en la imagen debería ser de 1152px o 1182px (1152 + [15px * 2]) tomando en cuenta el padding, según el selector .wrap del estilo.

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#3

Mensaje por jorup16 »

¿Entonces debo de modificar cada uno de estos archivos?

Imagen

¿El código que me has puesto lo debo de agregar al final de algún archivo en específico o en todos o debe de reemplazarse alguna línea?

Perdón por tanta molestia. :shock:

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#4

Mensaje por AbaddonOrmuz »

jorup16 escribió:
23 Abr 2020, 03:10

¿Entonces debo de modificar cada uno de estos archivos?

No, sólo lo necesitas incluir en uno solo.

jorup16 escribió:
23 Abr 2020, 03:10

¿El código que me has puesto lo debo de agregar al final de algún archivo en específico o en todos o debe de reemplazarse alguna línea?

Podría ser, por ejemplo, al final del archivo responsive.css y recomendaría añadir notas, en caso de que los quieras eliminar posteriormente.

Código: Seleccionar todo

/* Imagen de fondo */
@media only screen and (min-width: 1220px) {
	.wrap {
		background-image: url('./images/fondo.jpg');
		background-repeat: no-repeat;
	}
}

Además, recuerda que la URL de background-image es relativa al archivo CSS en cuestión, y los archivos CSS del estilo se encuentran en styles/flat-style/theme/ por lo que la imagen fondo.jpg que pongo de ejemplo, debería estar dentro de styles/flat-style/theme/images/

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#5

Mensaje por jorup16 »

Ya lo hice y me funcionó (en parte), no sé si hice algo mal o a lo mejor todavía falta algo más.

Así se ve el foro ahorita:
Imagen

Como te puedes dar cuenta justo detrás de la parte de los temas sale el fondo que puse (ya había puesto otro antes), puse un fondo super grande para poder ver como iba irse viendo el foro pero me doy cuenta que la imagen de dicho fondo nuca sobresale a la parte blanca de los costados.

Mi idea es hacer un fondo completamente blanco al centro y a los lados colocar el diseño correspondiente a la temática de mi foro, algo así.
Imagen

Pero no sé que medidas son correctas para hacer eso en esta plantilla.

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style  Tema Solucionado

#6

Mensaje por AbaddonOrmuz »

jorup16 escribió:
23 Abr 2020, 06:53

Ya lo hice y me funcionó (en parte), no sé si hice algo mal o a lo mejor todavía falta algo más.

Es incorrecto lo que puse anteriormente, falta de sueño |-) Puedes eliminar lo anterior.

Este ejemplo es específicamente para la segunda imagen de fondo que publicas. Eso te dará una idea.

Agregar al final de responsive.css lo siguiente:

Código: Seleccionar todo

/* Imagen de fondo */
@media only screen and (min-width: 1220px) {
	html, body {
		background-image: url('https://altar7.com/wp-content/uploads/2019/07/bg.jpg');
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-color: #060814;
	}
}

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#7

Mensaje por jorup16 »

¡Sos un genio! La verdad es que así es... no voy a cerrar el tema todavía porque quiero venir y mostrar como queda (y de repente tengo otra duda más) pero por el momento todo genial!!! :clap: :clap:

¡Crack! :clap: :clap:

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#8

Mensaje por jorup16 »

Lo prometido es deuda, he vuelto para mostrar como quedó final el resultado del foro con su fondo. Me tardé unos días porque el amigo que me hacía el diseño estaba un poco ocupado... pero aquí está.

Usando esta respuesta de @AbaddonOrmuz pude hacer lo que necesitaba.

Pero como me di cuenta que el foro en algunas secciones es demasiado largo de nada me servía seguir alargando la imagen, entonces me acordé de los sitios que tienen su fondo estático y me puse manos a la obra en hacer lo mismo, así que únicamente hay que agregar algunas líneas al código, quedando de la siguiente manera:

Código: Seleccionar todo

/* Imagen de fondo */
@media only screen and (min-width: 1220px) {
	html, body {
		background-image: url('https://i.imgur.com/wCYmnux.jpg');
		background-attachment: fixed;
		overflow: scroll;
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-color: #060814;
	}
}

Como se pueden dar cuenta lo único que hice fue agregar esto:

Código: Seleccionar todo

background-attachment: fixed;
overflow: scroll;

Así se mira en funcionamiento:
https://www.screencast.com/t/1m12ZduNfa

Y quiero decirles que he probado esta pequeña modificación en Google Chrome, Mozilla Firefox, Microsoft Edge, Opera y en cada uno de ellos se ve muy bien.

Voy a dejar el tema abierto para ver si el amigo Alfredo tiene alguna sugerencia o algo que deba de modificar todavía, ya después de eso lo daré por terminado.

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#9

Mensaje por AbaddonOrmuz »

Buen trabajo @jorup16

Solo unas notas :P

  • overflow: scroll; no parece ser necesario, de hecho al navegar al final de la página muestra unos bordes del scroll (Firefox, GTK, GNU/Linux)
  • Intenta comprimir la imagen lo más que puedas, hay programas que comprimen sin pérdida (lossless compression)
  • Sería recomendado cargar la imagen de fondo desde tu sitio, disminuye un poco el tiempo de carga al evitar descargar un archivo de un sitio externo

Imagen

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#10

Mensaje por jorup16 »

Muy bien, ya hice los cambios:

  1. Quité

    Código: Seleccionar todo

    overflow: scroll;
    aunque yo creo que se sigue viendo lo que dices. :?

Imagen

  1. Ya he comprimido la imagen, no sé si usando el método que me dijiste pero de igual forma es algo que lo puedo corregir más adelante.

  2. De hecho se me había olvidado cambiar eso, ya lo tenía en mente pero gracias por recordarlo.

Con el punto número uno me he quedado con cierta duda con esa parte que me dijiste, no me había puesto a ver el final del foro como se ve esa pequeña parte encimada. :cry:

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#11

Mensaje por AbaddonOrmuz »

jorup16 escribió:
29 Abr 2020, 09:13

no me había puesto a ver el final del foro como se ve esa pequeña parte encimada

Aparece porque la parte en blanco de la imagen es más angosta que el ancho del foro, igual no tiene mucha importancia.

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#12

Mensaje por jorup16 »

Pues ya he cambiado todo lo que me has sugerido, ¿entonces crees que ahí está bien todo? :o

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
AbaddonOrmuz
Moderador
Mensajes: 905
Registrado: 14 Ene 2017, 22:18
Nombre real: Alfredo
Ubicación: /dev/null
Género:
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#13

Mensaje por AbaddonOrmuz »

Pues es más si te ha gustado como quedo, yo al menos no tengo nada más que aportar :P

Algunas de mis extensiones:
Imagen Imgur | :chart_with_upwards_trend: SEO Metadata | Imagen Markdown | :lock: Auto-lock Topics | :mermaid: Mermaid Diagrams
:trophy: Checa todas mi extensiones aprobadas :trophy:

:penguin: Usuario de Arch Linux :penguin:



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Avatar de Usuario
jorup16
Avanzado/a
Mensajes: 475
Registrado: 21 Abr 2007, 03:10
Nombre real: Jorge
Ubicación: Zacapa, Guatemala
Género:
Edad: 33
Contactar:

Cambiar (Agregar) fondo al foro usando el Estilo Flat Style

#14

Mensaje por jorup16 »

Pues bueno, espero a muchos más les sirva este tema. Muchas gracias por tu ayuda @AbaddonOrmuz . Saludos desde Guatemala. :clap:

URL: http://www.fifa-xgamers.com
Versión phpBB: phpBB 3.3.0
EXts Instaladas:

Spoiler

Topics Hierarchy - 2.0.0
User Merge - 1.0.4
[**] Extensions .yml check - 2.1.0-RC8
Imgur - 1.5.1
phpBB Studio - Discord Oauth2 light - 1.0.3
External Links Open in New Window - 1.0.6
Change Post Time - 1.0.1
Default Avatar Extended - 1.2.2
mChat - 2.1.3
Header Banner - 3.2.2
cBB Editor - 1.0.0
cBB Follower - 2.0.0
External Link In New Window - 1.1.0
Lightbox - 2.0.2
NavBar Search - 3.2.4
Password Strength - 1.2.3
Scroll Page - 1.0.3
Tapatalk Plugin for phpBB 3.1/3.2/3.3 - 2.1.7
Userreminder for phpbb - 1.0.0

Plantilla(s) usada(s): Flat Style - 1.1.0
Servidor: Linux (Namecheap.com) de pago
Actualización desde otra versión: 3.2.x a 3.3.x
Conversión desde otro sistema de foros: Ninguna



Enlace:
BBCode:
HTML:

Ocultar enlaces al mensaje
Mostrar enlaces al mensaje

Cerrado
  • Temas similares
    Respuestas
    Vistas
    Último mensaje

Volver a “Soporte Estilos phpBB 3.3”