CSS tag for pager | drupal.org

Posted by i25 on November 9, 2009 at 10:18pm

I'm using the pager that comes with the latest Views Slideshow module. I have different css styles for a and a:hover. I'm trying to add a style for active as well. I've tried a:active but this doesn't seem to work. Can someone tell me what css tag I need to use for the active pager number? Thanks!

Comments

Any suggestions?

Posted by i25 on November 11, 2009 at 9:40pm

Any suggestions?

Anything guys? Thanks.

Posted by i25 on November 18, 2009 at 12:04am

Anything guys? Thanks.

This has to be an easy one

Posted by i25 on November 19, 2009 at 4:57pm

This has to be an easy one for some of you pros... why isn't a:active giving me what I need?

Can someone take a peek at my

Posted by i25 on December 20, 2009 at 5:39am

Can someone take a peek at my original post concerning styling the active pager item? Thanks.

Believe it or not, I'm still

Posted by i25 on January 3, 2010 at 3:40am

Believe it or not, I'm still having trouble getting this to work. It seems like it should be simple, but I'm stumped. Does anyone have any suggestions?

What theme are you using?

Posted by izmeez on January 3, 2010 at 3:54am

What theme are you using? Have you looked at the files in the theme to see what is being used? Some theme uses a:active and a.active and also a:focus

You might need to look at the html-elements.css in the theme if it has such a file.

Hi izmeez, No such file

Posted by i25 on January 3, 2010 at 5:22am

Hi izmeez,
No such file exists in my theme. The theme did not come with a slideshow and pager, so I'm coding this css myself. I'll try the options you posted.

Any other suggestions for the

Posted by i25 on January 4, 2010 at 5:52pm

Any other suggestions for the pager item with focus?

a:active and a:hover are

Posted by i25 on January 3, 2010 at 5:32am

a:active and a:hover are working (the css is applied when I click the pager, and when I hover over it), but it's not remaining for a:focus.

I am not a CSS guru but have

Posted by izmeez on January 4, 2010 at 6:24pm

I am not a CSS guru but have you tried also adding a.active to see if that helps?

I did... I tried both

Posted by i25 on January 4, 2010 at 6:41pm

I did... I tried both a.active and a:active together, then tried each one separately.

Any other suggestions guys?

Posted by i25 on January 5, 2010 at 8:19pm

Any other suggestions guys? Thanks.

Any other suggestions?

Posted by i25 on January 6, 2010 at 10:33pm

Any other suggestions?

I assume you have tried

Posted by izmeez on January 7, 2010 at 1:08am

I assume you have tried viewing the site with css caching turned off and looking with firebug. Maybe you can provide a link.

I have. Take a look at

Posted by i25 on January 7, 2010 at 5:06am

I have.

Take a look at www.mwebdev.com/jos.html.

Thanks.

Can you point me to a

Posted by izmeez on January 7, 2010 at 5:36am

Can you point me to a specific element in the page and what hover and focus action you are attempting.

Just scanning over the page in addition to the styles.css there is also the views.slideshow.css and I am not sure if panels is contributing something.

Sure... At the top on the

Posted by i25 on January 7, 2010 at 5:44am

Sure...

At the top on the right side, you will see two images rotating. The pager consists of the two round, brown images below the images. If you hover over the images, you will see they change to an orange images. I would like the hover (orange) images to show when the corresponding images in the slideshow are active (focus).

I'm not using panels for this Views Slideshow or the larger one below (with the two large rotating images).

Let me know if this answers the question... thanks.

I am out of my depth in being

Posted by izmeez on January 7, 2010 at 6:54am

I am out of my depth in being able to offer a solution but this seems to be coming from the views.slideshow.css
I have not yet tried that module. Maybe someone else can offer a hand.

I got it! Thanks... your last

Posted by i25 on January 7, 2010 at 7:16am

I got it! Thanks... your last comments prompted me to find the module's css file and look at the code.

#views_slideshow_singleframe_pager_1.numbered a.activeSlide

Thanks for your help!

Great, that does look better.

Posted by izmeez on January 7, 2010 at 4:56pm

Great, that does look better. Maybe you should offer that as a simple patch to the views.slideshow module?

I actually took the code from

Posted by i25 on January 7, 2010 at 5:08pm

I actually took the code from the views_slideshow.css file (which was #views_slideshow_singleframe_pager.numbered a.activeSlide) and added it to my theme's css file (I added the _1 in #views_slideshow_singleframe_pager_1.numbered a.activeSlide to match my pager). The basic css code is already in the views_slideshow.css file.

I haven't explored that

Posted by izmeez on January 7, 2010 at 6:29pm

I haven't explored that module but other modules that include css files suggest that when modifying the css to copy it to your theme and then that is the copy that will be used by the module.