Superfish CSS questio

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees. I
get it now and wow!!!!

I implemented the module here: http://apc.mcswebhost.com

If you hover on the About Us link and click History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano

You need to change this chunk of your CSS code:

===
..sf-menu li:hover, .sf-menu li.sfHover,

..sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

background: ##ad0303;

outline: 0;
color: #fc3131;
===

The background has two pound signs (#), it should be only 1. And
background color should be blue, not red. And the color should be
white, not blue. You may need to break out all those definitions in
the list into separate definitions if differing behavior is desired.


On Nov 6, 6:07*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees. I
get it now and wow!!!!

I implemented the module here:http://apc.mcswebhost.com

If you hover on the About Us link and click *History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul *but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano

Hello,

Thanks for your response to my inquiry. I did have a bit of sloppy
code there, and I believe I have fixed that now.

I just have one problem remaining. When I click on the About Us link
it goes to an article called History. That all looks great. But if I
choose History from the drop down menu, it still goes to the History
article which is correct in the way I have arranged things. However,
when you go to the History article from the Drop Down menu, the link
for About Us is grey instead of the blue color I chose for the current
link. Can that be corrected?

Thanks,

luciano

On Nov 7, 5:00*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

You need to change this chunk of your CSS code:

===
.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

* * * * background: * * * * * * ##ad0303;

* * * * outline: * * * * * * * *0;
* * * * color: #fc3131;
===

The background has two pound signs (#), it should be only 1. And
background color should be blue, not red. And the color should be
white, not blue. You may need to break out all those definitions in
the list into separate definitions if differing behavior is desired.

On Nov 6, 6:07*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees. I
get it now and wow!!!!

I implemented the module here:http://apc.mcswebhost.com

If you hover on the About Us link and click *History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul *but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano

Luciano,

http://apc.mcswebhost.com/about-us/history
Your "About" button is assigned the class .active.

It looks to me like .active has assigned #ccc background color. Just
change .active to be something else.

"History" button also has .active assigned to it, and .first-child as
well, so look for those definition in the CSS. However, since you're
on the History page, the id value #current takes precendence -- the
blue background (except for when you mouse over it, which
involves :hover). #current takes precedence because it is defined
later in the css file. [If #current wasn't defined later than .active
in the CSS, The history button would look like the About button.]

-Greg

p.s. I've pasted your CSS definitions below.

..sf-menu .active {

background: #ccc;

}

..sf-menu #current {

background: #202f6a;

}





On Nov 7, 4:41*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

Thanks for your response to my inquiry. I did have a bit of sloppy
code there, and I believe I have fixed that now.

I just have one problem remaining. When I click on the About Us link
it goes to an article called History. That all looks great. But if I
choose History from the drop down menu, it still goes to the History
article which is correct in the way I have arranged things. However,
when you go to the History article from the Drop Down menu, the link
for About Us is grey instead of the blue color I chose for the current
link. Can that be corrected?

Thanks,

luciano

On Nov 7, 5:00*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

You need to change this chunk of your CSS code:

===
.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

* * * * background: * * * * * * ##ad0303;

* * * * outline: * * * * * * * *0;
* * * * color: #fc3131;
===

The background has two pound signs (#), it should be only 1. And
background color should be blue, not red. And the color should be
white, not blue. You may need to break out all those definitions in
the list into separate definitions if differing behavior is desired.

On Nov 6, 6:07*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees. I
get it now and wow!!!!

I implemented the module here:http://apc.mcswebhost.com

If you hover on the About Us link and click *History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul *but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano

Haven't looked closely at the css but just wanted to point out one
thing. The order in which items appear in the style sheet is only one
piece of the puzzle as to what is applied. Specificity is the
larger. You can actually assign a numerical value to a selector to
decide if it is more specific than another and hence will have its
rule applied. For example take these three selections applied to this
code.

a href class="anyclass" id="anyid" .......

#anyid {background: orange;}
a {background: yellow;}
a.anyclass {background: red;}

all of these css rules select the same a element and even though the
red background appears last in the list the one that will be applied
is the orange.

Heres how it works.

An ID is given a rating or specific value of 100
A class 10
an element 1

you can add up the numbers in any css rule to see which is more
specific and will be applied. in our preceding example

orange = 100
yellow = 1
red = 11

Hope that helps somewhat. And by the way if two have the same value
the last one to appear in the stylesheet will be the rule that
applies.

Phil

On Nov 8, 2:39*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

Luciano,

http://apc.mcswebhost.com/about-us/history
Your "About" button is assigned the class .active.

It looks to me like .active has assigned #ccc background color. Just
change .active to be something else.

"History" button also has .active assigned to it, and .first-child as
well, so look for those definition in the CSS. However, since you're
on the History page, the id value #current takes precendence -- the
blue background (except for when you mouse over it, which
involves :hover). #current takes precedence because it is defined
later in the css file. [If #current wasn't defined later than .active
in the CSS, The history button would look like the About button.]

-Greg

p.s. I've pasted your CSS definitions below.

.sf-menu .active {

* * * * background: #ccc;

}

.sf-menu #current {

* * * * background: #202f6a;

}

On Nov 7, 4:41*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:> Hello,

Thanks for your response to my inquiry. I did have a bit of sloppy
code there, and I believe I have fixed that now.

I just have one problem remaining. When I click on the About Us link
it goes to an article called History. That all looks great. But if I
choose History from the drop down menu, it still goes to the History
article which is correct in the way I have arranged things. However,
when you go to the History article from the Drop Down menu, the link
for About Us is grey instead of the blue color I chose for the current
link. Can that be corrected?

Thanks,

luciano

On Nov 7, 5:00*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

You need to change this chunk of your CSS code:

===
.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

* * * * background: * * * * * * ##ad0303;

* * * * outline: * * * * * * * *0;
* * * * color: #fc3131;
===

The background has two pound signs (#), it should be only 1. And
background color should be blue, not red. And the color should be
white, not blue. You may need to break out all those definitions in
the list into separate definitions if differing behavior is desired.

On Nov 6, 6:07*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees.. I
get it now and wow!!!!

I implemented the module here:http://apc.mcswebhost.com

If you hover on the About Us link and click *History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul *but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano

Thanks. That takes care of the problem.

All the best,

luciano

On Nov 8, 5:39*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

Luciano,

http://apc.mcswebhost.com/about-us/history
Your "About" button is assigned the class .active.

It looks to me like .active has assigned #ccc background color. Just
change .active to be something else.

"History" button also has .active assigned to it, and .first-child as
well, so look for those definition in the CSS. However, since you're
on the History page, the id value #current takes precendence -- the
blue background (except for when you mouse over it, which
involves :hover). #current takes precedence because it is defined
later in the css file. [If #current wasn't defined later than .active
in the CSS, The history button would look like the About button.]

-Greg

p.s. I've pasted your CSS definitions below.

.sf-menu .active {

* * * * background: #ccc;

}

.sf-menu #current {

* * * * background: #202f6a;

}

On Nov 7, 4:41*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

Thanks for your response to my inquiry. I did have a bit of sloppy
code there, and I believe I have fixed that now.

I just have one problem remaining. When I click on the About Us link
it goes to an article called History. That all looks great. But if I
choose History from the drop down menu, it still goes to the History
article which is correct in the way I have arranged things. However,
when you go to the History article from the Drop Down menu, the link
for About Us is grey instead of the blue color I chose for the current
link. Can that be corrected?

Thanks,

luciano

On Nov 7, 5:00*am, gfranklin <gfrank... (AT) gmail (DOT) com> wrote:

You need to change this chunk of your CSS code:

===
.sf-menu li:hover, .sf-menu li.sfHover,

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

* * * * background: * * * * * * ##ad0303;

* * * * outline: * * * * * * * *0;
* * * * color: #fc3131;
===

The background has two pound signs (#), it should be only 1. And
background color should be blue, not red. And the color should be
white, not blue. You may need to break out all those definitions in
the list into separate definitions if differing behavior is desired.

On Nov 6, 6:07*pm, luciano991 <mountain... (AT) gmail (DOT) com> wrote:

Hello,

This is my first post. I want to compliment the author on this great
extension. I had trouble with it at first because I used to be a
Windows guy and now I'm a Mac guy and I'm still getting used to things
that are so simple and obvious I can't see the forest for the trees.. I
get it now and wow!!!!

I implemented the module here:http://apc.mcswebhost.com

If you hover on the About Us link and click *History and go to that
page everything is cool except now the About US link has a grey
background and the drop down link for History has the blue "current"
background I set for the top level. I can fix one but not all these
problems by editing the style .sf-menu a.sf-with-ul *but I would like
to find the ancestors to edit to fix the problem. I want all link
backgrounds for all levels to be #ad0303 with #fff for the font color,
the current link should be the blue background with white print, the
hover font colors should all be the same.

Thanks,

luciano