Announcement

Collapse
No announcement yet.

How to set gap width?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • SuperGLS
    replied
    No problem.

    Mine is a little off after updating to 4.0.2. The left column border is a little off, meaning the middle column seems to be "covering" it a bit. I'll have to look into that.

    Leave a comment:


  • PjDaBadMan
    replied
    Originally posted by SuperGLS View Post
    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).

    I love you. Thanks

    Leave a comment:


  • pank
    replied
    I suggest anybody having the same issue reply to my bug report as I've gotten no replies in almost a week
    http://www.vbulletin.com/forum/proje...?issueid=34720

    Maybe if other people reply that they can duplicate the issue it will help...

    Leave a comment:


  • albanah
    replied
    Originally posted by EricPSF View Post
    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!
    Dear Eric,

    It looks fine but the right column a bit narrow.
    Please help how to increase it without disturbing the setup, I tried but without success.
    Kindly also put the default values, as I forget them.

    Leave a comment:


  • pank
    replied
    Originally posted by Ramsesx View Post
    Ok, thanks Bob, hope they get it fixed in 4.01.
    Me too! Can't remember but in one of the late alpha's or early beta's it "did" install fine for me by default. Something changed with the Gold release and hopefully they will find the fix.

    Leave a comment:


  • Ramsesx
    replied
    Originally posted by pank View Post
    I have a bug reported already. It seems some of us are never getting the option to install the CMS sample data and that is causing the issue. Works fine on my .net server and won't work on my .com server. Nearly identical systems...
    Ok, thanks Bob, hope they get it fixed in 4.01.

    Leave a comment:


  • pank
    replied
    I have a bug reported already. It seems some of us are never getting the option to install the CMS sample data and that is causing the issue. Works fine on my .net server and won't work on my .com server. Nearly identical systems...

    Leave a comment:


  • Ramsesx
    replied
    Originally posted by Conner View Post
    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:
    I have the same as you and not what SuperGLS have. Is this a bug or what? It's really a mess to get this cms crappy thing to work as it should and look how I want it.

    Leave a comment:


  • Conner
    replied
    I appreciate you doing what you have for me. You have no clue how much you helped me jump on the right path. I'll start my own topic and see if there's a moderator or someone from the development team that will actually post and help.

    Leave a comment:


  • SuperGLS
    replied
    I'm no CSS guy, so I don't know how to use the percentages. I'm just lucky what I did worked. The way I have it set the left and right columns are fixed width and the middle adjusts when you change the size of the browser. That's how I used to have it on vB3.8.4 (and previous) in conjunction with vBadvanced.

    Leave a comment:


  • Conner
    replied
    Ehh, scratch the above note about the left and right columns being 300px each.. for the reason of differences in screen resolutions, I'd rather just have the left and right columns 25% each and the middle column 50%. How would I do that? The more I mess with it the more everything just goes out of whack.

    Leave a comment:


  • Conner
    replied
    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.

    Leave a comment:


  • SuperGLS
    replied
    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).

    Leave a comment:


  • Conner
    replied
    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]

    Leave a comment:


  • SuperGLS
    replied
    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.

    Leave a comment:

Related Topics

Collapse

Working...
X