Drupal 7's default admin theme (Seven) has some pretty awesome-looking vertical tabs for forms. I went ahead and ported them to quicktabs.

To install:

  1. Download the attached seven.txt file and rename it to seven.css
  2. Place the seven.css file in /(module dir)/quicktabs/quicktabs_tabstyles/tabstyles/seven
  3. Copy /themes/seven/images/fc.png to /(module dir)/quicktabs/quicktabs_tabstyles/tabstyles/seven/images

Enjoy!

CommentFileSizeAuthor
#9 Style Preview.PNG13.31 KBChiKam
#5 seven_tabstyle.zip1.37 KBjpklein
seven.txt2.57 KBjpklein

Comments

jcassano’s picture

jcassano commented

I tried to test this, following these instructions, but I just ended up with unstyled tabs. Cleared cache etc.

jpklein’s picture

jpklein commented

Did you enable the Quicktabs Styles module? Did you enable the "Seven" style via the Settings panel at admin/structure/quicktabs/styles?

jcassano’s picture

jcassano commented
Status: Needs review » Active

I had done that but something else was screwing up. Got it working now. Thanks for doing this. Looks great and works well.

jpklein’s picture

jpklein commented
Status: Active » Needs review
jpklein’s picture

jpklein commented
Status: Active » Needs review
StatusFileSize
new seven_tabstyle.zip1.37 KB

Uploading an archive of the new tabstyle (including the png image) for easier installation/review.

scott m. sanders’s picture

scott m. sanders commented

Somehow we ended up using this over Navlist -- so thanks!

webthingee’s picture

webthingee commented

This idea is a good one, during my testing I found that the css is a little to specific, and would need some adjustment to be fully functional for an implementation.

A few notes:
Specific width of left side would only work in large content areas.
Borders do not line up quite right

pirog’s picture

pirog commented

Hey guys, check out #1862492: Vertical Tab rendered

Just posted a patch for a Vertical Tab renderer.

ChiKam’s picture

ChiKam commented
StatusFileSize
new Style Preview.PNG13.31 KB

Hi,

I like this vertical tab styles. However, there is some issue with the tabstyles preview (see attached). Is there a way to fix it? Thanks!

ultimateboy’s picture

ultimateboy commented
Version: 7.x-3.3 » 7.x-3.x-dev
Issue summary: View changes
Status: Needs review » Needs work

Without a properly formatted patch, there is nothing to review.

I'm not against adding quicktab styles to the module, but will only consider it with properly formatted patches.

Thanks.

RumpledElf’s picture

RumpledElf commented

Just thought I'd toss in my 2c and say if you turn on the quicktabs styles module you get a vertical style option (navlist) and you can css that up very nicely without much difficulty. Very easy to swap it from left to right etc.

smustgrave’s picture

smustgrave commented
Status: Needs work » Closed (outdated)

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue.

If still an issue or needed for 4.0.x (latest branch) feel free to reopen