vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   About custom grids (https://vborg.vbsupport.ru/showthread.php?t=276734)

K4GAP 01-10-2012 01:47 PM
About custom grids
 
Why is it such a pain to come up with a custom grid? I am simply trying to come up with a 240px, 100%, 240px grid and have tried all the suggestions. The problem is I'm not familiar enough with css to alter a flattened grid.

In searching the forums both here and on vbulletin.com I have noticed there are a bunch of posts about members wanting to know how to customize grids. The most suggested method is to create a 25%, 75%, 240 grid and then flatten it so that the html can be altered to achieve the desired affect. Been there, done that! My problem is after flattening the grid, I don't know enough to alter it.

I would much rather learn to do it myself but so far I'm not making any headway. So, I'm resorting to asking someone to make such a layout (240px, 100%, 240px) for me and then by examining the code I can see how it was done.

Is this to much to ask?

Thanks for any help I can get.

Lynne 01-10-2012 07:50 PM
Doing a search on 3 column layouts with a fluid center, I get this - http://murphygoestowork.blogspot.com...ith-fluid.html

Which when typed out for a grid, is something like this:
HTML Code:
<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 250px;}
.col_3 {width: 240px; float: right; margin-left: -250px; }

</style>
<div id="doc3" class="yui-tvb-l3">
    <div class="two_columns">
        <div class="col_2">
            <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
        </div>
        <div class="col_3">
            <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
        </div>
    </div>
        <div class="col_1">
            <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
        </div>


</div>

K4GAP 01-10-2012 09:40 PM
Quote:
Originally Posted by Lynne (Post 2286166)
Doing a search on 3 column layouts with a fluid center, I get this - http://murphygoestowork.blogspot.com...ith-fluid.html

Which when typed out for a grid, is something like this:
HTML Code:
<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 250px;}
.col_3 {width: 240px; float: right; margin-left: -250px; }

</style>
<div id="doc3" class="yui-tvb-l3">
    <div class="two_columns">
        <div class="col_2">
            <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
        </div>
        <div class="col_3">
            <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
        </div>
    </div>
        <div class="col_1">
            <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
        </div>


</div>
How would I implement that into .....

Quote:
<?xml version="1.0" encoding="UTF-8"?>

<grids>
<grid name="Two Columns + Sidebar (25%, 75%, 240px)" auxheader="0" auxfooter="1" addcolumn="1" addcolumnsnap="1" addcolumnsize="3" columns="8"><![CDATA[<div id="doc3" class="yui-tvb-r3">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
<div id="ft">
<div class="yui-u yui-footer">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</div>
]]></grid>
</grids>

Lynne 01-10-2012 11:48 PM
Create a grid, flatten it, insert that code instead.

K4GAP 01-11-2012 12:39 AM
Thank you, worked perfectly.

Moncha 03-03-2012 05:24 AM
Lynn, did exactly what you said and I stll get no 240px, 100%, 240px grid. It disappears on refresh.

I'm using 4.1.11... Why is it so hard to great static side columns?

Lynne 03-03-2012 05:10 PM
Disappears? What do you mean? Can we get a link?

Moncha 03-03-2012 05:51 PM
Sorry, copy and paste inserted a whitespace before the last "}" in the css. I did finally get it to work using this;
Code:
<style type="text/css">
.two_columns {float: left;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 255px;}
.col_3 {width: 240px; float: right; margin-left: -250px;}
</style>

<div id="doc3" class="yui-tvb-l3">
        <div class="two_columns">
                        <div class="col_1 first yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
                        </div>
                        <div class="col_2 yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
                        </div>
                        <div class="col_3 first yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
                        </div>
        </div>
</div>

Crotan 09-21-2012 09:58 AM
Quote:
Originally Posted by Moncha (Post 2305796)
Sorry, copy and paste inserted a whitespace before the last "}" in the css. I did finally get it to work using this;
Code:
<style type="text/css">
.two_columns {float: left;}
.col_1 {width: 240px; float:left; margin-right: -250px;}
.col_2 { float:left; margin: 0 255px;}
.col_3 {width: 240px; float: right; margin-left: -250px;}
</style>

<div id="doc3" class="yui-tvb-l3">
        <div class="two_columns">
                        <div class="col_1 first yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
                        </div>
                        <div class="col_2 yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
                        </div>
                        <div class="col_3 first yui-panel">
                                <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
                        </div>
        </div>
</div>
I wasn't able to get this working. When you flatten the newly created grid do you erase everything in both Layout Manager UI HTML, and Default Template HTML, and use the above instead? Because doing so, when then creating a subsequent layout, I don't get three columns to place widgets into. :confused:

Lynne 09-21-2012 04:58 PM
Yes, you would insert it into both areas.

Crotan 09-22-2012 12:02 PM
1 Attachment(s)
Hmm, well I'm not sure what I'm doing wrong. I create the grid, flatten, overwrite with code used by Moncha. Create a layout, place widgets into it.

But any page created using that layout will look like it has no layout at all. Despite clearly having widgets and the primary content boxed clearly shown. :confused:

Any idea where I went wrong?

Lynne 09-22-2012 02:43 PM
Can you try it with a totally default stye and see if it shows then?

Create a new style with no parent:
  • Styles & Templates > Style Manager > Add New Style
  • Parent Style: No Parent Style
  • Title: Default vBulletin
  • Allow User Selection: Yes
  • Save
Select that style and go to the section.

Crotan 09-22-2012 07:57 PM
Quote:
Originally Posted by Lynne (Post 2367663)
Can you try it with a totally default stye and see if it shows then?

Create a new style with no parent:
  • Styles & Templates > Style Manager > Add New Style
  • Parent Style: No Parent Style
  • Title: Default vBulletin
  • Allow User Selection: Yes
  • Save
Select that style and go to the section.
Ok that's interesting, maybe it was a cache issue? however, what I'm seeing is three fixed columns, where the center is not fluid to the page.

Lynne 09-23-2012 09:37 PM
Can we get a link to see the issue using the default style?

Crotan 09-24-2012 01:38 AM
1 Attachment(s)
Quote:
Originally Posted by Lynne (Post 2368035)
Can we get a link to see the issue using the default style?
Yes, I can provide that. I'm finding that the middle "fluid" column is fluid in the way it will minimize to the smallest item contained in the column.

I'm trying to have a middle fluid column that will maximize it's space between the two outer fixed columns.

Please see http://flotgaming.net/forums/content...ing?styleid=70

I've attached a screenshot of what the page will look like maximized on my 1080 wide screen. The middle column is only fluid to an extent.

Lynne 09-24-2012 05:09 PM
Try adding "width: 100%;" to .two_columns

Crotan 09-25-2012 05:48 PM
1 Attachment(s)
Quote:
Originally Posted by Lynne (Post 2368230)
Try adding "width: 100%;" to .two_columns
No go on that. Tentatively at least, I'll see what it makes the actual page look like in a few. In the layout view, it will force the center column all the way over the right column, and force it under.

Check out the screenshot

Crotan 09-25-2012 11:06 PM
1 Attachment(s)
I'm very curious what others are using for this, since I've yet to get it to work. The closest I've gotten so far is

Code:
<style type="text/css">
#colmask {
        position:relative;        /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
        clear:both;
        float:left;
        width:100%;                        /* width of whole page */
        overflow:hidden;                /* This chops off any overhanging divs */
        background:#ffd8b7;                /* Left column background colour */
}
#colmid {
        float:left;
        width:200%;
        position:relative;
        left:200px;
        background:#fff;            /* Centre column background colour */
}
#colright {
        float:left;
        width:100%;
        position:relative;
        left:50%;
        margin-left:-400px;
        background:#ff9;            /* Right column background colour */
}
#col1wrap {
        float:right;
        width:50%;
        position:relative;
        right:100%;
}
#col1pad {
        margin:0 15px 0 415px;
        overflow:hidden;
}
#col1 {
        width:100%;
        overflow:hidden;
}
#col2 {
        float:left;
        width:170px;
        position:relative;
        margin-left:-50%;
        left:215px;
        overflow:hidden;
}
#col3 {
        float:left;
        width:170px;
        position:relative;
        left:15px;
        overflow:hidden;
}
</style>

<div id="colmask">
        <div id="colmid">
                <div id="colright">
                        <div id="col1wrap">
                                <div id="col1pad">
                                        <div id="col1">
                                                <!-- Column 1 start -->
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
                                                <!-- Column 1 end -->
                                        </div>
                                </div>
                        </div>
                        <div id="col2">
                                <!-- Column 2 start -->
                                <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
                                <!-- Column 2 end -->
                        </div>
                        <div id="col3">
                                <!-- Column 3 start -->
                                                                <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
                                <!-- Column 3 end -->
                        </div>
                </div>
        </div>
</div>
Which will present me with what I want in the layout manager, a fixed fluid fixed layout! However useless because I can only place widgets into one column!. :mad:

Crotan 09-25-2012 11:24 PM
ok done and done! This shit is nuts, why wasn't this included in the default grids is beyond me, but let me tell you it better be in vbulletin 5!

just needed to add the <div id="doc3"> tags

Working code for me. No idea how those other guys got what has been posted prior working
Code:
<style type="text/css">
#colmask {
        position:relative;        /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
        clear:both;
        float:left;
        width:100%;                        /* width of whole page */
        overflow:hidden;                /* This chops off any overhanging divs */
}
#colmid {
        float:left;
        width:200%;
        position:relative;
        left:200px;
}
#colright {
        float:left;
        width:100%;
        position:relative;
        left:50%;
        margin-left:-400px;
}
#col1wrap {
        float:right;
        width:50%;
        position:relative;
        right:100%;
}
#col1pad {
        margin:0 15px 0 415px;
        overflow:hidden;
}
#col1 {
        width:100%;
        overflow:hidden;
}
#col2 {
        float:left;
        width:170px;
        position:relative;
        margin-left:-50%;
        left:215px;
        overflow:hidden;
}
#col3 {
        float:left;
        width:170px;
        position:relative;
        left:15px;
        overflow:hidden;
}
</style>

<div id="doc3">
<div id="colmask">
        <div id="colmid">
                <div id="colright">
                        <div id="col1wrap">
                                <div id="col1pad">
                                        <div id="col1">
                                                <!-- Column 1 start -->
                                                <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
                                                <!-- Column 1 end -->
                                        </div>
                                </div>
                        </div>
                        <div id="col2">
                                <!-- Column 2 start -->
                                <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
                                <!-- Column 2 end -->
                        </div>
                        <div id="col3">
                                <!-- Column 3 start -->
                                <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
                                <!-- Column 3 end -->
                        </div>
                </div>
        </div>
</div>
</div>

ar15dcm 09-30-2012 09:54 AM
1 Attachment(s)
I followed the direction explicitly. See the attached for see how the left column and center area stretch. Neither Crotan or Lynns code are working for me.

Thanks,

kylek 02-10-2013 12:32 AM
I hate bumping up old posts but still cant get Lynns or Crotans code to work. Just need simple directions for a 240 px sidebar - 100 % - 240 px sidebar.

Lynne 02-10-2013 12:36 AM
I'd suggest you start your own thread about this and post up what your grid code looks like and then a link to your section using it so we may see what the problem is.


All times are GMT. The time now is 06:53 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01315 seconds
  • Memory Usage 1,830KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (2)bbcode_html_printable
  • (6)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (22)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete