Add a body ID and class to all pages
|Assignee:||Eric Davis||% Done:|
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 : )
#2 Updated by Jean-Philippe Lang over 9 years ago
It could be convenient indeed. But I see a clash with the "account" div defined in
<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 ?
#3 Updated by Ale Muñoz over 9 years ago
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.
#4 Updated by Ale Muñoz over 9 years ago
- File redmine_add_body_id_and_css_fixes.patch added
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
#6 Updated by Eric Davis over 7 years ago
- 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