igames (changing hover color)

tekitouni · September 18, 2006, 05:55:14 AM

I have set igames theme as default but I want to change the blue hover color for the menu button.

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fhover.jpg&hash=586e8b2d205619b76f7e824712a9637d5f2fc952)

I tried to search where to edit but I couldn't find where it is.
I'm new to CSS and very confused. Could anyone help me find it, please?
(I've already changed the orange text color though. It was easy to find.)

Here's the code in the CSS file:

/*************************
Coppermine Photo Gallery
************************
Copyright (c) 2003-2006 Coppermine Dev Team
v1.1 originally written by Gregory DEMAR

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
********************************************
Coppermine version: 1.4.9
$Source$
$Revision: 3197 $
$Author: gaugau $
$Date: 2006-08-01 22:30:09 +0200 (Di, 01 Aug 2006) $
**********************************************/

/* Colors used in this style sheet:
Hex 000000 = RBG 0, 0, 0 = black
Hex 222222 = RBG 34, 34, 34 = black
Hex 343333 = RBG 52, 51, 51 = black
Hex 3F3F3F = RBG 63, 63, 63 = light black
Hex 454444 = RBG 69, 68, 68 = light black
Hex 4A4A4A = RBG 74, 74, 74 = dark grey
Hex 5F5F5F = RBG 95, 95, 95 = dark grey
Hex 666666 = RBG 102, 102, 102 = dark grey
Hex 838383 = RBG 131, 131, 131 = medium grey
Hex BDBEBD = RBG 189, 190, 189 = medium grey
Hex BFC0C3 = RBG 191, 192, 195 = medium grey
Hex C6B78E = RBG 198, 183, 142 = beige
Hex E6E6E6 = RBG 230, 230, 230 = light grey
Hex EFEFEF = RBG 239, 239, 239 = light grey
Hex DCB184 = RBG 240, 175, 0 = pink
Hex ff0000 = RBG 255, 0, 0 = red
Hex FFFFCC = RBG 255, 255, 204 = light yellow
Hex FFFFFF = RBG 255, 255, 255 = white
*/

/* Foreground color definition */
body { color : #C6B78E; }
.topmenu, .topmenu a { color : #E6E6E6; }
.topmenu a:hover { color : yellow; }
.tableh1, .tableh1a, .tableh1_compact, .navmenu, .navmenu a, .sortorder_cell, .sortorder_options, .statlink, .statlink a, .statlink a:hover { color : #C6B78E; }
.tableh2, .tableh2_compact, .catrow_noalb { color : #FFFFCC; }
.textinput, .listbox, .radio, .checkbox { color: #FFFFCC; }
.alblink, .alblink a, .catlink, .catlink a { color : #FFFFCC; }
a, .bblink a, .user_thumb_infobox a { color: #FFFFCC; }
a:hover, .bblink a:hover, .user_thumb_infobox a:hover, .alblink a:hover, .catlink a:hover { color : #E6E6E6; }
.button, .comment_button, .admin_menu_thumb, .admin_menu_thumb a, .admin_menu_thumb a:hover, .admin_menu, .admin_menu a, .admin_menu a:hover { color : #FFFFFF; }
.comment_date { color : #5F5F5F; }
.footer, .footer a, .footer a:hover { color : #666666; }

/* Background colors definition */
body { background-color: #4A4A4A; }
.textinput, .listbox, .radio, .checkbox { background-color: #4A4A4A; }
.tableh1, .tableh1_compact, .navmenu, .navmenu a, .navmenu a:hover { background : #3F3F3F ; }
.tableh2, .catrow_noalb, .tableh2_compact, .tablef, .img_caption_table th { background : #343333 ; }
.tableb, .catrow, .display_media, .tableb_compact, .thumbnails, .img_caption_table td { background : #454444 ; }

/* Borders for input controls */
.textinput, .listbox, .button, .comment_button, .admin_menu, .admin_menu_thumb { border: 1px solid #666666; }
.image { border: 1px solid #000000; }
.imageborder { border: 1px solid #000000; background-color:#000000; margin-top: 30px; margin-bottom: 30px; }
.image1 { border: 1px solid #ff0000; }

.maintable, .maintablea, .maintableb { background-color: #222222; }
.img_caption_table th, .img_caption_table td { border-top : 1px solid #000000; }

/* Fonts definition */
body { font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif; }
.tableh1, .tableh1a, .catlink, .tableh2, .catrow_noalb { font-family: Verdana, Geneva, Arial, sans-serif; }
.textinput, .listbox, .radio, .checkbox { font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif; }
.button, .comment_button, .sortorder_options, .admin_menu_thumb { font-family: Arial, Helvetica, sans-serif; }

table {
font-size : 12px;
}

body {
font-size : 12px;
margin: 0px;
padding:0px;
}

h1{
font-weight: normal;
font-size: 28px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
padding-left : 20px;
color: #FFFFFF;
margin: 2px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
background-image : url(images/box_left_icon.gif);
background-repeat : no-repeat;
background-position : left;
padding-left : 18px;
font-size: 18px;
margin: 0px;
}

h3 {
font-weight: normal;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size: 14px;
padding-left : 20px;
color: #DCB184;
margin: 2px;
}

p {
font-size: 100%;
margin: 2px 0px;
}

ul {
margin-left: 5px;
padding: 0px;
}

li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}

.top_panel {
background-image: url(images/top_panel_r1_c4.jpg);
background-repeat : repeat-x;
border-collapse:collapse;
margin: 0;
padding: 0;
}

.top_panel_left {
background-image: url(images/top_panel_r1_c1.jpg);
background-repeat : no-repeat;
background-position: top left;
margin: 0;
padding: 0;
}

.top_panel_right {
background-image: url(images/top_panel_r1_c2.jpg);
background-repeat : no-repeat;
background-position: top right;
margin: 0;
padding: 0;
}

.top_panel_btm {

background: #4A4A4A;
background-image: url(images/top_panel_r2_c3.jpg);
background-repeat : no-repeat;
background-position:right;
padding-top : 0;
padding-bottom : 0;

}

.top_menu_left_bttn {
white-space:nowrap;
}
.top_menu_left_bttn a {
background: #4A4A4A;
background-image : url(images/left_menu_button.gif);
background-repeat : no-repeat;
background-position : left;
padding-left : 12px;
padding-right : 6px;
padding-top :3px;
padding-bottom : 0;
display: block;
height : 35px;
line-height : 35px;
text-decoration: none;
color: #C6B78E;
font-size: 14px;

}

.top_menu_left_bttn a:hover {
background: #4A4A4A;
background-image : url(images/left_menu_button_over.gif);
background-position : left;
background-repeat : no-repeat;
text-decoration: none;
color: #DCB184;

}

.top_menu_right_bttn {
white-space:nowrap;
}

.top_menu_right_bttn a {
background: #4A4A4A;
background-image : url(images/right_menu_button.gif);
background-repeat : no-repeat;
background-position : right;
padding-right : 22px;
padding-left : 6px;
padding-top : 3px;
padding-bottom : 0;
display: block;
height : 35px;
line-height : 35px;
text-decoration: none;
color: #C6B78E;
font-size: 14px;
}

.top_menu_right_bttn a:hover {
background: #4A4A4A;
background-image : url(images/right_menu_button_over.gif);
background-position : right;
background-repeat : no-repeat;
text-decoration: none;
color: #DCB184;
}

.top_menu_bttn {
white-space:nowrap;
}
.top_menu_bttn a {
background: #4A4A4A;
background-image : url(images/menu_button.gif);
background-position : left;
padding-left : 6px;
padding-right : 6px;
padding-top : 3px;
padding-bottom : 0;
display: block;
height : 35px;
line-height : 35px;
text-decoration: none;
color: #C6B78E;
font-size: 14px;
}

.top_menu_bttn a:hover {
background: #4A4A4A;
background-image : url(images/menu_button_over.gif);
text-decoration: none;
color: #DCB184;
}

.textinput {
font-size: 100%;
padding-right: 3px;
padding-left: 3px;
}

.listbox {
font-size: 100%;
vertical-align : middle;
}

.button {
font-size: 100%;
background-image : url(images/button_bg.gif);
background-position : bottom;
}

.comment_button {
font-size: 100%;
background-image : url(images/button_bg.gif);
background-position : bottom;
padding-left: 3px;
padding-right: 3px;
}

.radio {
font-size: 100%;
vertical-align : middle;
}

.checkbox {
font-size: 100%;
vertical-align : middle;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.bblink a {
text-decoration: none;
}

.bblink a:hover {
text-decoration: underline;
}

.maintable {
margin-top: 2px;
margin-bottom: 2px;
/* border: 1px solid #000000; */
}

.maintablea {
margin-top: 5px;
}

.maintableb {
margin-bottom: 2px;
/* border: 1px solid #000000; */
}

.tableh1 {
padding-right: 10px;
padding-left: 10px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
height: 25px;
background-image: url(images/tableh1_bg.gif);
}

.tableh1a {
border-bottom: 1px solid #000000;
color: #C6B78E;
}

.tableh1a td {
border: none;
height: 30px;
font-size: 120%;
font-weight: bold;
color: #C6B78E;
background-image: url(images/tableh1a_bg_middle.gif);
}

.tableh1a img {
display: block;
}

.tableh1_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
height: 25px;
background-image: url(images/tableh1_bg.gif);
}

.tableh2 {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableh2_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tableb {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.tableb_compact {
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}

.tablef {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.catrow_noalb {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.catrow {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.album_stat {
font-size : 85%;
margin: 5px 0px;
}

.thumb_filename {
font-size: 100%;
display: block;
}

.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}

.thumb_caption {
font-size: 80%;
padding: 1px;
display : block;
}

.thumb_caption a {
text-decoration: underline;
}

.thumb_num_comments {
font-weight: normal;
font-size: 85%;
padding: 2px;
font-style : italic;
display : block;
}

.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}

.user_thumb_infobox th {
font-weight : bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox td {
font-size: 85%;
margin-top: 1px;
margin-bottom: 1px;
text-align : center;
}

.user_thumb_infobox a {
text-decoration: none;
}

.user_thumb_infobox a:hover {
text-decoration: underline;
}

.sortorder_options {
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}

.navmenu {
font-weight: bold;
border: none;
background-image: url(images/tableh1_bg.gif);
}

.navmenu img {
margin-top: 5px;

}

.navmenu a {
display: block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
border-bottom: 1px solid #000000;
border-left: 1px solid #838383;
border-right: 1px solid #000000;
background-image: url(images/tableh1_bg.gif);
line-height: 25px;
height : 25px;
}

.navmenu a:hover {
text-decoration: none;
border-bottom: 1px solid #3F3F3F;
border-left: 1px solid #3F3F3F;
border-right: 1px solid #3F3F3F;
}

.admin_menu_thumb {
font-size: 90%;
background-image : url(images/button_bg.gif);
background-position : bottom;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}

.admin_menu_thumb a {
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}

.admin_menu_thumb a:hover {
text-decoration: underline;
}

.admin_menu {
font-size: 90%;
background-image : url(images/button_bg.gif);
background-position : bottom;
background-repeat: repeat-x;
background-color: #BFC0C3;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}

.admin_menu a {
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}

.admin_menu a:hover {
text-decoration: underline;
}

td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}

.comment_date{
font-size: 90%;
vertical-align : middle;
}

.image {
margin: 2px;
}

.display_media {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}

.thumbnails {
padding: 5px;
}

.footer {
font-size : 9px;
}

.footer a {
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}

.statlink a {
text-decoration: none;
}

.statlink a:hover {
text-decoration: underline;
}

.alblink a {
text-decoration: underline;
}

.alblink a:hover {
text-decoration: underline;
}

.catlink {
display: block;
margin-bottom: 2px;
}

.catlink a {
text-decoration: underline;
}

.catlink a:hover {
text-decoration: underline;
}

.topmenu {
line-height : 130%;
font-size : 110%;
}

.topmenu a {
text-decoration : underline;
}

.topmenu a:hover {
text-decoration : underline;
}

.img_caption_table {
border: none;
width : 100%;
margin : 0px;
}

.img_caption_table th {
font-size : 100%;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
}

.img_caption_table td {
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
white-space: normal;
}

.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width : 100%;
margin : 0px;
}

.clickable_option {
font-weight: bold;
cursor : default;
}

.listbox_lang {
color: #C6B78E;
background-color: #4A4A4A;
border: 1px solid #4A4A4A;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align : middle;
}

#SELECT_LISTS {
width: 300px;
height: 50px;
text-align:right;
float: right;
}

#SUB_MENU {
background-image: url(images/top_panel_r2_c2.jpg);
background-position: left;
padding-left: 20px;
}
#SYS_MENU {
position:relative;
width:800px;
height:30px;
left: 35px;
top: 5px;
margin:-10px;
padding:0;
z-index:1;
visibility: hidden;
}

#SELECT_FLAGS {
text-align: center;
}

#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

Tranz · September 18, 2006, 06:04:14 AM

You would need to edit the image file associated with the hover. For example, check out:

Code Select

.top_menu_left_bttn a:hover {
                background: #4A4A4A;
        background-image : url(images/left_menu_button_over.gif);
        background-position : left;
        background-repeat : no-repeat;
        text-decoration: none;
        color: #DCB184;

}

tekitouni · September 18, 2006, 06:20:20 AM

Oh, you're right!! Thank you for telling me that.

tekitouni · September 18, 2006, 07:43:23 AM

So, I edited the images in Photoshop...

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fleft_menu_button_over.gif&hash=62471e3681e07f79a560e1645531906a2b06f76e)

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fmenu_button_over.gif&hash=d5d460177143554f6f54d69f472f4322d54fa551)

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fright_menu_button_over.gif&hash=9e1d7cfcd498e4e73260c45628069016662939b5)

There shouldn't be any problem with them,
but there's a line under the buttons when I move mouse over them like this.

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fhover2.jpg&hash=e29c804e454209d0c105225b0e82498c1dfa2dbf)

"Album list" button is okay though.

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg.photobucket.com%2Falbums%2Fv298%2Fshawtay%2Fhover1.jpg&hash=93cfd3237e84993bb7ceaa5cb923ba45d3885b20)

Could anyone figure out what's wrong with this, please?

Tranz · September 18, 2006, 04:33:55 PM

Could you please post a link to your gallery?

tekitouni · September 19, 2006, 12:24:40 PM

There's no underline anymore for some reasons.
It was fixed automatically. lol
Thank you anyway.

Joachim Müller · September 19, 2006, 12:45:28 PM

Automatism is called "browser cache". Next time you edit your style sheet and have issues, try force-refreshing your browser (using [Ctrl]+[F5]).

News:

igames (changing hover color)