Patch #819

Add a body ID and class to all pages

Added by Ale Muñoz over 9 years ago. Updated over 7 years ago.

Status:ClosedStart date:2008-03-09
Priority:NormalDue date:
Assignee:Eric Davis% Done:

100%

Category:UI
Target version:1.0.1

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

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

redmine_add_body_id_and_css_fixes.patch Magnifier (1.95 KB) Ale Muñoz, 2008-03-09 20:29


Related issues

Duplicated by Redmine - Feature #5547: Add class of controller+view (home_welcome) to body of page Closed 2010-05-18

Associated revisions

Revision 3911
Added by Eric Davis over 7 years ago

Added css classes to the HTML body based on the theme, controller, and action. #819

History

#1 Updated by Ale Muñoz over 9 years ago

This applies to r1217

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

&lt;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

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

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

#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

#7 Updated by Eric Davis over 7 years ago

  • Status changed from Resolved to Closed

Merged to 1.0-stable for release in 1.0.1.

Also available in: Atom PDF