vb.org Archive - [HOW TO - vB4] Two column forum/sub-forum setup via CSS only

Page 2 of 6

Show 40 post(s) from this thread on one page

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

- vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)

- - [HOW TO - vB4] Two column forum/sub-forum setup via CSS only (https://vborg.vbsupport.ru/showthread.php?t=228484)

elenh

02-28-2010 10:59 PM

How do i apply this to the sub forums on forumdisplay.php? Where put i wich code?

Lynne

03-01-2010 02:58 AM

Quote:

Originally Posted by elenh (Post 1994105)

How do i apply this to the sub forums on forumdisplay.php? Where put i wich code?

Same code works for the forumdisplay page also.

Mythotical

03-01-2010 03:18 AM

Hey Lynne, can I get a response to my post? https://vborg.vbsupport.ru/showpost....8&postcount=39

Thanks

Lynne

03-01-2010 03:30 AM

Quote:

Originally Posted by Steve M (Post 1991938)

Lynne:

Got a few problems as well I can't figure out how to move the Threads and Posts part up at the end of the forum title line.

Anyway, here you go.

I have altered the layout to be 2 columns, but the problem I have ran into is spacing issues in a few spots. I'm not sure what to check to change it or see if something is causing it.

Currently the category header has the category title centered but not immediately centered like it should be. So I am wondering which template controls that aspect. (View screenshot)

Spacing for subscribe image is wrong and not sure how that is when it is ready the same thing and the description is dropped to a new line for the left forum early enough but not for the right forum.

Spacing after my last post box to the right is a huge margin, I want it to only be 10px margin to the right but I have no idea what is defining the space there.

https://vborg.vbsupport.ru/attachmen...1&d=1267192419

You can see all areas of concern boxed in with comments so there is no confusion. :)

Thanks
Steve

You can find the template for the (non) centered title by doing this - vboptions > General Settings > Add Template Name in HTML Comments > set to Yes . Then go back to your page and view the source code and you will see the name of the template called around your part of the code. One of the forumhome_forumbit_* ones, I would guess.

All the other issues are CSS issues. I would use firebug to play around with the css and see exactly what controls what so you can change it. This is a good article to help you find classes - then just modify it right there on the page and see what happens - HOW TO Find what Stylevar you need to edit

Mythotical

03-01-2010 03:48 AM

Thanks a bunch, now you got me staying up longer tonight. LOL Guess I asked for it. hehe

elenh

03-01-2010 11:07 AM

1 Attachment(s)

I try with both codes but works not correct by me.
I added both codes to forumbits.css and after on forumdisplay.css but haven't worked.
Take a look on the screenshot if you have the time to see how the forumdisplay subforum looking.

Should i change the values of forums depth in the vb settings?
Can you tell me what do i wrong? I test the code in the default vb style.

Lynne

03-02-2010 03:12 AM

Try adding the code to the additional.css file (that template didn't exist when I wrote this).

elenh

03-02-2010 05:48 AM

again works not on forumdisplay.php (subforums)

Lynne

03-02-2010 02:15 PM

It looks like they just changed the class names from childforum to forumbits. I haven't done much checking, but I changed the name real quick and it seemed to work:

Code:

.forumbits ol {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

}

.forumbits li.forumbit_post {

  float: left;

  width: 50%;

  margin: 0;

  padding: 0;

  clear:none;

}

bsdvn

03-02-2010 09:49 PM

hi Lynne

In my site, it is correct on Firefox, but it is only 1 collumn on IE - You can see this information at my site at here

elenh

03-03-2010 08:00 AM

Yes lynne. Thanks its worked fine.

Lynne

03-04-2010 03:44 AM

Quote:

Originally Posted by bsdvn (Post 1995566)

hi Lynne

In my site, it is correct on Firefox, but it is only 1 collumn on IE - You can see this information at my site at here

Sorry, but I don't have IE to view it.

viarun

03-06-2010 01:54 PM

Adding clear:both; to the subforum listing 2-column css for this class .subforums ol.subforumlist fixes a display problem in IE7.

ChangeFive

03-17-2010 04:00 PM

Thank you! Thank you! Thank you! Been trying to figure out how to do this for sub forum display for a while. This worked perfectly.

kmohamed

04-22-2010 04:26 PM

great i did my best and the result were fabulous all thanx for you

Cedric_FP

04-25-2010 11:54 PM

Hi,

Is it possible to do this with forumhead as well?

So that instead of there being two forums in columns that belong to the same category, there are two categories that exist in columns.

Lynne

04-26-2010 03:22 AM

Quote:

Originally Posted by Cedric_FP (Post 2027317)

Hi,

Is it possible to do this with forumhead as well?

So that instead of there being two forums in columns that belong to the same category, there are two categories that exist in columns.

Sure. As I said in the article:

Quote:

This same concept can be applied to any list in the style.

Cedric_FP

04-27-2010 04:20 AM

I can barely even comprehend the CSS to do it for forums let alone for forumhead.

All I can gather is that something needs to happen with .forumbits_post L1

ever-fresh

05-07-2010 10:39 PM

Quote:

This same concept can be applied to any list in the style. For instance, you can change the listing of sub-forums under the Sub-Forums listing on the main page also with just a couple of lines:

is there any modification for this please ?
i really need this.

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

what is the location of file from root

HTML Code:

http://domain.com/forum/....

?
And what is the name of file ?
where i need to put thse codes ?

ever-fresh

05-08-2010 01:27 AM

1 Attachment(s)

hi.
i got it now.

thankyou very much laynn. good job.

here i can see somewhere extra space.
and in some places less space.

Please see image:

Lynne

05-08-2010 04:21 AM

It looks like you removed the Last Post and other columns in the last forum there and so the columns are spreading out more. You'll have to limit the space (width) in the parent div.

kmohamed

05-12-2010 09:16 PM

you may notice my previous i am happy with result but my user aren't maybe because of their screen size. anyway i decided to remove it but i have a question is it possible to make it look like this
------------------------------------

Code:

forum name      

last post               

threads:# post:# 

rss - subscribe

-----------------------------------
i don't need sub-forums neither who posted the last post
is it possible and how
thankx

Lynne

05-12-2010 10:19 PM

Quote:

Originally Posted by kmohamed (Post 2035975)

Code:

forum name      

last post               

threads:# post:# 

rss - subscribe

-----------------------------------
i don't need sub-forums neither who posted the last post
is it possible and how
thankx

I'm sure you could make it like that, but this isn't the thread to get help with template mods. You should post in the main forums for help doing that.

mokujin

05-14-2010 08:39 PM

Hi Lynne,
I am new to vb4, I dont know how to make my table to two column?
Can you help me? Thank you

Lynne

05-14-2010 11:19 PM

Quote:

Originally Posted by mokujin (Post 2037082)

Hi Lynne,
I am new to vb4, I dont know how to make my table to two column?
Can you help me? Thank you

I posted some CSS to try in the first post.

buiquockhanh

05-16-2010 08:34 AM

1 Attachment(s)

Help not work 4.0.3 pl1
it skewed
demo:

Vesir04

05-16-2010 11:21 AM

Good Post :)

Lynne

05-16-2010 02:47 PM

Quote:

Originally Posted by buiquockhanh (Post 2037793)

Help not work 4.0.3 pl1
it skewed
demo:

You probably have a border making it just a bit too wide. Reduce the width to something like 49.5% or so.

buiquockhanh

05-17-2010 11:19 AM

can you say more clearly ?

Lynne

05-17-2010 02:20 PM

Quote:

Originally Posted by buiquockhanh (Post 2038444)

can you say more clearly ?

Try changing the 50% to something like 49.5%. Or, remove the borders.

buiquockhanh

05-17-2010 04:24 PM

I have tried but not been

grecostimpy

05-25-2010 12:05 AM

Lynne has been extremely helpful in this thread with CSS debugging, but please realize that each forum is different based on what specific styles you are using, so small edits to Lynne's CSS that work for one forum may not work as well for another.

I do recommend that you follow her advice and download either Firebug or the Web Developer plugin for Firefox. Using the Web Developer plugin, you can edit CSS "on-the-fly" to see what certain CSS changes look like instantly on your website without changing any code in the admincp.

Once you find the CSS combination you like, just copy the code from Web Developer and apply it to your CSS files.

Besides being an excellent tool (that does much, much more then just edit CSS) it helps you learn by doing. You see instantly what your file edits do and how fun it can be to style your website on your own.

Again, thank you for this great tutorial Lynne.

penmai.com

09-18-2010 01:08 PM

hi.. its working fine with firefox but in internet explorer it is displaying in only one columns. I had pasted the code in forumbits-ie.css also. www.penmai.com/forums

Lynne

09-18-2010 02:38 PM

I jsut looked at your site and don't see any of this CSS being used. Make sure you put it in the additional.css template.

Alfa1

09-18-2010 02:52 PM

Does this work on forumdisplay.php ?

Lynne

09-18-2010 03:07 PM

Quote:

Originally Posted by Alfa1 (Post 2100076)

Does this work on forumdisplay.php ?

The basic CSS will work on the forumdisplay, yes. However, you may need to change some class or id names. (There is also a modification that will do this.)

penmai.com

09-22-2010 11:45 AM

Quote:

Originally Posted by Lynne (Post 2100066)

I jsut looked at your site and don't see any of this CSS being used. Make sure you put it in the additional.css template.

Thanks Lynne, it worked perfectly.

AliceHoward

09-25-2010 11:09 PM

Brilliant little top-tip this article of yours, thanks for sharing it. :)
I hope you don't mind me posting a possible solution Lynne.

Quote:

Originally Posted by Alfa1 (Post 2100076)

Does this work on forumdisplay.php ?

This seems to be working for my site, I added this to the additional.css

Code:

div.forumbit_post {

  float: left;

  width: 100%;

  margin: 0;

  padding: 0;

  clear:none;

}

.forumbit_post {

  float: left;

  width: 50%;

  margin: 0;

  padding: 0;

  clear:none;

}

AliceHoward

09-27-2010 04:33 AM

Hmmm, something is wrong with the snippet I posted above, every now and then one of the sub-forums gets moved over somehow so an empty space appears. You can see it occurring here: http://styleorigin.com/community/for...-Mental-Health

It's only every now and then, if I refresh the page a few times it seems to right itself, obviously there's something wrong or it wouldn't dropdown.

Alfa1

09-27-2010 09:00 AM

Yes, I was just browsing your site, before I read your last post. I noticed that.

Does anyone know what's causing Alice's bug with sub-forums display?

What would the code be to display 3 columns? Same but 0%, 33% and 66% ?

All times are GMT. The time now is 12:37 AM.

Page 2 of 6

Last »

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01407 seconds Memory Usage 1,829KB 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 (4)bbcode_code_printable (1)bbcode_html_printable (13)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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
Messages: