Different background for different menu items

Joomla template for easily build sports magazine website with advanced content display features and clean, unique design.
GK User
Sun Apr 20, 2014 9:47 pm
Hello guys,

I am trying to set different background for different menu items. I have defined suffix for menu item id (313 in my case), and have defined css style (different-bg). Than when css style did not affect background change when opening menu item 313, I have realized that suffix is added for <body> section (red on image), and background is in template defined in <div> contained inside <body> (yellow on image).

I need your help in how to make suffix I define in template features settings affect background changing on specific menu item.

Appreciate your help guys!

Attaching some images for better understanding!

Waiting for your answer! Thanks!
User avatar
Senior Boarder

GK User
Sun Apr 20, 2014 10:44 pm
Could you give me your site URL ? It is always easier to check CSS/HTML code on live site.
User avatar
Platinum Boarder

GK User
Mon Apr 21, 2014 10:42 am
Hello.

Of course, my website URL is http://e-tribina.com

Please check menu item Rezultati uživo -> Košarka, I have assigned suffix "different-bg" to it.

Thanks!
User avatar
Senior Boarder

GK User
Tue Apr 22, 2014 10:00 am
Maybe I'm blind but I just can't see the menu on your website :) please have a look screenshot screenshot
User avatar
Platinum Boarder

GK User
Wed Apr 23, 2014 6:49 am
Hello.

It is so big that it is unable to miss it. ;D Firstly, just choose any of four sections (one of four squares) on home page, than menu will be shown on its place. Alternatively, use this link http://e-tribina.com/rezultati/kosarka . :)

Waiting for your response.

Thanks!
User avatar
Senior Boarder

GK User
Thu Apr 24, 2014 8:19 am
Ok, I don't see any code related to this suffix in your override.css so please add this code to override.css file in root/templates/gk_template_name/css directory :
Code: Select all
body.different-bg > .bg { background: red }

and then just remember to enable "Use override CSS" option in template advanced settings tab. This will set red background for pages with suffix, then you can change red value to URL to your background file. After adding the code you should see your website like on this screenshot » screenshot
User avatar
Platinum Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.