Cloudhost Header boxes?

Hi everyone,

I am looking to make some changes to the Header boxes (In the demo those are the boxes on in the header position with different priced hosting plans).

1. The circled 'More' Button, I was able to change the color of it when hovered, but can't seem to change the white color when not hovered? I need to be able to have this circler a specific color at all times: #db2f2f.

2. Can I make the boxes semi transparent? maybe set it at 70%?

3. How can I round the corners of the boxes?


Much appreciated, please try to answer by number. I really appreciate all of your help on this.

Thank you

Please edit: /templates/gk_cloudhost/css/override.css and add at its end:
background color of hovered "more" circle button:

Code: Select all

.gkColorPriceTable .gkPremium .gkLink a:active, .gkColorPriceTable .gkPremium .gkLink a:focus, .gkColorPriceTable .gkPremium .gkLink a:hover {
background: #757575;
}


Background of unhovered circle "more" button:

Code: Select all

.gkColorPriceTable .gkLink a {
background: #fff;
}


Semi transparent boxes:

Code: Select all

.gkColorPriceTable dl {
background: rgba(255,0,0,0.75);
}
.gkColorPriceTable dl.gkPremium {
background: rgba(0,255,0,0.75)
}
.gkColorPriceTable dl.gkColor {
background: rgba(0,0,255,0.75)
}


Remember to enable "CSS override" in template settings - advanced section.

Rounded corners:

Code: Select all

.gkColorPriceTable dl {-webkit-border-radius: 5px;
border-radius: 5px;}


First, Thank you very much for your reply.

Most of the codes worked great except one. When I add the transparent code to make the boxes transparent, it turns them Red instead of white and not transparent?

Here is my test site:

I did take off the transparency code since it wasn't working.

https://www.allcelltech.com/testing/

You need to correct color values on your own:

Code: Select all

rgba(0,0,255,0.75)


this represents:
R: 0
G: 0
B: 0
opacity: 0.75

Values of R,G,B are 0-255.