wgo_ blocks conversion from stacked vertically to 3 column CSS ?

[eva2000]

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

wgo_onlineusers
wgo_events
wgo_birthdays
wgo_stats
wgo_legend

to

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]

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

/*  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:

/*  WGO in 3 columns */
.wgo_block .section, .wgo_stats .section, .eventwrapper {
    clear: none;
    float: left;
    display: block;
    width: 33%;
}

[eva2000]

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





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

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

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

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

.eventsection {
display: block;
padding: 0 0 0.5em 0.5em;
font: 12px;
color: #3E3E3E;
clear: both;
width: 100%;
}

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

Of course looks better with birthdays and events hidden

[Lynne]

Try this:

/*  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]

sweet.. that worked perfectly .. thanks Lynne

Trimming the vertical fat off the default style

[Lynne]

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]

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]

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.

/* 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]

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

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