Modificar margen y fondo plantilla Protostar

Cuestiones relacionadas con las plantillas y el diseño en general (CSS, html...). Todas las versiones de Joomla.

Moderators: carcam, AlexVega, hefesto

Post Reply
leoponti
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Mon Apr 06, 2020 1:20 pm

Modificar margen y fondo plantilla Protostar

Post by leoponti » Mon May 11, 2020 3:00 am

Hola a todos!
Espero estén muy bien!
Tengo en mi sitio web, el template protostar al cual al ponerlo como diseño estático, me aparecen los margenes como muestro en la imagen adjunta.
Ahora, tengo unas preguntas para realizar.
1) Como puedo modificar el tamaño de margenes de derecha/izquierda/superior/inferior para reducirlos?.
2) Puedo poner una imagen de fondo en lugar de un color estático?.

Muchas gracias y saludos!
You do not have the required permissions to view the files attached to this post.
Last edited by AlexVega on Mon May 11, 2020 6:35 pm, edited 1 time in total.
Reason: Mod. Note: Ajuste de Título más específico.

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2533
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: Modificar template protostar segunda parte :)

Post by AlexVega » Mon May 11, 2020 6:31 pm

Que tal,

leoponti wrote:
Mon May 11, 2020 3:00 am
1) Como puedo modificar el tamaño de margenes de derecha/izquierda/superior/inferior para reducirlos?.
La parte central es el contenedor, es el que tienes que aumentar en tamaño para reducir los márgenes izquierda y derecha.

- En tu hoja de estilos personalizada cambia el valor width para la clase .container
- Para el márgen superior/inferior del contenedor, la clase es body.site, cambia el padding a 0.

leoponti wrote:
Mon May 11, 2020 3:00 am
2) Puedo poner una imagen de fondo en lugar de un color estático?.
Si, es posible. Si agregas tu imágen a la carpeta "images" de tu plantilla, puedes usarla vía CSS de la siguiente forma:

Code: Select all

body.site {
  background-image: url("../images/bg.jpg");
}
Aquí puedes encontrar más información de uso:
https://drafts.csswg.org/css-background ... ound-image

leoponti
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Mon Apr 06, 2020 1:20 pm

Re: Modificar margen y fondo plantilla Protostar

Post by leoponti » Mon May 11, 2020 7:12 pm

Hola AlexVega, gracias por tu respuesta,
Siempre tan rapido y perfecto en tus respuestas.

Disculpa mi ignorancia, es que estas hablando con alguien que recién empieza.. :)

Los cambios que me dices realizar, donde serian? yo estoy en la parte de personalización de plantilla, pero donde seria que tengo que aplicar esos cambios que me comentas para los tamaños de margenes?

Gracias y saludos!!

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2533
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: Modificar margen y fondo plantilla Protostar

Post by AlexVega » Mon May 11, 2020 7:20 pm

Para evitar que se pierdan tus cambios al actualizar, debes crear un archivo CSS para tu código personalizado.

Aquí tienes el paso a paso:
https://docs.joomla.org/J3.x:Adding_a_c ... _Protostar

Y tu código iría directamente ahí. Todos los navegadores tienen "Herramientas para desarrolladores" que puedes usar para identificar el código que debes editar, en el caso de Firefox, das clic derecho sobre la página y das en "Inspeccionar elemento".

leoponti
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Mon Apr 06, 2020 1:20 pm

Re: Modificar margen y fondo plantilla Protostar

Post by leoponti » Mon May 11, 2020 10:05 pm

Me cuesta entender esta parte, jajaja, tengo que editar estas lineas en el template.css? o tengo que generar el user.css?
En template.css no llego a encontrar las lineas que me comentas porque hay varias opciones similares.. si tienes alguna seccion mayor para mostrarme asi la identifico mejor.
Yo lo que hice fue un clon de template para que me quede uno por si cometo un error.

Gracias y saludos!

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2533
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: Modificar margen y fondo plantilla Protostar

Post by AlexVega » Mon May 11, 2020 10:48 pm

No te preocupes, vamos paso a paso.

El archivo template.css es el que contiene el diseño por defecto de la plantilla. Debemos crear un nuevo archivo, user.css para guardar aquí el código que va a reemplazar el que se encuentra en template.css.

Hagamos el apartado de la imágen de fondo:

- Ve a Extensiones > Plantillas > Plantillas > Detalles y archivos de la plantilla Protostar
- Da clic en la opción "Archivo nuevo de extensiones"
- Selecciona del lado izquierdo la carpeta CSS, en nombre del archivo coloca user y en tipo selecciona css
- Al dar clic en crear tendrás el archivo user.css en la carpeta css
- Sube la imágen que deseas utilizar de fondo a la carpeta images de tu plantilla, es decir en la ruta
tusitio.com/templates/protostar/images, en el ejemplo la imágen se llama bg.jpg
- En el archivo user.css agrega el código anterior y listo.

Para el resto del código, en el mismo archivo user.css, quedaría algo así:

Code: Select all

body.site {
  background-image: url("../images/bg.jpg");
}
/* Para pantallas mayores a 1200px */
@media (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}
/* Para pantallas mayores a 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 1100px;
  }
}
1100px es la medida a ajustar.


Post Reply

Return to “Plantillas (templates) y diseño”