How to style text of selected menu item (atomic template)?

This board for support questions on Joomla 1.6 RC (= Release Candidate - which should NOT be used on a production server) is NO longer active because Joomla 1.6.0 has been released.

>> For Joomla! 1.6 Support Questions, please use http://forum.joomla.org/viewforum.php?f=614 instead <<
Locked
jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

How to style text of selected menu item (atomic template)?

Post by jzlcdh » Wed Nov 10, 2010 10:35 am

The template I use in Joomla 1.5 generates a "span" which I can style e.g.
<ul class="menu"><li id="current" class="active item9"><a href="http://localhost:81/"><span>Home</span>
---------------------------
.active span{
color: white;
}
------------------
which makes the text of the menu item the user is currently on show in white.

But the atomic template in Joomla 1.6 generates e.g.:
<li id="current" class="selected item101"><a href="/" >Home</a></li>
------------------------
I can see that I could use the "selected" class to style the background colour but without a "span" how can I style the text? Should I use the id in some way? I am hoping someone who is more knowledgeable about CSS than me will be able to advise (or is it a bug in the template?).

Regards

Geoff

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Mon Nov 22, 2010 7:24 am

I raised this as bug report #23297 but it has been classified as "not a bug".

So does anyone know the best place I could suggest this as an enhancement to the atomic template?

Alternatively what would be the best way for me to modify my own copy of the template to add the ability to style the menu text?

Regards

Geoff

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7897
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: How to style text of selected menu item (atomic template

Post by mcsmom » Sun Nov 28, 2010 8:15 pm

Why wouldn't you just use the id?

http://www.w3schools.com/css/css_id_class.asp
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Thu Dec 02, 2010 7:54 am

@mcsmom

Thanks for the suggestion to use "id". Would I have to modify the template in some way to get it to generate an id? At present the generated html has no "id": it looks like:

<ul class="joomla-nav">
<li class="item101"><a href="/" >Ana sayfa</a></li>
<li class="item102"><a href="/index.php/testnotf" >testnotf</a></li>
<li class="selected parent item103"><a href="/index.php/muevekkil-giris" >Müvekkil Giriş</a>
<ul> <li class="item105"><a href="/index.php/muevekkil-giris/user-reminder" >User Reminder</a></li>
<li class="item106"><a href="/index.php/muevekkil-giris/password-reminder" >Password Reminder</a></li>
<li id="current" class="selected item104"><a href="/index.php/muevekkil-giris/register" >Register</a></li></ul>
</li></ul>
</div>

(on a side issue - is there some way I can automatically receive an email when one of you kind people replies to my topic - as I do not look at this forum very often?)

Regards

Geoff

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Thu Dec 02, 2010 8:01 am

I should have said - the above html does have
id="current"
but when I add similar CSS to that shown in the example quoted

#current
{
color:red;
}

to the bottom of template.css it has no effect.

Regards

Geoff

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Thu Dec 02, 2010 8:41 am

(re side issue when I create a new topic I leave the default
set to notify me by email but although my email address is correct I amnot receiving them)

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7897
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: How to style text of selected menu item (atomic template

Post by mcsmom » Tue Dec 07, 2010 3:02 am

About the email, post a question in the sites and infrastructure forum, maybe they know what's going on.
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

Xtracted
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Thu Jun 17, 2010 1:31 pm
Location: Östersund, Sweden

Re: How to style text of selected menu item (atomic template

Post by Xtracted » Thu Dec 23, 2010 1:24 pm

Have you tried:

Code: Select all

.active a {
  color: #ffffff;
}
?

acc12
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Jan 08, 2011 2:05 pm

Re: How to style text of selected menu item (atomic template

Post by acc12 » Sat Jan 08, 2011 2:17 pm

Hi there,
seems I have a smiliar prob.
I want to highlight the active menu link, especially the ones in the submenu.
Therefore I defined the .active class in my css file.
But when I click in the parent menu link, all the links in the submenu are highlighted as well, as the class .active is inherited by the submenu links.
In other words, how can I define the highlight (by class or ID) so that only the current active link will be highlighted, without highlighting submenu links.
In 1.5. it was regulated by the ID current, but since 1.6. it has changed.
Appreciate the help.

Greets

acc12
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Jan 08, 2011 2:05 pm

Re: How to style text of selected menu item (atomic template

Post by acc12 » Sun Jan 09, 2011 10:15 am

acc12 wrote:Hi there,
seems I have a smiliar prob.
I want to highlight the active menu link, especially the ones in the submenu.
Therefore I defined the .active class in my css file.
But when I click in the parent menu link, all the links in the submenu are highlighted as well, as the class .active is inherited by the submenu links.
In other words, how can I define the highlight (by class or ID) so that only the current active link will be highlighted, without highlighting submenu links.
In 1.5. it was regulated by the ID current, but since 1.6. it has changed.
Appreciate the help.

Greets
Got it, went to the installed beez20 template css layout file and looked into it.

Code: Select all

ul li.active ul li.active a:link,
ul li.active ul li.active a:visited
{
        font-weight: normal;
		color: red;
}
did the trick.

Greetz

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Thu Jan 13, 2011 4:18 pm

Thanks for those comments but I am still bit confused (probably due to my poor knowledge of CSS). I am now testing on Joomla! 1.6.0 and I tried both the suggestions above but my menu item never appears red. When I view the page source are you saying I should see 'class="active"'? Because I do not.

Regards

Geoff
(P.S. now getting email notifications from this forum OK)

acc12
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Jan 08, 2011 2:05 pm

Re: How to style text of selected menu item (atomic template

Post by acc12 » Fri Jan 14, 2011 2:23 am

I actually modified the beez template, not the atomic like described in the topic.
Further, when you right-click in your browser i.e. Firefox and choose "view source", you should see the source code generated.
Last but not least, my CSS level is also on amateur, but I guess you have to put something like

Code: Select all

ul li.active a:link,
{
        font-weight: normal;
      color: red;
}
to highlight your menu in red, depends on the template. I actually am trying to create my own by looking things up, which come already in 1.6.

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7897
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: How to style text of selected menu item (atomic template

Post by mcsmom » Fri Jan 14, 2011 5:29 am

You probably want to install fire bug or another tool like that to really be able to see the css taht is being used.
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Fri Jan 14, 2011 7:27 am

Thanks for those suggestions. One reason I am using the Atomic template instead of another such as beez is because (as I am not skilled at design) I like using Blueprint to generate a website grid.

You are right Firebug seems a nice tool so as suggested I had a look with the Firebug Lite bookmarklet and it shows the following as part of the html:

<ul class="joomla-nav">
<li class="selected item101" id="current">
<a href="/index.php?lang=en">Home</a>
</li>
</ul>

So I cannot see how I could use an "active" class in the styling as it does not appear in the html. If I am right is there some way I could customize the Atomic template to add an "active" class into the above html?

Regards

Geoff

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Fri Jan 14, 2011 8:27 am

I just noticed that in

C:\joomla16\modules\mod_menu\tmpl\default.php

there is a clause

if (in_array($item->id, $path)) {
$class .= 'active ';
}

Could it be that this clause is not applying to the Atomic template whereas it is applying to the other Joomla supplied templates? If so I wonder where I could customise the Atomic template to make it apply?

Regards

Geoff

jzlcdh
Joomla! Explorer
Joomla! Explorer
Posts: 467
Joined: Thu Nov 04, 2010 8:09 am

Re: How to style text of selected menu item (atomic template

Post by jzlcdh » Fri Jan 14, 2011 8:38 am

Ah I found the answer:

#current a {
color: red;
}

Thanks for all your help.

Regards

Geoff


Locked

Return to “Joomla! 1.6 RC Support [closed]”