Cómo agregar una cuarta columna a un tema sin sidebar

  • Autor Autor Multizero
  • Fecha de inicio Fecha de inicio
M

Multizero

Préstamo
Eta
Hola betas necesito su ayuda... Les dejare una cap abajo; Pues como ven en la imagen de abajo hay 3 columnas y quiero agregar otra, quiero poner 4 columnas. Pues veran no es un theme con sidebar ni nada simplemente muestra las ultimas entradas y no tiene esas "columnas... El theme es así :encouragement: Les pido POR FAVOR si me ayuda para poder agregar la 4 columna ya que e intentado y no e podido. Gracias de antemano!!

Me explico algo mejor:
Lo que esta en el cuadrado rojo correrlo a la izquierda... y agregar un nuevo lugar para que ahí (En el cuadro verde) quede otro articulo...

Screenshot_1.webp
 
Eso lo querés hacer en todo el index?
Es decir, mostrar de 4 por línea?
El theme no tiene opciones, ya has investigado?
 
El theme debe permitirte hacer eso... investiga
 
Debes tocar bastante código para poder llegar a ello, sin embargo, también tenés que tener en cuenta el responsive del theme, ya que hay que ser detallista con ello. El theme en realidad fue maquetado para que tenga 3 columnas, y no 4.
Si el theme no tiene un panel de opciones que te permita editar el grid, lo tendrás que hacer editando código CSS.

Primero, debes quitarle un poco de padding a .main-box-inside que es la clase que contiene a todo los boxs.
Luego a article.vce-post debes fijarle un max-width, editar el margin y quedaría más o menos lo que buscas.

Yo lo hice desde el inspector de elementos en tu web, y esto fue lo que logré.
Obviamente no quedó del todo bien, pero bueno, es más o menos para que te orientes.


Insertar CODE, HTML o PHP:
.main-box-inside {
    float: left;
    width: 100%;
    padding: 10px !important;
}

article.vce-post {
    max-width: 24.5%;
    margin: 0px !important;
    margin-right: 5px !important;
    margin-bottom: 10px;
}

Resultado:

AqkiLpo.png
 
Debes tocar bastante código para poder llegar a ello, sin embargo, también tenés que tener en cuenta el responsive del theme, ya que hay que ser detallista con ello. El theme en realidad fue maquetado para que tenga 3 columnas, y no 4.
Si el theme no tiene un panel de opciones que te permita editar el grid, lo tendrás que hacer editando código CSS.

Primero, debes quitarle un poco de padding a .main-box-inside que es la clase que contiene a todo los boxs.
Luego a article.vce-post debes fijarle un max-width, editar el margin y quedaría más o menos lo que buscas.

Yo lo hice desde el inspector de elementos en tu web, y esto fue lo que logré.
Obviamente no quedó del todo bien, pero bueno, es más o menos para que te orientes.


Insertar CODE, HTML o PHP:
.main-box-inside {
    float: left;
    width: 100%;
    padding: 10px !important;
}

article.vce-post {
    max-width: 24.5%;
    margin: 0px !important;
    margin-right: 5px !important;
    margin-bottom: 10px;
}

Resultado:

AqkiLpo.png

MUCHAS, MUCHAS... GRACIAS important; Gracias por ayudarme, intente hacer lo que dices y lo que no logro encontrar es article.vce-post { // LA verdad se poco y nada de diseño y esas cosas, En que parte esta ubicado mas o menos? Solo edite .main-box-inside { Espero tu respuesta, de no ser así te lo agradezco de todas formas!!
 
MUCHAS, MUCHAS... GRACIAS important; Gracias por ayudarme, intente hacer lo que dices y lo que no logro encontrar es article.vce-post { // LA verdad se poco y nada de diseño y esas cosas, En que parte esta ubicado mas o menos? Solo edite .main-box-inside { Espero tu respuesta, de no ser así te lo agradezco de todas formas!!

Em... primero que nada, fijate si el theme tiene opciones. Segundo, si editas lo que yo te he dado, el responsive del theme va a joder, y tendras que acomodar todo.
Sin embargo, si pones las lineas que te di en el final del documento style.css, éstas se tendrán en cuenta, ya que tienen !important y eso les indica que lo tenga en cuenta si o si.

Insertar CODE, HTML o PHP:
article.vce-post {
    max-width: 24.5% !important;
    margin: 0px !important;
    margin-right: 5px !important;
    margin-bottom: 10px !important;
}
 
Atrás
Arriba