The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.



Post new topic Reply to topic  Page 1 of 1
  [ 17 posts ] 
  Print view Previous topic | Next topic 
Author Message
jorgeabreu_007
 Post subject: Editing my CSS template
PostPosted: Tue Apr 03, 2012 5:40 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Apr 03, 2012 5:31 pm
Posts: 3
Hi,

I'm trying to change my site background-color for each different menu item I click. Does anyone know how to do that? I tryed to change the CSS li.item1 a{ ... } but I don´t know how to set the body background color from another "clas"...

Thanks!
Top
 Profile  
 
float-right
PostPosted: Fri Apr 06, 2012 7:50 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
Pretty sure you cannot do this with just CSS. You could use some .js to append a class to the body element when a menu item was clicked and then target that in your CSS. Should be fairly easy with some basic jquery.

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Per Yngve Berg
PostPosted: Fri Apr 06, 2012 9:28 pm 
Joomla! Master
Joomla! Master

Joined: Mon Oct 27, 2008 9:27 pm
Posts: 13613
Location: Akershus, Norway
Sure it can be done in css.

Use the pseudo classes:
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over

Code:
li.item1 a:visited { ... }
li.item1 a:active { ... }
li.item1 a:link { ... }


http://www.w3schools.com/css/css_pseudo_elements.asp
Top
 Profile  
 
float-right
PostPosted: Fri Apr 06, 2012 10:24 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
I think the OP wants to change the background colour of the whole site, i.e. the body element, based on the clicked on menu item not the menu item link colour ;)

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Webdongle
PostPosted: Fri Apr 06, 2012 10:34 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Sat Apr 05, 2008 9:58 pm
Posts: 23361
Location: @Webdongle
Use Firefox with Firebug to see the css used.

_________________
http://weblinksonline.co.uk/joomla-faq.html
Top
 Profile  
 
float-right
PostPosted: Fri Apr 06, 2012 11:12 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
Webdongle wrote:
Use Firefox with Firebug to see the css used.


?

Used where? He is asking how to set the background of his website differently for each menu item.

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Webdongle
PostPosted: Sat Apr 07, 2012 12:00 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Sat Apr 05, 2008 9:58 pm
Posts: 23361
Location: @Webdongle
float-right wrote:
...
Used where? He is asking how to set the background of his website differently for each menu item.

Firefox and Firebug show the css of the outputted file. Using them will show which css class(or id) the menu item is using.

_________________
http://weblinksonline.co.uk/joomla-faq.html
Top
 Profile  
 
float-right
PostPosted: Sat Apr 07, 2012 6:17 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
You're right, but that will not be any help in achieving what the poster wants to do.

I think Per has misunderstood the OP's aim, or indeed I have.

I don't believe the background rule of the body element can be related to the menu item ID active state without using JavaScript to dynamically set a target class on the body element.

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Per Yngve Berg
PostPosted: Sat Apr 07, 2012 6:30 am 
Joomla! Master
Joomla! Master

Joined: Mon Oct 27, 2008 9:27 pm
Posts: 13613
Location: Akershus, Norway
Yes it can. Add a Page Class Suffix on the menu item and add the suffix to the body class.
Top
 Profile  
 
float-right
PostPosted: Sat Apr 07, 2012 6:52 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
And how do you change the body class when a different menu item is clicked on?

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
float-right
PostPosted: Sat Apr 07, 2012 7:05 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
I think I see where you are going with this now (sorry, still on first coffee). Do you mean creating multiple body rules in the CSS each with a descendant page class selector and different background rule?

Perhaps a code example would help clarify this for the OP?

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
float-right
PostPosted: Sat Apr 07, 2012 8:42 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
The page class is appended to the component output so I cannot see how you could use it to target the parent body element. You can target the child element (e.g. <section.featured-items .black> like that but not the parent.

While pondering this I have of course missed an obvious possibility. You can assign another version of the template to the menu item and have a different background set in your duplicate of the template.

Personally, because of the performance hit of loading a new template with each menu item I would still go the jQuery route and dynamically append page class to the body element.

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Webdongle
PostPosted: Sat Apr 07, 2012 11:20 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Sat Apr 05, 2008 9:58 pm
Posts: 23361
Location: @Webdongle
There are several plugins but http://extensions.joomla.org/extensions ... ating/9767 may be of interest ?

_________________
http://weblinksonline.co.uk/joomla-faq.html
Top
 Profile  
 
jorgeabreu_007
PostPosted: Sat Apr 07, 2012 1:24 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Tue Apr 03, 2012 5:31 pm
Posts: 3
Thanks for all replies! I'm gonna try the js query. Where should insert the js code? Inside the index.php?
Top
 Profile  
 
Webdongle
PostPosted: Sat Apr 07, 2012 1:41 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Sat Apr 05, 2008 9:58 pm
Posts: 23361
Location: @Webdongle
It may be tidier to put it in a /js folder in your Template's directory then reference it from the Template's index.php. If you do it it that way make sure you do Not use hard coded paths, use the code for paths to css files as an example.

_________________
http://weblinksonline.co.uk/joomla-faq.html
Top
 Profile  
 
Per Yngve Berg
PostPosted: Sat Apr 07, 2012 5:40 pm 
Joomla! Master
Joomla! Master

Joined: Mon Oct 27, 2008 9:27 pm
Posts: 13613
Location: Akershus, Norway
The body tag is in your template. Use this code to add the page class suffix to it.

Code:
<body class="<?php echo $this->pageclass_sfx?>">
Top
 Profile  
 
float-right
PostPosted: Sat Apr 07, 2012 8:13 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Wed Jun 02, 2010 12:16 pm
Posts: 469
Yes!! I like your style Sir!

The simple solution is always the best one; thank you for reminding me of that.

Off now to eat some humble pie ;)

_________________
Top-tip: marking your posts as "Urgent!", when they clearly aren't, will most likely get you ignored.

Please don't PM me with anything other than *Personal Messages*! If you have a Joomla question, post it in the forum.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 17 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Who is online

Users browsing this forum: enbees, Google [Bot] and 19 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group