Problem/Motivation

The Node Subpages Menu Bar block displays the "tabs" as an unordered list.

Proposed resolution

The module should include default CSS to style the unordered list as basic tabs. Site themers can accomplish this now by writing their own CSS targeting the list in that block.

User interface changes

Stylistic only

Original report by ds1964

I'm still getting used to D7, so apologies if this is a very basic question, but I'm not sure what to do where the instructions say "Place the tab bar on the page." I've got a subpage block working properly but can't figure out how to make tabs show up on the page itself.

Thanks for any help.

CommentFileSizeAuthor
#12 node_subpages.patch2.8 KBinders
#12 hptours_com_node_pages_tabs.png8.23 KBinders

Comments

BrockBoland’s picture

BrockBoland commented

The "tab bar" refers to the Node Subpages Menu Bar block, which (I think?) you've placed on the page. I think I need to clarify this section better:

Place the tab bar on the page. A block called Node Subpages Menu Bar, when placed on a node page, will display links for each subpage for that node.

Perhaps the first sentence should be bolded or something to make it clear that that's what needs to happen, and the second sentence explains how to make it happen. If you have any suggestions on this, I'm all ears.

In any case, the tabs should appear in that block when you're viewing a node. Note that tabs for Field content will only be shown if the node being viewed has content for that Field, so double check that you've got some text in the field.

If that doesn't help, please provide some more details about your setup so we can get you up and running.

ds1964’s picture

ds1964 commented

Thanks for the quick response. I did indeed place the Node Subpages Menu Bar on the page (in the Content region in Bartik). It shows up there, but as a simple bullet list, not as tabs. Is there any additional styling, or anything else display wise, that needs to be done for the tabbed display?

Regarding the clarification to the instructions, how about:

"Place the tab bar on the page using the Node Subpages Menu Bar block, which will be available on the Drupal Blocks administration page. When placed on a node page, this displays links for each subpage for that node."

BrockBoland’s picture

BrockBoland commented
Title: Can't Get Tabs to Show Up on Page » "Tabs" don't display as tabs
Version: 7.x-1.0-alpha1 » 7.x-2.x-dev
Category: support » feature

I like your version, and I hope it's OK that I stole it ;-)

As for the tabs: I never considered my wording. You're right, it does just print out an unordered list. In the sites where I've used the module, I've styled that list to look like tabs, but the CSS to do so isn't included.

So, I'm changing this issue to add default CSS to style these as tabs.

BrockBoland’s picture

BrockBoland commented
Issue summary: View changes

Updated to include new plan

ds1964’s picture

ds1964 commented

Sounds good. Any thoughts on how to get basic tabs styling done would be appreciated. Perhaps hook into the basic node tab styling that comes with the vertical/horizontal tabs through field groups somehow?

Glad to contribute to the instructions.

BrockBoland’s picture

BrockBoland commented

You might be able to re-use some of that code, but getting them to fall into tabs is pretty straightforward, and you will probably want to style them further so that they look good in your theme. This might be a good starting point: http://www.alistapart.com/articles/taminglists/

ds1964’s picture

ds1964 commented

I'll check that out. Thanks again.

ds1964’s picture

ds1964 commented

It occurred to me that the revised wording for the tab bar might still be unclear, particularly for people who aren't familiar with how tab bars are created using lists and CSS. Maybe it should be changed to something like:

"Place the tab bar on the page using the Node Subpages Menu Bar block, which will be available on the Drupal Blocks administration page. When placed on a node page, this displays links for each subpage for that node. The links can be used as is or styled as tabs to match your theme. See http://www.alistapart.com/articles/taminglists/ for more information."

Hope this suggestion is useful.

BrockBoland’s picture

BrockBoland commented

Actually, my intention was to fix just that, so that the tabs DO display like tabs. I'm going to add CSS to the module so that, out of the box, it will look halfway decent. Site admins will still be able to style them however they want to.

ds1964’s picture

ds1964 commented

Great. Thanks for the clarification. Still learning how the support/feature request process works.

inders’s picture

inders commented
Issue tags: +CSS, +tabs, +node
StatusFileSize
new hptours_com_node_pages_tabs.png8.23 KB
new node_subpages.patch2.8 KB

Attached CSS patch file to address this issue. Also attached screenshot after attaching CSS. Hope it would be helpful.

Thanks

BrockBoland’s picture

BrockBoland commented

@inders: I really appreciate your willingness to contribute to the project and don't want to discourage you from doing so in the future, but there are a few problems with this path:

  • Most importantly, a submitted patch should ONLY address the issue in question, not several different bugs and features at once. This makes it easy to review a patch, and keeps the discussion around implementation details separated out into the appropriate issues.
  • For the view mode (which is really #1429368: Content plugin: node view modes): the intent there was to allow the content admin to choose an existing view mode, rather than defining a new one explicitly for this use.
  • For the renderable array (#1602258: Allow plugins to return renderable arrays for subpage content) and different field types (#1671424: Content plugin: node reference): this part looks pretty good. I'll test out that part of the patch and consider adding them separately.
  • And finally: the CSS file (theme-default.css) wasn't actually included in the patch file.
BrockBoland’s picture

BrockBoland commented
Status: Active » Fixed

Added basic CSS in http://drupalcode.org/project/node_subpages.git/commit/50c8fe9

To override this in your theme, add a node_subpages.css file to your theme, and then define it in your .info file:

stylesheets[all][] = node_subpages.css

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) commented
Issue summary: View changes

Fixed username