Superfish CSS questio

[luciano991]

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

[gfranklin]

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...@...> 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

[luciano991]

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...@...> 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...@...> 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

[gfranklin]

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...@...> 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...@...> 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...@...> 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

[Phil-174]

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...@...> 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...@...> 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...@...> 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...@...> 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

[luciano991]

Thanks. That takes care of the problem.

All the best,

luciano

On Nov 8, 5:39 am, gfranklin <gfrank...@...> 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...@...> 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...@...> 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...@...> 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