Patch #819
closed
Add a body ID and class to all pages
Added by Ale Muñoz almost 17 years ago.
Updated over 14 years ago.
Description
This is extremely useful for CSS styling, as it allows us theme writers to target specific pages/sections.
It will also allow for a cleaner/easier menu styling (patch coming soon : )
Files
It could be convenient indeed. But I see a clash with the "account" div defined in base.rhtml
:
<div id="account">
<%= render_menu :account_menu -%>
</div>
Since account is also a controller's name, this would cause a duplicate id in the rendered html.
Class names may also be already in use for something else (eg. list which is also an action name).
Could we prefix the controller and action name instead ? Maybe something like that:
<body id="ctrl_<%= @controller.controller_name >" class="action_<= @controller.action_name %>">
What do you think ?
Another (less nice) option is to use id="<%= @controller.controller_name >_<= @controller.action_name %"
The only problem I see with this method is you cannot easily style all pages that belong to a controller.
Also, you could rename the "account" DIV with a less problematic (and probably more semantic) "account_menu".
I'll prepare a patch for this later option. It's an easy change, and the benefits of having a common ID for pages produced by the same controller are well worth the effort.
Here's a patch that adds @<body id="<%= @controller.controller_name %>" class="<%= @controller.action_name %>">
@ and renames all DIVs with IDs that conflict with the new body IDs.
It also changes the global CSS to make sure nothing loses its current styling.
It applies to r1223
One note, though.
I have not checked for every element with CLASS="action_name" for every controller.
I'll check for this next week and will submit a patch if it's needed.
- Status changed from New to Resolved
- Assignee set to Eric Davis
- Target version set to 1.0.1
- % Done changed from 0 to 100
I had a similar idea but I also included the theme name. This will make it much easier for css to target specific pages and also make theme-specific css easy.
<body class="controller-settings action-edit">
<body class="theme-Alternate controller-issues action-show">
Committed in r3911
- Status changed from Resolved to Closed
Merged to 1.0-stable for release in 1.0.1.
Also available in: Atom
PDF