How change style in highlighter?

Hi

I have installed musicity template. When I installed highlighter module i have green oval button with text. How change style highlighter from sporter template? I want black button on grey background. I copied style from sporter temlate to the override.css and i ON in my template this style:

Code: Select all

.gkHighlighterGK4 a {color: #000 !important}
.gkHighlighterGK4 a:hover,
.gkHighlighterGK4 a:active,
.gkHighlighterGK4 a:focus {color: #AC0000!important}
.gkHighlighterGK4 { overflow:hidden; position:relative;  font-size: 11px; background: #e8e8e8 url('../../../../images/breadcrump.png') repeat-x 0 0; border: 1px solid #ddd; height: 32px; width: 100%; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.gkHighlighterInterface { float:left; width:auto; background: #262626; height: 21px !important; line-height: 21px !important; padding: 0 4px; margin: 6px 0 0 6px }
.gkHighlighterInterface span.text { display:block; float:left; color: #fff; }
.gkHighlighterInterface div { float:left; width:auto; }
.gkHighlighterInterface div a { display:block; float:left; height:13px; width:13px; margin: 4px 0 0 2px; background:transparent url('../images/interface.png') no-repeat 0 0; cursor:pointer; }
.gkHighlighterInterface div a.prev { }
.gkHighlighterInterface div a.next { background-position: right 0; }
.gkHighlighterInterface div a.prev:hover { background-position: 0 bottom; }
.gkHighlighterInterface div a.next:hover { background-position: right bottom; }
.gkHighlighterWrapper { float:left; height:21px; position:relative; overflow: hidden; }
.gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
.gkHighlighterWrapper .gkHighlighterItem { position: absolute; top:0; width:100%; left:0; padding-left: 10px !important; line-height: 32px}
.gkHighlighterWrapper .gkHighlighterItem > span > a > span {margin-right: 10px}

but, this don't work.

Thanks for help.

Please show me your website.

This is link to my prototype site:-)

But now I clear this additional code in override.css

Thnx

Some one help me? How to change this graphic button.

Hi

You can replace the image file /images/interface.png

or change the css code:

Code: Select all

.gkHighlighterInterface div a {
    background: url("../images/interface.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    float: left;
    height: 13px;
    margin: 4px 0 0 2px;
    width: 13px;
}