Tutorial: Sub Forum Grid Listing...

Bob · Jun 26, 2011

Eliteoomph said:
That's where I was looking... forums/styles/default/xenforo/?
is it a standalone css file or is it embedded css within a html/php file?

Log into your Admin Control Panel...

Appearance >> Styles >> Templates (for the style you wish to work on) >> EXTRA.css

Templates are stored in the Database, they are not "files" within the file system. You can however access them as sudo file via WebDav

Eliteoomph · Jun 26, 2011

thanks guys... found it! not used to working with DB's yet...

principia · Jun 26, 2011

Don´t forget to do it for every style you are using. every style has a own extra.css.

Eliteoomph · Jun 26, 2011

thanks

right now all i have is the default style

Paul B · Jun 26, 2011

principia said:
Don´t forget to do it for every style you are using. every style has a own extra.css.

Child styles will inherit the contents of EXTRA.css from the parent style.

principia · Jun 26, 2011

Brogan said:
Child styles will inherit the contents of EXTRA.css from the parent style.

Ah, thanks for the info.

yavuz · Jun 26, 2011

It would be awesome if anyone would make an addon out of this...

KevinLiles · Jul 3, 2011

Would you be able to share your code?

bobster65 said:
Been wanting to mess with this and finally had time this AM.. did mine a little different. Only wanted the Sub Forum Grids on 2 forums and the rest remaining default xenforo. Also wanted 64 (32 new, 32 old) images for each of the 32 sub forums. Still have some tweaking that I want to do, but its coming along nicely Each Team uses 2 images (node_id-new.png and node_id-old.png).

View attachment 12329

KevinLiles · Jul 3, 2011

I got it now!

Toxic · Jul 20, 2011

Another Excellent Thread!

MoGuri · Jul 29, 2011

KevinLiles said:
Would you be able to share your code?

Can i get a copy? Im Really interested in this type

dtmcl · Aug 1, 2011

Hmm..

I just tried following the guide step by step and it results in this oddity:

Bob · Aug 1, 2011

ShadyX said:
Hmm..

I just tried following the guide step by step and it results in this oddity:

5 columns is not appropriate for your longer titles.. id go with 4 columns (or maybe even 3)..

change this: .subForumsGrid .node { width: 20%; float: left; }
to this for 4 columns: .subForumsGrid .node { width: 25%; float: left; }
to this for 3 columns: .subForumsGrid .node { width: 33%; float: left; }

Lucas · Aug 17, 2011

Would anyone be able to give me a hand? I'm trying to make the forums look similar in width, but they look disorganized, there's more spacing to some than others. Please see: http://gunero.com/

Thanks!

Bob · Aug 17, 2011

Lucas said:
Would anyone be able to give me a hand? I'm trying to make the forums look similar in width, but they look disorganized, there's more spacing to some than others. Please see: http://gunero.com/

Thanks!

change this: .subForumsGrid .node { width: 20%; float: left; }
to this for 4 columns: .subForumsGrid .node { width: 25%; float: left; }
to this for 3 columns: .subForumsGrid .node { width: 33%; float: left; }

Lucas · Aug 18, 2011

bobster65 said:
change this: .subForumsGrid .node { width: 20%; float: left; }
to this for 4 columns: .subForumsGrid .node { width: 25%; float: left; }
to this for 3 columns: .subForumsGrid .node { width: 33%; float: left; }

Changed, it looks a bit better but there is still lots of space between Feedback and Community Polls.

Bob · Aug 18, 2011

Lucas said:
Changed, it looks a bit better but there is still lots of space between Feedback and Community Polls.

its 4 equal column widths. Your Titles are all different lengths.. of course there is going to be a difference in spacing between the words when they are different lengths with in each cell.

Here is an example: 4 equal width columns with different length data within the columns.... as you can see, the 4 columns are all the same width, it the data that isn't (which in your case,
feedback is a lot shorter than Community Pools

Feedback
Community Polls

1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0
1234_________ | 1 1 1 1 1 1 1 1___ | abcdefgdf_____ | ASKDJHASDKJ

1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0
Feedback______ | Community Polls | abcdefgdf_____ | ASKDJHASDKJ

Lucas · Aug 18, 2011

bobster65 said:
its 4 equal column widths. Your Titles are all different lengths.. of course there is going to be a difference in spacing between the words when they are different lengths with in each cell.

Here is an example: 4 equal width columns with different length data within the columns.... as you can see, the 4 columns are all the same width, it the data that isn't (which in your case,
feedback is a lot shorter than Community Pools

Feedback
Community Polls

1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0
1234_________ | 1 1 1 1 1 1 1 1___ | abcdefgdf_____ | ASKDJHASDKJ

1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0 | 1 2 3 4 5 6 7 8 9 0
Feedback______ | Community Polls | abcdefgdf_____ | ASKDJHASDKJ

Indeed, that is what I figured out originally, hence why I was looking at some help. I noticed that changing that would make equal columns but due to the different names it wouldn't work. I'm looking for a way the width can be kinda like appended to the end of each word depending on the length, or am I thinking of something really hard/complicated to do?

Jaxel · Aug 19, 2011

This is my current CSS...

Code:

.subForumsGrid { margin-right: 55px; }
.subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; padding: 5px 5px 5px 50px; }
.subForumsGrid .fullWidth { width: 100% !important; padding-bottom: 4px; }

.subForumsGrid .node { width: 25%; float: left; }
.subForumsGrid .node ol { padding-left: 15px; }
.subForumsGrid .node  a { padding: 5px 10px 5px 18px; }
.subForumsGrid .node .node a { padding: 0px 10px 1px 18px; }
.subForumsGrid .node .nodeTitle { font-size: 11px; white-space: nowrap; overflow: hidden; }
.subForumsGrid .node div,
.subForumsGrid .node div a:hover
{
    background-image: url('@imagePath/xenforo/widgets/read.png');
    background-repeat: no-repeat;
    background-position: 0px 50%;
}
.subForumsGrid .node div.unread,
.subForumsGrid .node div.unread a:hover
{
    background-image: url('@imagePath/xenforo/widgets/unread.png');
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

Lucas · Aug 20, 2011

Jaxel said:

This is my current CSS...

Code:

.subForumsGrid { margin-right: 55px; }
.subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; padding: 5px 5px 5px 50px; }
.subForumsGrid .fullWidth { width: 100% !important; padding-bottom: 4px; }

.subForumsGrid .node { width: 25%; float: left; }
.subForumsGrid .node ol { padding-left: 15px; }
.subForumsGrid .node  a { padding: 5px 10px 5px 18px; }
.subForumsGrid .node .node a { padding: 0px 10px 1px 18px; }
.subForumsGrid .node .nodeTitle { font-size: 11px; white-space: nowrap; overflow: hidden; }
.subForumsGrid .node div,
.subForumsGrid .node div a:hover
{
    background-image: url('@imagePath/xenforo/widgets/read.png');
    background-repeat: no-repeat;
    background-position: 0px 50%;
}
.subForumsGrid .node div.unread,
.subForumsGrid .node div.unread a:hover
{
    background-image: url('@imagePath/xenforo/widgets/unread.png');
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

Thanks!

Tutorial: Sub Forum Grid Listing...

Well-known member

Member

Well-known member

Member

XenForo moderator

Well-known member

Well-known member

Member

Member

Member

Member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy