Modificar margen y fondo plantilla Protostar

[leoponti]

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!

[AlexVega]

Que tal,

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.

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]

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!!

[AlexVega]

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]

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!

[AlexVega]

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.