Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 03 Aug 2011, 21:16
eva2000's Avatar
eva2000 eva2000 is offline
 
Join Date: Oct 2001
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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

to


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

What's best way to do this in CSS ?

thanks
__________________
Reply With Quote
  #2  
Old 03 Aug 2011, 22:38
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
I don't have any birthdays or events on my test site, so this works:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #3  
Old 04 Aug 2011, 03:38
eva2000's Avatar
eva2000 eva2000 is offline
 
Join Date: Oct 2001
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 04 Aug 2011 at 03:54 ---------------

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.



--------------- Added 04 Aug 2011 at 04:00 ---------------

Of course looks better with birthdays and events hidden

__________________
Reply With Quote
  #4  
Old 04 Aug 2011, 05:17
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Try this:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #5  
Old 04 Aug 2011, 15:08
eva2000's Avatar
eva2000 eva2000 is offline
 
Join Date: Oct 2001
sweet.. that worked perfectly .. thanks Lynne

Trimming the vertical fat off the default style
__________________
Reply With Quote
  #6  
Old 04 Aug 2011, 19:25
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #7  
Old 04 Aug 2011, 22:20
eva2000's Avatar
eva2000 eva2000 is offline
 
Join Date: Oct 2001
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
__________________
Reply With Quote
  #8  
Old 05 Aug 2011, 07:23
setishock setishock is offline
 
Join Date: Feb 2008
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.

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
__________________
Working on new projects and expanding our horizons. Come by and see what we're up to now.

Last edited by setishock; 05 Aug 2011 at 07:47.
Reply With Quote
  #9  
Old 06 Aug 2011, 18:22
eva2000's Avatar
eva2000 eva2000 is offline
 
Join Date: Oct 2001
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 ??


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

__________________
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 04:00.

Layout Options | Width: Wide Color: