How to set gap width?
Collapse
X
-
I have found the solution, just to share:
Go to Grid Manager> edit "3 Column Fixed-Liquid-Fixed" > edit "Default Template HTML"
Play around with the width pixel (in red) this:
#gridl3_leftcol {
float: left;
width: 160px;
position: relative;
margin-left: -50%;
left: 170px;
overflow: hidden;
Cheers! -
I'm running Gold - I just navigated to:
VBulletin CMS > 3 Column Fixed-Liquid-Fixed > Edit > find "#gridl3_leftcol" and changed to show:
Code:#gridl3_leftcol { float: left; width: 160px; position: relative; margin-left: -50%; left: 170px; overflow: hidden; } #gridl3_rightcol { float: left; width: 170px; position: relative; left: 10px; overflow: hidden; }
Comment
-
Did you insert the Sample CMS data when installing your vb? Because if you didn't, the custom grids weren't installed.Comment
-
Same problem here / left and right sides are touching the center (no gap at all). I've done 5 clean installs trying 3 different browsers and I never get the freak'in option to install the CMS sample data. Driving me nuts!!Comment
-
I'm starting to think this software is nowhere near as stable as a "gold" release should be. Not only style issues, but overall functionality in general. It's a shame the way vBulletin has changed. It doesn't have the old feel to it as it did when Jelsoft owned it.Comment
-
Ok, with the help from above I got it figured out (though I don't think this should have to be changed ideally).
ACP > vBulletin CMS > Grid Manager > 3 Column Fixed-Liquid-Fixed > EDIT
That's brings you to this screen.
Go to the Default Template HTML box (the bottom one). Change the code in red to make it work.
#gridl3_leftcol { <<<<<<<<<<<<< Make sure you are changing the gridl3_leftcol
float: left;
width: 150px;
position: relative;
margin-left: -50%;
left: 170px;
overflow: hidden;
}
#gridl3_rightcol { <<<<<<<<<<<<< Make sure you are changing the gridl3_righcol
float: left;
width: 150px;
position: relative;
left: 20px;
overflow: hidden;
}
I had to change the width from 170px to 150px for the #gridl3_leftcol and then change the width from 170px to 150px AND change the left from 0px to 20px in the #gridl3_rightcol section.
I hope that helps guys!
Final product.
Comment
-
Ok.. this is what I have.
I went to adminchp>>vbcms>>grid manager>>chose to flatten 3 Column (25%, 50%, 25%) grid>>Default Template HTML.
This is what I have in Layout Manager UI HTML:
Code:<div id="doc3"> <div id="bd"> <div class="yui-g"> <div class="yui-tvb-l25 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul> </div> <div class="yui-tvb-l50 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul> </div> <div class="yui-tvb-l25 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul> </div> </div> </div> </div>
Code:<div id="doc3"> <div id="bd"> <div class="yui-g"> <div class="yui-tvb-l25 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul> </div> <div class="yui-tvb-l50 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul> </div> <div class="yui-tvb-l25 first yui-panel"> <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul> </div> </div> </div> </div>
EDIT:
I changed the Default Template HTML to what SuperGLS has in the ^-- above post and got this message:
Code:Could not discern a proper list of widget locations in the Default Template HTML. Widget locations need to be in the following format: [B]$column[1][/B] The location may appear any where in the HTML but the first location must start with 1, with each successive column increasing by one, for example: [B]$column[1][/B] [B]$column[2][/B] [B]$column[3][/B] [B]$column[4][/B] [B]$column[5][/B]
Comment
-
Hmm. You are using Gold right? In my Default HTML template I had:
Code:<style type="text/css"> #gridl3_container { position: relative; clear: both; float: left; width: 100%; overflow: hidden; } #gridl3_midshift { float: left; width: 200%; position: relative; left: 170px; } #gridl3_rightshift { float: left; width: 100%; position: relative; left: 50%; margin-left: -340px; } #gridl3_midmask { float: right; width: 50%; position: relative; right: 100%; } #gridl3_midcol { margin-left: 340px; width: 100%; overflow: hidden; } #gridl3_leftcol { float: left; width: 150px; position: relative; margin-left: -50%; left: 170px; overflow: hidden; } #gridl3_rightcol { float: left; width: 150px; position: relative; left: 20px; overflow: hidden; } #gridl3_content { margin-right: 340px; } </style> <div id="gridl3_container"> <div id="gridl3_midshift"> <div id="gridl3_rightshift"> <div id="gridl3_midmask"> <div id="gridl3_midcol"> <div id="gridl3_content"> <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul> </div> </div> </div> <div id="gridl3_leftcol"> <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul> </div> <div id="gridl3_rightcol"> <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul> </div> </div> </div> </div>
Comment
-
Related Topics
Collapse
-
by DanloonaI was looking to increase the width of modules on desktop.
And I would like to ask which stylevar I have to modify to get a bit width of modules?
Thanks-
Channel: Support Issues & Questions
Tue 23 Oct '18, 6:39am -
-
hi guys how do i edit my sidebar width? its set at 70/30 but would like it 80/20
-
Channel: Support Issues & Questions
Thu 25 Oct '12, 8:45am -
-
Hi,
I am using an aftermarket template, just in case that makes a difference. I am including a screen shot of an ad space. The problem is that the ad is 300px wide and is larger than the...-
Channel: Support Issues & Questions
Sat 1 Aug '15, 1:34am -
-
by axefxwww.axefx.de: Upgrade forum from 5.2.5 to 5.2.6. This breaks the sidebar width, also the search box with view "topic" (see picture). Stylev ariables -> Sidebar -> sidebar_forum_width don`t...
-
Channel: Support Issues & Questions
Fri 17 Feb '17, 6:18am -
Comment