The Joomla! Forum ™



Forum rules


Please use the Forum Post Assistant to give your server setting details which are necessary to determine the problem.



Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 16 posts ] 
Author Message
PostPosted: Wed Nov 10, 2010 10:35 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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


Top
 Profile  
 
PostPosted: Mon Nov 22, 2010 7:24 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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


Top
 Profile  
 
PostPosted: Sun Nov 28, 2010 8:15 pm 
User avatar
Joomla! Exemplar
Joomla! Exemplar

Joined: Thu Aug 18, 2005 8:43 pm
Posts: 7986
Location: New York
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!.


Top
 Profile  
 
PostPosted: Thu Dec 02, 2010 7:54 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
@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


Top
 Profile  
 
PostPosted: Thu Dec 02, 2010 8:01 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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


Top
 Profile  
 
PostPosted: Thu Dec 02, 2010 8:41 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
(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)


Top
 Profile  
 
PostPosted: Tue Dec 07, 2010 3:02 am 
User avatar
Joomla! Exemplar
Joomla! Exemplar

Joined: Thu Aug 18, 2005 8:43 pm
Posts: 7986
Location: New York
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!.


Top
 Profile  
 
PostPosted: Thu Dec 23, 2010 1:24 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 17, 2010 1:31 pm
Posts: 32
Location: Östersund, Sweden
Have you tried:

Code:
.active a {
  color: #ffffff;
}


?


Top
 Profile  
 
PostPosted: Sat Jan 08, 2011 2:17 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Jan 08, 2011 2:05 pm
Posts: 3
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


Top
 Profile  
 
PostPosted: Sun Jan 09, 2011 10:15 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Jan 08, 2011 2:05 pm
Posts: 3
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:
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


Top
 Profile  
 
PostPosted: Thu Jan 13, 2011 4:18 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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)


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 2:23 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Jan 08, 2011 2:05 pm
Posts: 3
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:
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.


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 5:29 am 
User avatar
Joomla! Exemplar
Joomla! Exemplar

Joined: Thu Aug 18, 2005 8:43 pm
Posts: 7986
Location: New York
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!.


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 7:27 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 8:27 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
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


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 8:38 am 
Joomla! Explorer
Joomla! Explorer

Joined: Thu Nov 04, 2010 8:09 am
Posts: 466
Ah I found the answer:

#current a {
color: red;
}

Thanks for all your help.

Regards

Geoff


Top
 Profile  
 
Display posts from previous:  Sort by  
Forum locked This topic is locked, you cannot edit posts or make further replies.  [ 16 posts ] 



Who is online

Users browsing this forum: No registered users and 5 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