Patch #819


Add a body ID and class to all pages

Added by Ale Muñoz over 15 years ago. Updated about 13 years ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:


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 : )


redmine_add_body_id.patch (546 Bytes) redmine_add_body_id.patch This patch adds the current controller name as the body ID, and the controller action as the CLASS Ale Muñoz, 2008-03-09 16:59
redmine_add_body_id_and_css_fixes.patch (1.95 KB) redmine_add_body_id_and_css_fixes.patch Ale Muñoz, 2008-03-09 20:29

Related issues

Has duplicate Redmine - Feature #5547: Add class of controller+view (home_welcome) to body of pageClosed2010-05-18

Actions #1

Updated by Ale Muñoz over 15 years ago

This applies to r1217

Actions #2

Updated by Jean-Philippe Lang over 15 years ago

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 -%>

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:

&lt;body id="ctrl_<%= @controller.controller_name >" class="action_<= @controller.action_name %>">

What do you think ?

Actions #3

Updated by Ale Muñoz over 15 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.

Actions #4

Updated by Ale Muñoz over 15 years ago

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

Actions #5

Updated by Ale Muñoz over 15 years ago

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.

Actions #6

Updated by Eric Davis about 13 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

Actions #7

Updated by Eric Davis about 13 years ago

  • Status changed from Resolved to Closed

Merged to 1.0-stable for release in 1.0.1.


Also available in: Atom PDF