vb.org Archive - wgo_ blocks conversion from stacked vertically to 3 column CSS ?

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

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - wgo_ blocks conversion from stacked vertically to 3 column CSS ? (https://vborg.vbsupport.ru/showthread.php?t=267911)

eva2000

08-03-2011 07:16 PM

wgo_ blocks conversion from stacked vertically to 3 column CSS ?

CSS ain't my strong suit, so thought I'd ask here. On vB 4.1.x default style what's going on block on forumhome has 5 div blocks stacked vertically on top of each other and want to change it to a 3 column div CSS block.

5 wgo_ blocks stacked vertically change to 3 column 33% width div CSS table

change from

Code:

wgo_onlineusers

wgo_events

wgo_birthdays

wgo_stats

wgo_legend

Code:

column 1

wgo_onlineusers

wgo_events

wgo_birthdays



column 2

wgo_stats



column 3

wgo_legend

What's best way to do this in CSS ?

thanks

Lynne

08-03-2011 08:38 PM

I don't have any birthdays or events on my test site, so this works:

HTML Code:

/*  WGO in 3 columns */

.wgo_block .section, .wgo_stats .section, .wgo_onlineusers .section {

    clear: none;

    float: left;

    display: block;

    width: 33%;

}

I think that if you want users, events, and birthdays all in the same column, you will need to wrap them all in a div, give it a class (example <div class="eventwrapper">) and then change the above css to something like:

HTML Code:

/*  WGO in 3 columns */

.wgo_block .section, .wgo_stats .section, .eventwrapper {

    clear: none;

    float: left;

    display: block;

    width: 33%;

}

eva2000

08-04-2011 01:38 AM

Thanks Lynne. Tried with eventwrapper method and very close just that bit off, the onlineusers, events and birthdays end up horizontal within their own 33% divs ???

Private test forum

https://vborg.vbsupport.ru/external/2011/08/109.png

https://vborg.vbsupport.ru/external/2011/08/110.png

--------------- Added [DATE]1312426458[/DATE] at [TIME]1312426458[/TIME] ---------------

okay think i got it not sure if it's most efficient way of doing it but i changed onlineusers, events and birthday's class section to eventsection and added eventsection in additional.css

Code:

<div id="wgo_onlineusers" class="wgo_subblock eventsection">



<div id="wgo_events" class="wgo_subblock eventsection">



<div id="wgo_birthdays" class="wgo_subblock eventsection">

Code:

.eventsection {

display: block;

padding: 0 0 0.5em 0.5em;

font: 12px;

color: #3E3E3E;

clear: both;

width: 100%;

}

https://vborg.vbsupport.ru/external/2011/08/111.png

--------------- Added [DATE]1312426822[/DATE] at [TIME]1312426822[/TIME] ---------------

Of course looks better with birthdays and events hidden

https://vborg.vbsupport.ru/external/2011/08/112.png

Lynne

08-04-2011 03:17 AM

Try this:

HTML Code:

/*  WGO in 3 columns */

.wgo_block .section, .wgo_stats .section, .eventwrapper {

    clear: none;

    float: left;

    display: block;

    width: 33%;

}

#wgo_onlineusers.section, #wgo_events.section, #wgo_birthdays.section {

    clear: both;

    width: 100%;

    float: none;

}

eva2000

08-04-2011 01:08 PM

sweet.. that worked perfectly .. thanks Lynne :)

Trimming the vertical fat off the default style :D

Lynne

08-04-2011 05:25 PM

I like that look. I don't know what it would look like if you had a whole bunch of users online (like a couple hundred), but it looks fine on my test site right now. :)

eva2000

08-04-2011 08:20 PM

Yeah would be nice to have users online list be auto truncate after a predefined character limit and append a [more] link to view full listing to keep things tidy :)

Or do away with legend column and allow onlineusers span 2x 33% columns

setishock

08-05-2011 05:23 AM

I've been using this to get rid of the legend and permissions blocks. I would venture you could jigger it to fit your needs.

Code:

/* TW7S - Remove Legend and Permissions Boxes */

#usercp_content #forum_icon_legend, #wgo_legend, .forum_info .options_block_container, .thread_info .options_block_container  {

display:none;}

/* TW7S - End remove Legend and Permissions Boxes */

I'm going to have to try your idea out at my place. I'm running in a 2 column format and that would tighten up the bottom of the forum page.

Edit: No joy there. Maybe the 2 column css trick is messing it up. I'll play around with it.

eva2000

08-06-2011 04:22 PM

thanks setishock i used the same code to test hide the legend and other boxes as well :)

i usually use conditionals to hide such stuff from guests though

i think for 2 column without legend you need to break up the 3 divs listed below ??

Code:

.wgo_block .section, .wgo_stats .section, .eventwrapper

All times are GMT. The time now is 03:21 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01100 seconds Memory Usage 1,737KB 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 (6)bbcode_code_printable (3)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)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: