Vai al contenuto
Gianluca73

modifica colonne

Recommended Posts

Gianluca73

Ciao a tutti, sapete dirmi se c'è un modo per inserire più colonne all'interno dell area gestita con moduli e widget. in pratica vorrei che nella parte alta del forum ci fossero 3 colonne che rimandano a diverse parti invece di una lunga

 

ciao e grazie

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
BomAle

Ti consiglio di configurare quello che vuoi tramite css, perchè almeno non hai poi problemi legati al responsive e a configurare il database sql.

quindi vai nel tema e modifica il file css custom.css

@media screen and (min-width: 980px) {
	/* c = $c = 3, 3 colonne */
	[data-widgetArea='header'] > ul > li{
		float: left;
		display: inline-block !important;
		padding: 0 !important;
		margin: 0 1% 2% !important; /* m = 1 */
		width: 32%; /*(100-(c*2-2)*m)/c => (100-(3*2-2)*1)/3 = 32 */
		vertical-align: top;
		height: 400px;
		overflow-y: auto !important;
		overflow-x: hidden !important;
	}
	/* http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(1) {
		width:100%; margin-bottom: 0 !important; margin-right: 0 !important;
	}
	/* 3n+1 sta per prima della terza riga, 2 sta per penultimo dei li */
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(2),
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1):nth-last-child(2) ~ li {
		width:49%; margin-bottom: 0 !important;
	}
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+2):nth-last-child(1) {
		margin-right:0 !important;
	}
	[data-widgetArea="header"] > ul > li:nth-of-type(3n+1):nth-last-child(3),
	[data-widgetArea="header"] > ul > li:nth-of-type(3n+1):nth-last-child(3) ~ li {
		margin-bottom: 0 !important;
	}
	/* LAST WIDGET {$c}n*/
	[data-widgetArea='header'] > ul > li:nth-of-type(3n){
		float: none;
		clear: both;
		margin-right: 0 !important;
	}
	/* FIRST WIDGET {$c}n+1*/
	[data-widgetArea='header'] > ul > li:nth-of-type(3n+1){
		margin-left: 0 !important;
	}
	[data-widgetArea="header"]::after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
}

in questo modo hai 3 colonne senza dover fare particolari modifiche. :efadb0e3980192a08f631d0fc09e5:

res.png

res2.png

ci sono diverse opzioni che potresti seguire ovvero di restituire 2 colonne per tablet e 1 per cellulari... oppure evitare spazi vuoti cambiando "height" in "max-height" ma poi occorre fare ulteriori modifiche.

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Gianluca73

grazie milllissime ... ora testo... anche se devo prima risolvere qualcosa, perché ho finito la migrazione da Bulletin ma non vedo ancora nulla sul frontend..

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Gianluca73

Ciao, funziona bene, solo vedo che gestisce male la lunghezza dei titoli, secondo te c'è modo di metterlo a posto? forse il display?

grazie

gianluca

1.jpg

Modificato da Gianluca73

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
Gianluca73
11 ore fa, BomAle ha scritto:

devo guardare se si riesce a usare un table-cell cosi da avere altezze dinamiche e non fisse

grazie, cmq provo anche io a smanettarci tramite browser ;)

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

You need to be a member in order to leave a comment

Crea un account

Iscriviti per un nuovo account nella nostra comunità. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora

×