• Registered: 2011-06-15
  • Posts: 3

Topic: Different CSS format for actions on the same object

I think this is a very simple thing but as a newb I just can't seem to figure it out....

All I am doing is trying to change the background color on the active link - which is working just fine for most pages.  The problem I'm having is for the links that use named routes and point to different actions on the same object (edit a user and show a user).  I can't figure out the CSS syntax for that.  Appreciate the help!

Application Layout:
%nav
        %ul
          %li= link_to 'Home', root_url, :class => 'home'
          - if signed_in?
            %li= link_to 'Profile', current_user, :class => 'profile'
            %li= link_to 'Settings', edit_user_path(current_user), :class => 'settings'
          %li= link_to 'Products', products_url, :class => 'products'
          %li= link_to 'Charts', charts_url, :class => 'charts'

Working CSS:
.home #top_header nav a.home,
.products #top_header nav a.products,
.charts #top_header nav a.charts,
.users #top_header nav a.profile,
.accounts #top_header nav a.accounts {
  background-color: #333;
}

Not Working CSS:
.users .edit #top_header nav a.settings {background-color: #333}

Last edited by trac0328 (2011-06-17 11:19:14)

  • Registered: 2011-06-17
  • Posts: 17

Re: Different CSS format for actions on the same object

There's a missing ";" from what I've seen ^^

.users .edit #top_header nav a.settings {background-color: #333;}

Last edited by UsagiMD (2011-07-11 15:07:51)

  • Registered: 2011-06-15
  • Posts: 3

Re: Different CSS format for actions on the same object

Thanks for the tip - unfortunately that still didn't solve my problem.

  • From: Chile
  • Registered: 2010-11-21
  • Posts: 277

Re: Different CSS format for actions on the same object

when you have just one attribute on CSS you cna leave it withoud ending ;
so {background-color: #333} or {background-color: #333;} are correct

I cant see where you use

.users .edit #top_header nav a.settings {background-color: #333}

in your app layout

Last edited by jtomasrl (2011-07-12 12:11:34)

  • Registered: 2011-06-15
  • Posts: 3

Re: Different CSS format for actions on the same object

Yes, that is where I am having a problem.  I just don't know how to tell the CSS that I want a different link highlighted when I'm editing a user (Settings) versus when I'm viewing the user (Profile).  In my app layout, these are the two lines that are both using the user object:

%li= link_to 'Profile', current_user, :class => 'profile'
%li= link_to 'Settings', edit_user_path(current_user), :class => 'settings'

The Profile page is working correctly, the Settings page still has the Profile button highlighted instead of the Settings button.

Does that clarify the issue? 

Maybe I'm approaching this the wrong way - even better would be if there was a way to programmatically highlight the button that was the active page, without having to explicitly define a CSS class for each link!

Thanks again for trying to assist.

  • From: Chile
  • Registered: 2010-11-21
  • Posts: 277

Re: Different CSS format for actions on the same object

first of all, CSS doesnt work with object names, it work with class and id, so your CSS should be

. for class
# for id

.profile { CSS CODE }
.setting { CSS CODE }

if you want all links have the same attributes you should make

a { CSS }
a:hover { CSS }
a:active { CSS }

or mix them

.profile a { CSS }
.profile a:hover { CSS }

Last edited by jtomasrl (2011-07-12 12:29:15)