How to set gap width?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • EricPSF
    Senior Member
    • Jan 2007
    • 159

    [CMS] How to set gap width?

    Hi,

    May I inquire how do I set the gap width similar to the vB? (see attached picture).

    Click image for larger version

Name:	gap width.png
Views:	1
Size:	44.7 KB
ID:	3713847

    Mines are extremely near to one another...
  • EricPSF
    Senior Member
    • Jan 2007
    • 159

    #2
    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!

    Comment

    • Grimster
      New Member
      • Nov 2009
      • 22
      • 4.0.0

      #3
      Nice one Eric - just the ticket!

      Thanks.

      Comment

      • Conner
        Member
        • Jan 2008
        • 48

        #4
        I went to Grid Manager>edit 3 Column (25%, 50%, 25%) and I see nothing that says edit Default Template HTML.

        Am I missing something?

        Comment

        • EricPSF
          Senior Member
          • Jan 2007
          • 159

          #5
          Originally posted by Conner
          I went to Grid Manager>edit 3 Column (25%, 50%, 25%) and I see nothing that says edit Default Template HTML.

          Am I missing something?
          Strange. It is there in "3 Column Fixed-Liquid-Fixed" for my Grid Manager.

          Comment

          • Conner
            Member
            • Jan 2008
            • 48

            #6
            Are you running Gold? I am, but I don't see anything in my Grid Manager that says "3 Column Fixed-Liquid-Fixed" and nothing at all that says "Default Template HTML".

            Comment

            • Grimster
              New Member
              • Nov 2009
              • 22
              • 4.0.0

              #7
              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;
              }
              Gave me nice 10 pixel borders between widgets and content.

              Comment

              • nickp
                Member
                • Apr 2008
                • 54
                • 3.8.x

                #8
                Originally posted by Conner
                Are you running Gold? I am, but I don't see anything in my Grid Manager that says "3 Column Fixed-Liquid-Fixed" and nothing at all that says "Default Template HTML".
                Did you insert the Sample CMS data when installing your vb? Because if you didn't, the custom grids weren't installed.

                Comment

                • pank
                  Senior Member
                  • Mar 2001
                  • 466

                  #9
                  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!!
                  Bob- (pank)
                  pankpages.com / http://twitter.com/_pank

                  Comment

                  • Conner
                    Member
                    • Jan 2008
                    • 48

                    #10
                    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

                    • SuperGLS
                      Senior Member
                      • Nov 2004
                      • 104
                      • 4.0.0

                      #11
                      I'm having the same problem. Glad I'm not the only one.

                      Comment

                      • SuperGLS
                        Senior Member
                        • Nov 2004
                        • 104
                        • 4.0.0

                        #12
                        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

                        • Conner
                          Member
                          • Jan 2008
                          • 48

                          #13
                          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>
                          This is what I have in Default Template 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>
                          I'm taking it that I need to add some css to Default Template HTML?



                          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

                          • SuperGLS
                            Senior Member
                            • Nov 2004
                            • 104
                            • 4.0.0

                            #14
                            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>
                            Maybe you want to try putting that entire code in there (but save the other code first!!!! in case it doesn't work).

                            Comment

                            • Conner
                              Member
                              • Jan 2008
                              • 48

                              #15
                              Holy smokes it worked! But.. the only thing wrong is that I'm trying to make my left and right columns 300px each. And when I change their width to 300px, it throws it all off.


                              Edit:

                              Yeah, I'm using Gold. Sorry. Forgot to add that in.
                              Last edited by Conner; Fri 1 Jan '10, 6:33am.

                              Comment

                              Related Topics

                              Collapse

                              Working...