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

Page 5 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)

Dr Aj642

07-25-2012 03:53 AM

any ideas lynne?

Lynne

07-25-2012 03:37 PM

As I said, I need a link to the site/style in order to view the problem. I like to use firebug for CSS issues and I can't do that without a link to the site/style.

tommythejoat

07-30-2012 05:40 PM

Quote:

Originally Posted by Lynne (Post 2324725)

Ah, I see what you mean. You said it differed from forum to forum and I thought you meant looking at one forum page (forumdisplay) versus another (cuz if you have subforums on those pages, then the code will align them on those pages also).

If you look at the page using firebug, you'll see that the width given to each of the <li> is different. You need to do something to set those to 100%. You'll have to play with it a bit cuz lists are a bit odd with CSS.

This response sf from a while ago, but I had some time today to look at it again and I remain confused about what is going on. I examined several of the li tags with FireBug and they all are pretty much the same. Where would I find the width you are referring to above?

Here is what the code looks like.

html:

HTML Code:

<li class="subforum">

<img id="forum_statusicon_291" class="inlineimg" border="0" alt="" src="images/statusicon/subforum_old-48.png">

<a href="forumdisplay.php?291-Moderator-Procedures-and-Training-Project">Moderator Procedures and Training Project</a>

</li>

css:

Code:

.subforums ol.subforumlist {

    float: left;

    margin: 0;

    padding: 0;

    width: 100%;

}

.subforumlist li.subforum {

    clear: none;

    float: left;

    margin: 0;

    padding: 0;

    width: 50%;

}

The css looks just like your example to me but there does not seem to be any width control. I suppose it is possible that the containers have different widths, but visibly they are the same for each of the categories.:confused:

Dr Aj642

08-06-2012 07:54 AM

Quote:

Originally Posted by Lynne (Post 2351348)

As I said, I need a link to the site/style in order to view the problem. I like to use firebug for CSS issues and I can't do that without a link to the site/style.

Ok, here it is.

http://abasketballjones.com/forum/forum.php?styleid=3

Hope that helps.

Cheers Lynne

Lynne

08-06-2012 04:03 PM

Quote:

Originally Posted by Dr Aj642 (Post 2354913)

Ok, here it is.

http://abasketballjones.com/forum/forum.php?styleid=3

Hope that helps.

Cheers Lynne

You should increase the min-height for ".forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow" to something like 100px or so and see if that fixes it.

Dr Aj642

08-07-2012 05:40 AM

Quote:

Originally Posted by Lynne (Post 2354997)

You should increase the min-height for ".forumbit_nopost .forumbit_nopost .forumrow, .forumbit_post .forumrow" to something like 100px or so and see if that fixes it.

Still the same :(

Strange how it hasn't evenly split them 15 on the left and 15 on the right...

Someone has created a mod that splits categories which is exactly what i want, but bad thing is, the mod hasn't been updated so you can't choose which one you want split...

dammit

ArsMagnum

08-14-2012 12:36 AM

I'm on the same situation, so i'm trying to play with the codes to see if it fixes. And the problem is in the same side of the category, so there must be something on it or... something.
If I get to fix it earlier I'll let you know :P

Lynne

08-14-2012 01:03 AM

Quote:

Originally Posted by Dr Aj642 (Post 2355163)

I still see the min-height set at 58px.

When I change it using firebug, the site looks fine.

ArsMagnum

08-14-2012 02:26 AM

Hi Lynne, i had the same problem as Dr Aj but I could fix it with that you said, but another issue came right after that one.

On the left side, the last forum looks like... deeper from the other ones, I dont really know how to describe it.
Here, I leave you the link so you can check it by yourselve:

http://forum.arsmagnum.com/forum.php

it is at the "Anime & Manga" Category.

Plus... Is there anyway that I can change that option of min-heigh only in one category? I've been trying but I dont know how

Lynne

08-14-2012 03:58 PM

Quote:

Originally Posted by ArsMagnum (Post 2356794)

You have your min-height set to 95px, I think it needs to be larger. If you only want it for that one category, then use the category id:

#c_cat18 .forumbit_nopost .forumbit_nopost .forumrow, #c_cat18 .forumbit_post .forumrow {min-height: 105px;}

ArsMagnum

08-14-2012 05:08 PM

I tried with the min-height at 100px and it still looks odd.
I think the problem is always at the final space of the left column, couse I tried to create a new forum so there would be equal forums to divide, but the left one it looks always that way.
Might not be a code problem from the very Columns code?

I could change the large of only one category now, thanks for the help.

Lynne

08-14-2012 09:02 PM

I think you need to increase the min-height to 110px (at least for firefox). As for the last forum, I think it shows like that because you have borders for your forums. Notice how the right borders don't show for any of the left forums - it's because the right forums hide it.

ArsMagnum

08-14-2012 11:58 PM

Its all done.
Thanks for the help Lynne. It looks great!

Dr Aj642

08-15-2012 05:59 AM

Quote:

Originally Posted by ArsMagnum (Post 2356794)

Quote:

Originally Posted by Lynne (Post 2356777)

I still see the min-height set at 58px.

When I change it using firebug, the site looks fine.

Quote:

Originally Posted by Lynne (Post 2356918)

Had to set it for one category! Fixed now. Cheers Lynne

ProFifaLeagues

08-16-2012 08:13 PM

Quote:

Originally Posted by ArsMagnum (Post 2356794)

any chance of a step by step write up on how you get the Forums looking that way Sir please?
Looks Superb :up:

Kirk Fitzgerald

08-22-2012 08:27 AM

Quote:

Originally Posted by Lynne (Post 1995281)

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;

}

Exactly what I came here today to ask about, thank you for posting this answer Lynne, most helpful, I tried to like your post but it says I can't like it, guess the post was too old, so thanks and consider it liked. :)

HFCloud

09-08-2012 04:11 PM

Hi,

Can someone do this for me? I'm so confused with this!

nezr	09-14-2012 04:34 AM

Is it possible to have 4 forum/subforum in a row?

Reece^B

11-16-2012 10:20 PM

Quote:

Originally Posted by Lynne (Post 1995281)

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;

}

I used the childforum (post 1) and that worked, when I used this update it stopped?

However my problem is when I added cat51 it didn't change just that category, but all. Am I right in thinking it goes in just 1 place?

Lynne

11-16-2012 11:54 PM

Could have been you wrote the CSS incorrectly. It's hard to tell without you post the exact CSS you wrote, tell us where you added it, and give us a link to the page that should use it.

Reece^B

11-17-2012 07:52 AM

Hi Lynne:

This is in additional.css

PHP Code:


		
			
.forumhead + .childforum .L2:first-child .forumrow, .forumhead + .L2 .forumrow {
  border-top: 0;
}
.forumrow .table {
  height: 100px;
}
#cat51 ol.childforum {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.childforum li.forumbit_post {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  clear:none;
}
#forums .L1 .L2 {
  clear:none;
}
.forumbit_post .forumrow .forumlastpost {
  clear:both;
  width:95%;
}
.forumbit_post .forumlastpost .lastpostby {
  display: block;
  float: left;
}
.forumbit_post .forumlastpost .lastpostdate {
  display: block;
  float: right;
}
.forumbit_post .forumlastpost .lastposttitle {
  display: block;
  float: left;
}
.forumbit_post .foruminfo {
  clear:right;
  float:left;
  min-width:50%;
  width:70%;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
  width:20%;
}
.forumbit_post .forumlastpost .lastposttitle {
  display: block;
  float: left;
}
.forumbit_post .foruminfo {
  clear:right;
  float:left;
  min-width:50%;
  width:70%;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
  width:20%;
}

Lynne

11-18-2012 03:41 PM

You would need to add the id tag to all the CSS you want to only apply to that id.

And, you didn't post a link so that we can see the problem.

Reece^B

11-18-2012 04:16 PM

It's only the info base I want into columns.

Lynne

11-18-2012 05:05 PM

You didn't change it to put the id in front of all that code.

Code:

#cat51 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {

    border-top: 0 none;

}

#cat51 .forumrow .table {

    height: 100px;

}

#cat51 ol.childforum {

    float: left;

    margin: 0;

    padding: 0;

    width: 100%;

}

#cat51 .childforum li.forumbit_post {

    clear: none;

    float: left;

    margin: 0;

    padding: 0;

    width: 50%;

}

#cat51 #forums .L1 .L2 {

    clear: none;

}

#cat51 .forumbit_post .forumrow .forumlastpost {

    clear: both;

    width: 95%;

}

#cat51 .forumbit_post .forumlastpost .lastpostby {

    display: block;

    float: left;

}

#cat51 .forumbit_post .forumlastpost .lastpostdate {

    display: block;

    float: right;

}

#cat51 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat51 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

}

#cat51 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat51 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

}

Reece^B

11-18-2012 06:30 PM

Thanks Lynne, it works! :D

Would you happen to know if I can remove the 'Threads / Posts Last Post' from the top bar of the category name?

Also what CSS would I need to use to make that look like the main site.

Thanks again

Lynne

11-19-2012 03:36 PM

Quote:

Originally Posted by Reece^B (Post 2382263)

Just add something like #cat51 .forumthreadpost {display: none;} for the stuff you don't want (do similar for Last Post).

As for formating the blocks, you'll just have to trial and error the CSS for that. firebug is a great tool for that because you can add it right there and see if it works.

Reece^B

11-20-2012 07:14 PM

Thanks Lynne, how can I move the titles/subtitles to the right so the image isn't overlapping?

Also is there a way to remove the RSS little logo and the green tick?

Lynne

11-20-2012 09:30 PM

Just something like:

HTML Code:

.forumbit_post .foruminfo .forumdata .datacontainer {

    padding-left: 140px;

    width: 80%;

}

Personally, I'd look into redoing the template for that category. And, I'd set the forums to have a min-width so users can't make their browsers small and 'break' the look. It's not going to be a 2 minute job, it's going to take some effort. And you can remove the RSS logo and green tick just by going what I posted above and setting display to none for that category.

Click on the W3Schools link in my sig for a great site for CSS help.

Easy5s.net

11-30-2012 01:37 PM

pls help x columns like this mod: https://vborg.vbsupport.ru/showthread.php?t=99829

CybertronWizard

12-01-2012 11:26 PM

Thanks man..Using on my forum...

felixR

12-08-2012 03:42 AM

Awesome Lynne!

I still get the comma in my subforum list though even after I added in:

.commalist li.subforum:after {
content:"";
}

Edit:

Nevermind :) Thanks again.

setishock

04-18-2013 03:37 PM

I stuffed in the code in the additional css and it works better than last time I try it. I was on 4.1.2 now on 4.1.2 pl8.

So to make the double column affect just one category just add the line with the cat number edited in? Just that simple?

Lynne

04-18-2013 04:13 PM

Quote:

Originally Posted by setishock (Post 2417168)

Yep, just add the catid.

Reece^B

06-12-2013 05:50 AM

Does anyone know how to adjust height?

Lynne

06-12-2013 04:02 PM

You would use the height property (which is shown in many of the CSS rules).

Reece^B

06-12-2013 07:05 PM

1 Attachment(s)

My current code is:

Code:

#cat51 .forumhead + .childforum .L2:first-child .forumrow, #cat51 .forumhead + .L2 .forumrow {

    border-top: 0 none;

    height:100px;

}

#cat51 .forumrow .table {

    height: 100px;

}

#cat51 ol.childforum {

    float: left;

    margin: 0;

    padding: 0;

    width: 100%;

}

#cat51 .childforum li.forumbit_post {

    clear: none;

    float: left;

    margin: 0;

    padding: 0;

    width: 50%;

}

#cat51 #forums .L1 .L2 {

    clear: none;

}

#cat51 .forumbit_post .forumrow .forumlastpost {

    clear: both;

    width: 95%;

}

#cat51 .forumbit_post .forumlastpost .lastpostby {

    display: block;

    float: left;

}

#cat51 .forumbit_post .forumlastpost .lastpostdate {

    display: block;

    float: right;

}

#cat51 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat51 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

height:100px;

}

#cat51 .forumbit_post .forumlastpost .lastposttitle {

    display: block;

    float: left;

}

#cat51 .forumbit_post .foruminfo {

    clear: right;

    float: left;

    min-width: 50%;

    width: 70%;

}

#cat51 .forumbit_post .forumstats, #cat51 .forumbit_post .forumstats_2 {

    width: 20%;

    height:100px;

}

#cat51 .forumthreadpost {display: none;}

#cat51 .forumlastpost {display: none;}

#cat51 .forumactionlinks {display: none;}

#cat51 .forumbit_post .foruminfo .forumdata .datacontainer {

    padding-left: 140px;

    width: 80%;

}

The code in red is the height i've added, which has given me the correct height. (I don't know if this is in the right location?)

However if you see the screen attached the columns aren't evenly spaced. How do I do this?! I keep trying to no avil.

Lynne

06-12-2013 07:55 PM

You have some which naturally want to be taller than 100px. So, you need to pick something larger, like 120px to make them all the same height. Or, you need to set the overflow to hidden, but then some text may disappear.

Reece^B

06-28-2013 06:52 PM

1 Attachment(s)

How can I move that text so it's not over lapping?

K4GAP

06-29-2013 03:28 AM

Is anyone using this on 4.2.1 ?

Reece^B

06-29-2013 05:37 AM

yes

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

Page 5 of 6

« First

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01850 seconds Memory Usage 1,871KB 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 (2)bbcode_html_printable (1)bbcode_php_printable (14)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: