BomAle Posted July 21, 2017 Posted July 21, 2017 (edited) This is a guide for organize header widgets into 3 column, this concept could be extended to 4-5 column with automated configuration (A idea for custom theme). The options are many but I suggest to leave it as I wrote below: @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 first li of each row, 2 second to the last */ [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; } } Copy & Paste this code on custom.css Source : InvisionITA Edited July 21, 2017 by BomAle DSystem, Cyboman, AlexWebsites and 2 others 5
AlexWebsites Posted August 18, 2017 Posted August 18, 2017 This is a nice modification, thanks. However, you can't really add anything above it, I guess that's the reason its a header widget..:) Is there a way to apply this to a lower block position? Best way to make this 2 column?
BomAle Posted August 18, 2017 Author Posted August 18, 2017 8 hours ago, AlexWebsites said: Is there a way to apply this to a lower block position? for footer(?) change all data-widgetArea="header" header to the area of the widget like footer. or you would for other? 8 hours ago, AlexWebsites said: Best way to make this 2 column? yes I will post here when go to pc ? AlexWebsites 1
AlexWebsites Posted September 6, 2017 Posted September 6, 2017 Just following up, is this possible for 2 columns? Thanks.
Joey_M Posted July 28, 2018 Posted July 28, 2018 @BomAle Would you possibly be able to tell me how to make a 3 widget placement for IP.Pages (page template). I'm trying to figure out how to have three columns.
BomAle Posted July 28, 2018 Author Posted July 28, 2018 (edited) If you would manage it with css and not with html/javascript try to put this into custom.css or include created css file into page settings and set single column into page settings @media screen and (min-width: 980px) { /* c = $c = 3, 3 column */ #elCmsPageWrap [data-widgetArea='col1'] > 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/ */ #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(1) { width:100%; margin-bottom: 0 !important; margin-right: 0 !important; } /* 3n+1 first li of each row, 2 second to the last */ #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(2), #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(2) ~ li { width:49%; margin-bottom: 0 !important; } #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+2):nth-last-child(1) { margin-right:0 !important; } #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(3), #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1):nth-last-child(3) ~ li { margin-bottom: 0 !important; } /* LAST WIDGET {$c}n*/ #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n){ float: none; clear: both; margin-right: 0 !important; } /* FIRST WIDGET {$c}n+1*/ #elCmsPageWrap [data-widgetArea='col1'] > ul > li:nth-of-type(3n+1){ margin-left: 0 !important; } #elCmsPageWrap [data-widgetArea='col1']::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } } if you would fit height and not fix to 400px you must remove height: 400px; and add inside media query clause #elCmsPageWrap [data-widgetArea='col1'] > ul{ display: flex; flex-wrap: wrap; } Result with flex Edited July 28, 2018 by BomAle Joey_M 1
steve00 Posted July 29, 2018 Posted July 29, 2018 (edited) I must be missing something here as why not use the ips html code to create your columns in Pages (checkout my homepage) instead of adding more css as said I must be missing something for the reasoning (apologies if the reasoning is simple and I have missed it) Edited July 29, 2018 by steve00
BomAle Posted July 29, 2018 Author Posted July 29, 2018 7 hours ago, steve00 said: I must be missing something here as why not use the ips html code to create your columns in Pages (checkout my homepage) instead of adding more css as said I must be missing something for the reasoning (apologies if the reasoning is simple and I have missed it) this is applicable on footer and header firstly, I have simply adapt the code to the request.
Lucas James Posted October 10, 2020 Posted October 10, 2020 On 8/18/2017 at 6:25 PM, AlexWebsites said: Best way to make this 2 column? Simply drag a custom block and drop it in the widget area, and then drag another block and drop it side-by-side to the first block; fullstop! Don't drag-and-drop the third. To make the widget height auto; instead of using height: 400px; edit the code as following: height: auto; Cheers.
Recommended Posts