change selected image border color

[jchin]

How can I change the selected image's border color to make it more obvious which image of the thumbnails I am viewing? What do I add/change in my CSS code? View theme is "smugmug". Thanks.

[J Allen]

Here is a little more than you asked...:D




/*====Image Border Color====*/
.imgBorder
{border-color: #XXXXXX !important;}


/*====Selected Image border====*/
.imgBorderOn
{border-color: #XXXXXX !important;}


/*====Image Border Hover====*/
a:hover img.imgBorder,
.imgBorderOn
{border-color: #XXXXXX !important;}





Replace the #XXXXXX with the color to fit your needs :thumb

[jchin]

Actually, that doesn't work. It seems that something in the smugmug code overrides them. I have been playing around and these seem to work:


.tempClass .imgBorder { border-color: #888888; !important; }
.tempClass .imgBorderOn { border-color: #0088FF; !important; }
.tempClass a:hover img.imgBorder,
.tempClass a:hover img.imgBorderOn { border-color: #EE8800; !important; }


And even with these, some of it seems to get overridden by another smugmug stylesheet. It seems that .tempClass overrides the user CSS.
:scratch

But it seems to somewhat work for what I need for now.