vb.org Archive
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

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.


All times are GMT. The time now is 04:07 AM.
Page 1 of 3 1 23
Show 40 post(s) from this thread on one page

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.01140 seconds
  • Memory Usage 1,758KB
  • 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
  • (2)bbcode_code_printable
  • (2)bbcode_html_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)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
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete