By kfriddile on

I'm working with a modified Barron theme which I've changed up to be a light on dark scheme. I have all of the colors how I want except for one thing. You know how when you click on a navigation menu item and then the text for that item turns darker to show that it's the currently viewed item? How do I change the color it changes too? Right now, it's still turning dark which makes it invisible with the dark background.

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

the style.css file for that specific template.

search the file for the reference a:visited

should look similiar to:

a:visited {
  color: #000;
}

just change the hex color value.

kfriddile’s picture

kfriddile commented

I've already tried every value in the style.css that looked valid. I currently have:

a:link, a:visited {
font-weight: normal;
text-decoration: none;
color: #C60000;
}

Shouldn't that make them a reddish color? They still show at the default, almost-black color...

kfriddile’s picture

kfriddile commented

I think you misunderstood what I'm asking. I'm not trying to change the color of links that have been visited. I want to change the color of the last menu item clicked. See over on the right of this page how this topic's name is darker than the rest in the list?

Steven’s picture

Steven commented

All links that point to the current page get the 'active' class. You can select menu items based on descendance:
ul.menu a.active for example.

--
If you have a problem, please search before posting a question.

kfriddile’s picture

kfriddile commented

Can you give me a more detailed example? I don't know anything about CSS or PHP.

vm’s picture

vm commented

Yep, I misunderstood.

can you please provide a link to your site, so that it can be viewed using tools to see where and how the .css is being called ?
The only relevant code I see in Barron Theme's style.css is

/* nav styles -- primary links in header */

#nav {
	position: absolute;
	top: 5px;
	right: 0;
}
#nav li {
	display: inline;
}
#nav li a {
	border: medium none;
	padding: 6px 10px;
	color: #ccc;
	text-decoration: none;
	font-weight: normal;
}
#nav li a:hover {
	border: medium none;
	background: #7B0505 none repeat;
	color: #fff;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style: none outside none;
}

This however is for primary links. Is your navigation based on primary links in a block ?

drupal.css may have to be overridden in this style.css if not.

kfriddile’s picture

kfriddile commented

I can't link to my site because it isn't online yet. Yes, navigation will be mostly based on primary links in a block. I noticed the problem in the navigation menu when doing various admin things.

vm’s picture

vm commented

becauase you can't link to your site.
you can try uncommenting the primary links css by removing the # form the beginning of the css i've already posted.

use the firefox browser with the firebug addon or the webdeveloper addon.
these should help guide you to what CSS is being called and where, and help you locate the trouble spot.

for 4.7 you have to override drupal.css

li a.active {
  color: #000;
}

try adding the above to the bottom of your style.css

I pull the above from drupal.css Full menu css below.

/*
** Menu styles
*/
ul.menu {
  list-style: none;
  border: none;
  text-align:left;
}
ul.menu li {
  margin: 0 0 0 0.5em;
}
li.expanded {
  list-style-type: circle;
  list-style-image: url(menu-expanded.png);
  padding: 0.2em 0.5em 0 0;
  margin: 0;
}
li.collapsed {
  list-style-type: disc;
  list-style-image: url(menu-collapsed.png);
  padding: 0.2em 0.5em 0 0;
  margin: 0;
}
li.leaf {
  list-style-type: square;
  list-style-image: url(menu-leaf.png);
  padding: 0.2em 0.5em 0 0;
  margin: 0;
}
li a.active {
  color: #000;
}
td.menu-disabled {
  background: #ccc;
}
kfriddile’s picture

kfriddile commented

I added:

li a.active {
color: #fff;
}

to the style.css, but there was no effect.

vm’s picture

vm commented

then the only other option would be to try to uncomment the code frm barrons. style.css.
or try altering the css in drupal.css directly (don't forget to remove what you've already added)
though, this would get overwritten at next update or upgrade.

Its difficult (for me) to guide you when i cannot see the theme.
I'd install the theme myself and find it, but its getting late (for me).

greymoth’s picture

greymoth commented

if you take a look at the html that is actually printed to your browser you may see that the line corresponding to the active page looks something like this:

<li class="leaf active-trail"><a href="/drupal6/node/1" title="ThePage" class="active">ThePage</a></li>

Note the class="active" part. By adding the following code to your stylesheet you can control the color of the active page link...

.content .active {
    color:#ffffff; /* some color*/
}
eforth’s picture

eforth commented

Just feeding some more info.

I'm running a 5.x Drupal instalation and just found the solution for this "active link" issue.

I added

li a.active {

  color:#xxxxxx;

}

to my theme's style.css