Text only | Text with Images

coppermine-gallery.com/forum

Support => cpg1.4.x Support => Older/other versions => cpg1.4 themes/skins/templates => Topic started by: tekitouni on September 18, 2006, 05:55:14 AM

Title: igames (changing hover color)
Post by: tekitouni on 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);}


Title: Re: igames (changing hover color)
Post by: Tranz on 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;

}
Title: Re: igames (changing hover color)
Post by: tekitouni on September 18, 2006, 06:20:20 AM
Oh, you're right!! Thank you for telling me that.  :D
Title: Re: igames (changing hover color)
Post by: tekitouni on 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?
Title: Re: igames (changing hover color)
Post by: Tranz on September 18, 2006, 04:33:55 PM
Could you please post a link to your gallery?
Title: Re: igames (changing hover color)
Post by: tekitouni on September 19, 2006, 12:24:40 PM
There's no underline anymore for some reasons.
It was fixed automatically. lol
Thank you anyway.
Title: Re: igames (changing hover color)
Post by: Joachim Müller on 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]).
Text only | Text with Images