vb.org Archive - Custom grid ? how do I ...

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Custom grid ? how do I ... (https://vborg.vbsupport.ru/showthread.php?t=301365)

K4GAP

08-19-2013 10:06 AM

Custom grid ? how do I ...

I want to have three vertical sections on my Articles page. I'm using the grid below ...

Code:

<grids>

    <grid name="Mine" auxheader="0" auxfooter="0" addcolumn="1" addcolumnsnap="1" addcolumnsize="4" columns="4"><![CDATA[<div id="doc3" class="yui-tvb-r4">

    <div id="bd">

        <div id="yui-main">

            <div class="yui-b">

                <div class="yui-gd">

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

]]></grid>

</grids>

Which results in this ....
http://www.livinginkentucky.com/file...gridscreen.jpg

What I want and need is for the left column to be the same width (300px) as the right side sidebar that I have set at 300px.

Using the code example above, what changes in it have to be made to accomplish what I want?

Lynne

08-19-2013 02:52 PM

Did you try a search? I think your grid has been posted before. There are also a bunch of grids in the modifications area.

K4GAP

08-19-2013 09:18 PM

Lynne I never got it the first time, maybe I should just settle for what I have. I ain't very bright.

Lynne

08-19-2013 11:04 PM

searching "grid*" in all forums/titles only gives me these (and several other threads)....

https://vborg.vbsupport.ru/showthrea...hlight=grid%2A
https://vborg.vbsupport.ru/showthrea...hlight=grid%2A
https://vborg.vbsupport.ru/showthrea...hlight=grid%2A
https://vborg.vbsupport.ru/showthrea...hlight=grid%2A

K4GAP

08-20-2013 05:22 PM

Quote:

Originally Posted by Lynne (Post 2439851)

I had done that before the post. Seems there are quite a few other users that are as dumb as me.

My next move will be to bum around and find other vb forums that have the layout I want and then hound them for their grid code. It really shouldn't be that hard to do.

Lynne

08-20-2013 10:00 PM

Your own thread that you started here - https://vborg.vbsupport.ru/showthrea...hlight=grid%2A - does what you want except it has the two side columns at 240px instead of 300px. I'm sure you can modify the CSS to change it for you.

K4GAP

08-20-2013 10:18 PM

My left column was 25%. I want a set left column at whatever pixel I choose. The 300px on the right column is the only thing I have control of in pixels.

Or, am I also not understanding what you are trying to tell me?

Lynne

08-21-2013 03:11 PM

In that thread, the second post here - https://vborg.vbsupport.ru/showpost....66&postcount=2 - is a 240px, 100%, 240px grid. Just change the couple of lines at the top that mention 240 and 250 to 300 and 310 and it should work fine.

K4GAP

08-21-2013 06:29 PM

Quote:

Originally Posted by Lynne (Post 2440144)

I'll give it a try right now, thanks.

* after seeing code*

Does the style portion of that code stay with the code or does it go in additional?

Lynne

08-21-2013 06:34 PM

After you flatten your grid, you will put that full code into each of the textareas on the grid page.

K4GAP

08-21-2013 06:47 PM

Quote:

Originally Posted by Lynne (Post 2440209)

After you flatten your grid, you will put that full code into each of the textareas on the grid page.

Progress !!

After using that code I get ...

http://www.livinginkentucky.com/files/graphics/beta.png

Both side columns are as I want them to be. Now all I need is for the center to be 100%.

Looking at the code nothing stands out that I can change. What do you see?

Lynne

08-22-2013 01:45 AM

It shows up like that on my Layout Manager page also, but not on the actual Section page if you use the layout. (You'd have to look into the CSS in the admincp and see what is causing the issue if you want to change what it looks like in the admincp.)

K4GAP

08-22-2013 06:54 AM

I have the two sidebars set to the width I wanted. The center is what I can't get to cooperate.

http://www.livinginkentucky.com/file...s/artciles.png

I've tried every combination of code I can come up with on the center's settings. I even tried my zip code and area code but that didn't work :(

Here's the code that i'm presently using .... I ain't doing nothing else until someone has a brain fart :eek:

Code:

<style type="text/css">

.two_columns {float: right;}

.col_1 {width: 270px; float: left; margin-right: -250px;}

.col_2 {float:left; margin: 0  500px;}

.col_3 {width: 270px; 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>

Here it is live on my TEST SITE .

snakes1100

08-22-2013 07:11 AM

It needs a width & smaller margin.

Code:

.col_2 {

float: left;

margin: 0 270px;

width: 530px;

}

K4GAP

08-22-2013 07:25 AM

Quote:

Originally Posted by snakes1100 (Post 2440286)

It needs a width & smaller margin.

Code:

.col_2 {

float: left;

margin: 0 270px;

width: 530px;

}

I just tried this and it would work but using a pixel width will not allow the center to collapse or expand to fit different widths of the users monitors. Here it is set at 900px.

snakes1100

08-22-2013 07:31 AM

Yea, it seems to have more that just the missing width issue for that css layout, but i dont have one to test with, i was just playing around with the element in chrome.

K4GAP

08-22-2013 07:36 AM

Quote:

Originally Posted by snakes1100 (Post 2440288)

Yea, it seems to have more that just the missing width issue for that css layout, but i dont have one to test with, i was just playing around with the element in chrome.

Thanks for trying. This is starting to get really aggravating. Oh well.

snakes1100

08-22-2013 07:42 AM

Looking a bit more, it looks like column 1 is in a separate div than the center & right columns.

K4GAP

08-22-2013 07:46 AM

Quote:

Originally Posted by snakes1100 (Post 2440290)

Looking a bit more, it looks like column 1 is in a separate div than the center & right columns.

Can you tell anything from the code?

snakes1100

08-22-2013 07:53 AM

Not really, as i dont have a cms to test, i couldnt really say, but i do think the div's are screwed up.

K4GAP

08-22-2013 07:54 AM

Quote:

Originally Posted by snakes1100 (Post 2440292)

Not really, as i dont have a cms to test, i couldnt really say, but i do think the div's are screwed up.

I'll concentrate on the div's for a solution.

Thanks

Lynne

08-22-2013 06:18 PM

When I go here - http://www.livinginkentucky.com/forumz , the center section is at 100%. It gets larger/smaller as I expand/contract my browser. Isn't that what you want?

K4GAP

08-22-2013 11:44 PM

Quote:

Originally Posted by Lynne (Post 2440407)

When I go here - http://www.livinginkentucky.com/forumz , the center section is at 100%. It gets larger/smaller as I expand/contract my browser. Isn't that what you want?

That's a grid I downloaded it's not what I want, the sides are to wide. I put it there because after working on trying to get what I want allllll night, I gave up and got tired of looking at crapola :)

K4GAP

09-02-2013 03:24 PM

DISREGARD: It's ok now. I just wish I knew how I fixed it :)

I found something on vb.com that ALMOST works!!

The code below is described as, "Secondary Header,Fixed Sidebar,Fluid Center,Fixed Sidebar,Secondary Footer".

The problem I have with that code is the center portion has what appears to be really wide padding on the right side, more so than the left. I don't see anything obvious in the code.

Code:

<grids>

    <grid name="Secondary Header,Fixed Sidebar,Fluid Center,Fixed Sidebar,Secondary Footer" auxheader="1" auxfooter="1" addcolumn="1" addcolumnsnap="1" addcolumnsize="4" columns="8"><![CDATA[<div id="doc3">

    <div id="hd">

        <div class="yui-u yui-header" style="padding:0 0 15px 0;">

            <ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>

        </div>

    </div>

    <div id="DefaultWrapper">

        <div id="DefaultMainCol">

            <div class="leftcol yui-sidebar"  style="width:200px; float:left;">

                <ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>

            </div>

            <div class="rightcol yui-sidebar" style="width:302px; float:right;">

                <ul class="list_no_decoration" id="widgetlist_column4">$column[4]</ul>

            </div>

            <div class="centercol yui-panel" style="padding:0 10px 10px 10px; align:right; overflow:hidden;">

                <ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>

            </div>

        </div>

    </div>

    <div id="ft">

        <div class="yui-u yui-footer" style="padding: 15px 0 0 0;">

            <ul class="list_no_decoration" id="widgetlist_column5">$column[5]</ul>

        </div>

    </div>

</div>]]></grid>

</grids>

Anyone have a clue as to why the center would not fully expand?

Note*
It would be nice to not have the additional head and footer areas as well.

snakes1100

09-02-2013 03:55 PM

Looks to expand for me in Chrome, i only see one header & footer as well....

Looks good.

K4GAP

09-02-2013 03:57 PM

Quote:

Originally Posted by snakes1100 (Post 2442558)

Looks to expand for me in Chrome, i only see one header & footer as well....

Looks good.

It's good to go now. I must have accidentally fixed it :)

snakes1100

09-02-2013 04:01 PM

Admitting is half the battle....

All times are GMT. The time now is 04:53 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01577 seconds Memory Usage 1,809KB 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 (5)bbcode_code_printable (9)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (27)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
Messages: