modifica colonne

[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

[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.

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.

[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..

[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

Modificato 25 Luglio 2017 da Gianluca73

[BomAle]

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

[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

[BomAle]

con flexbox e simili sono sicuro ma non sarebbe compatibile con ie9 per esempio.