By DNP on

First of all I would like to thank Steven for such a beautiful theme.
However, I would like to change the nav bar primary links (FriendsElectric) at the top so that the tab background is visible and not only when we do a hover.
I've had a look at the "Basic instructions for adding graphic tabs to your Drupal theme", but can't figure it out with that.

Also has someone come up with a solution to the safari issue ?

Hope someone can help !

regards,
DNP

⋅ Categories: Drupal 4.6.x

Comments

DiGriz’s picture

DiGriz commented

in the style.css for the theme, look for:

#top-nav ul li a .lw1 {
display: block;
position: relative;
_width: 1px;
background: url(nav-right.png) no-repeat 100% -100px;
}
#top-nav ul li a .lw2 {
padding: 2px 5px;
display: block;
position: relative;
_width: 1px;
cursor: pointer;
background: url(nav-left.png) no-repeat 0% -100px;
}

change it to:

#top-nav ul li a .lw1 {
display: block;
position: relative;
_width: 1px;
background: url(nav-right.png) no-repeat 100% 0px;
}
#top-nav ul li a .lw2 {
padding: 2px 5px;
display: block;
position: relative;
_width: 1px;
cursor: pointer;
background: url(nav-left.png) no-repeat 0% 0px;
}

That should do the trick...

DiGriz’s picture

DiGriz commented

What safari issue?

DNP’s picture

DNP commented

Great that did the trick.. I'd been looking around that area but don't have enough CSS knowledge yet..

And here is the Safari issue before your fix which I'd read here somewhere while searching for an answer on my issue.
It seems to be somewhat fixed with your suggestion, but still has a gap, where as in Firefox etc there is not this space.
After your fix it gives this, so do you know what is causing this space only in Safari?

Kind regards,
dnp
Digital Nature Pictures

DiGriz’s picture

DiGriz commented

That is an issue with how safari renders colors. For some reason unknown to me, safari shows colors a bit different then say firefox and IE.

You might be able to work around it by changing the images to have transparent backgrounds and then create the rounded corners by deleting pixels to the transparent backround in the corners.

DNP’s picture

DNP commented

DiGriz,
Thanks for your help, it greatly appreciated.

I'm almost happy now with the appearance in Safari, except for the spacing is different... see here
In the CSS file it seems the "top" px dimensions (see below) don't get counted the same in Safari.

#top-nav ul#primary {
position: absolute;
left: 11px;
top: 91px;
right: 250px;
}

Is there a workaround for this, other than creating seperate css files for each browser? Or am I looking in the wrong direction ?

regards,
DNP
Digital Nature Pictures

lucidr’s picture

lucidr commented

I find that this works better, with the *major* caveat that I haven't tested it in IE yet (any of the site, ever) as I don't have a Windows machine handy at the moment:

#top-nav ul li a:hover {
  color: #fff;
}
#top-nav ul li a .lw1 {
  display: block;
  position: relative;
  _width: 1px;
  background: transparent;                             
}
#top-nav ul li a .lw2 {
  padding: 2px 5px;
  display: block;
  position: relative;
  _width: 1px;
  cursor: pointer;
  background: transparent;                          
}
#top-nav ul li a:hover .lw1 {
  background: url(nav-right.png) no-repeat 100% 0px;
}
#top-nav ul li a:hover .lw2 {
  background: url(nav-left.png) no-repeat 0% 0px;
}

ul#secondary li a {
  color: #a7cde2;
  margin-right: 0px;
  margin-left: 5px;
}
ul#secondary li a .lw1 {
  background: transparent;
}
ul#secondary li a .lw2 {
  background: transparent;
}
ul#secondary li a:hover .lw1 {
  background: url(nav2-right.png) no-repeat 100% 0px;

If this is silly please let me know!

bryanc’s picture

bryanc commented

this solution works well.. thank you