Jump to content
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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..

Share this post


Link to post
Share on other sites
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

Edited by Gianluca73

Share this post


Link to post
Share on other sites
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 ;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.