• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 How to improve the standard tabs?

Stuart Wright

Well-known member
#1
The standard Xenforo tabs are pretty simple and work just fine provided there aren't too may of them.
But in several places on AVForums (user profiles for moderators, Xen Media Gallery, forthcoming editorial enhancements), there are too many tabs and we end up with two rows which completely defeats the design principle.
Does anyone have a general solution to this problem? How do we cater for 10 tabs when there is room for only 7?
1.jpg
 

Chris D

XenForo developer
Staff member
#3
Taking the bold font off the tabs is a good start. Maybe you could apply the bold to the active tab only because otherwise there's not a lot to distinguish the active and non active tabs.

Also it's worth noting that normal users won't see the Usernotes tab so to a certain extent, the issue is less of an issue globally.

Consider changing the titles of the tabs too:

Profile Posts
Activity
Postings
Info
Bookmarks
Reviews
Notes (0)
Trading
Media
Albums
 

Stuart Wright

Well-known member
#5
I actually want to make the font larger in tabs in order to make them more important and obvious.
Renaming tabs is not really a great option either as our editorial will require several tabs.
I was thinking about suggesting something like the scrolling page nav, but then it's obvious what the hidden page nav elements do and in contrast, tabs need to be seen. Also scrolling a tab 'slider' would add an additional click which would be unfriendly.
I am looking for a new solution, but creating vertical tabs makes the width of the content area even narrower. That wouldn't work on your media gallery, would it, Chris?
 

Andrej

Well-known member
#7
Perhaps you could replace the text with icons, such as Font Awesome? Another idea would be turning the tabs into a menu (or a 'more' menu after x tabs showing the rest).
Снимок экрана 2014-09-28 в 2.24.53.png
 

Harpers Tate

Well-known member
#8
Perhaps you could replace the text with icons, such as Font Awesome....
which would render them meaningless, as is the case with all icons that have no accompanying text.

And I had to chuckle to myself at Brogan's suggestion of "A wider site width" (It's an "in joke").

Is it possible to make the text wrap in the tabs so long(er) titles run 2 or more rows at the expense of some height - which could be mitigated by less top/bottom padding if necessary?
 

Stuart Wright

Well-known member
#9
Maybe we could have it so that multiple worded tabs are split into two lines.
Also maybe we could have it so that the tabs are forced to all fit on to one line, with word which don't fit being truncated with an ellipsis and title text for the word available on mouse over?
 

Stuart Wright

Well-known member
#13
I can't imagine that idea not looking hideous. (No offence).
None taken. As Brogan says, it's two rows and we virtually posted the same idea at the same time.
Microsoft used to have multiple rows of tabs in their programs. When you select a tab from a higher up row, that row of tabs would be moved to the lowest position so that visually, the selected tab 'connects' with the content under it.
This is really confusing, though, having the rows move about.
So without moving the rows, how do you connect the top row to the content. My mock up above is, as Chris says. pretty hideous, but it's the principle which I wonder whether a good designer could make work?
 
Last edited:

ge66

Active member
#14
I actually don’t have much of an opinion about all this but thought I would share an image of two rows of tabs, from windows.

Skärmbild från 2014-09-28 21:34:19.png