1. 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?

Discussion in 'Styling and Customization Questions' started by Stuart Wright, Sep 27, 2014.

  1. Stuart Wright

    Stuart Wright Well-Known Member

    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?
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Less tab title text?
    Smaller text?
    Smaller tabs - less padding?
    A wider site width?
    thedude, PAPPACLART and Chris D like this.
  3. Chris D

    Chris D XenForo Developer Staff Member

    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
    Notes (0)
  4. Brogan

    Brogan XenForo Moderator Staff Member

  5. Stuart Wright

    Stuart Wright Well-Known Member

    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?
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Place them in the left sidebar.
  7. Andrej

    Andrej Well-Known Member

    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
  8. Harpers Tate

    Harpers Tate Well-Known Member

    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?
  9. Stuart Wright

    Stuart Wright Well-Known Member

    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?
  10. Stuart Wright

    Stuart Wright Well-Known Member

    I don't like the exact look of this, but could the idea be developed?
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Why not just have two rows of tabs?
  12. Chris D

    Chris D XenForo Developer Staff Member

    I can't imagine that idea not looking hideous. (No offence).
  13. Stuart Wright

    Stuart Wright Well-Known Member

    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: Sep 29, 2014
  14. ge66

    ge66 Active Member

    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
  15. EQnoble

    EQnoble Well-Known Member

    To answer your question, this (your example as well as ge66's) can be done if you want to spend the time/money doing it.
  16. Stuart Wright

    Stuart Wright Well-Known Member

    I guess when you click, say, Devices, the top and bottom rows of tabs swap places?

Share This Page