Skip navigation
BoppyW
Currently Being Moderated

How to change hover size in Spry panel but not rest of site?

Jul 8, 2013 10:46 PM

Hi guys, I need to add more tabs which means I need to reduce the font size of my H2 style and its hover state. However, when I adjust this to be 10 pt in sprytabbedpanels2.css it stays at 14 in live view until I also change the setting to 10 pt in my Arrowmark.css file, which then stuffs up the hovering behaviour of links elsewhere in my site.

 

Is there a way to adjust the hover only in the tabbed panels style sheet and not affect the rest of the site? Or am I doing something wrong?

 

My site is at www.wakatipucollection.co.nz/wholesale

 

Thank you in advance for assistance.

 

Jo

 
Replies
  • Currently Being Moderated
    Jul 8, 2013 11:07 PM   in reply to BoppyW

    Use !important in sprytabbedpanels2.css to tell the h2 rule in that css file that the 10pt font-size is important.

     

    h2 {

    font-size:10pt !important;

    }

     

    best,

    Shocker

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 9:02 AM   in reply to BoppyW

    Hi Jo -

     

    Warning, I am not an expert, but in my way of thinking, your Spry CSS needs link pseudoclasses to specify a special font size for only links in your tabs. Normal H2 or font size attributes will have no effect on text that is a link.

     

    It might look like

     

    .TabbedPanelsTabHover a:link {

        font-size: 9px;

        }

    .TabbedPanelsTabHover a:visited {

        font-size: 9px;

        }

    .TabbedPanelsTabHover a:hover {

        font-size: 9px;

        }

    .TabbedPanelsTabHover a:active {

            font-size: 9px;

        }

     

    Got time to try it out?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 1:45 PM   in reply to BoppyW

    Most welcome m'lady +

     

    How about bumping the font size up to12px to give us old guys with 80-year old eyes a break.

     

    You'll also need it on line 126 here:

     

    .TabbedPanelsTab {
        cursor: pointer;

        font-size: 12px;

        list-style: none outside none;

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points