Change color in css Topic is solved

[ribo]

Hello, i have a joomla site in https://www.horizonsuitesmilos.gr/ and in header and right position i have a button called "availability". When i hit in this button the button stays with black backround and black letters. How can i change that as i dont find the css code to change it?

[AMurray]

The button is assigned the 'btn' (bootstrap) class name.

The CSS it seems to be using is this code below which has background colour #000 (black) and font colour #fff (white).

Code: Select all

button, .button, input[type="submit"], input[type="button"], .pagenav-prev a, .pagenav-next a, #gkMainbody .readmore > a, .readon, .btn, .btn-border {
    -webkit-appearance: none;
    background: #000;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    height: auto;
    letter-spacing: 2px;
    line-height: 25px;
    margin: 0 5px 2px 2px;
    padding: 8px 24px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
}

It looks like the file is in /templates/gk_hotel/css/template.css

You would override this code in your templates custom css file - whether that be user.css, custom.css or any variation on that file name. (Check the Gavick documentation to be sure).

You could define your custom CSS class for the button and place it in the custom CSS file. which would override the original styling.

[ribo]

Yes ok but my issue is when the button is active. And there the backround and the font are black. This is that i am not find.

[Mr. Wimpy]

It's an <a> (link) inside a <button>.
And this css makes the linktext black: a:active { color: #000; }

What is it? A button? A link? Or a link that looks like a button?
Are you planning to display a form?

If it's a link that looks like a button, change

Code: Select all

<button class="btn" type="submit"><a href="https://horizonsuitesmilos.reserve-online.net" target="_blank">Availability</a></button>

to

Code: Select all

<a class="btn" href="https://horizonsuitesmilos.reserve-online.net" target="_blank">Availability</a>

* Remove the <button> tags
** Add class="btn" to <a>

[ribo]

It's an <a> (link) inside a <button>.
And this css makes the linktext black: a:active { color: #000; }

What is it? A button? A link? Or a link that looks like a button?
Are you planning to display a form?

If it's a link that looks like a button, change

Code: Select all

<button class="btn" type="submit"><a href="https://horizonsuitesmilos.reserve-online.net" target="_blank">Availability</a></button>

to

Code: Select all

<a class="btn" href="https://horizonsuitesmilos.reserve-online.net" target="_blank">Availability</a>

* Remove the <button> tags
** Add class="btn" to <a>

Thank you. That solved my issue!