Cloudhost Homepage Background

kentshelford

Hi, and how are you ??

I am using the Cloudhost Template, the latest version, but not for a hosting website. I want to continue to use the the Blue Black and red boxes but remove the image of the Server room in the Background. In other Gavick i just replace image, but looks like the Coloured boxes are part of this one....
Please keep it basic as i have very limited knowledge...

Thanks 🙂

pavit

Hi kentshelford

It is the header background image you can change it overriding image in this folder
/templates/gk_cloudhost/images/header_wide.jpg
css for style it is in the/templates/gk_cloudhost/css/template.css

.imageBg #gkHeader {
	background: #fff url('../images/header_wide.jpg') no-repeat center 0;
	background-size: cover;
	border-bottom: none;
	margin-bottom: 0;
}

If you want to customize it

Hope it helps

kentshelford

Hi and Thanks for That, Worked a treat, next problem if you have time 🙂

Attached is screen clip, if you seen the middle box the font is much larger, where can i find to change this ?? and also the colors of the Boxes

Thanks 🙂

Joshua-M

Hello,

Could you please update this thread fields with your page url (with mentioned boxes). These fields are visible for moderators only.

https://cl.ly/3y3R0p24250G

Then we'll be able to check the issue and help.

Cheers
Joshua

kentshelford

Hi, The website is not live

Joshua-M

kentshelford Hi,

Are you able to upload your website to any temporary server and add the url? We are not able to check the issue without inspecting the website.

Cheers
Joshua

kentshelford

http://www.chekthecheka.com.au/

Joshua-M

Hi,

Please change this fragment of your html code:

<dl class="gkPremium">
<dt>Compliance Chek</dt>
<dd class="gkPrice">Starting from:</dd>
<dd class="gkPrice">$149</dd>
<dd class="gkPrice">Mobile Service</dd>
<dd class="gkPrice">Full Safety Compliance Report emailed Instantly</dd>
<dd class="gkPrice">Trained, Fully Equipped and Certified Inspectors</dd>
<dd class="gkPrice">Photo Evidence of Issues</dd>
<dd></dd>
<dd class="gkLink"><a href="#" class="loaded">More</a></dd>
</dl>

into:

<dl class="gkPremium">
<dt>Compliance Chek</dt>
<dd class="gkPrice">Starting from:</dd>
<dd class="gkPrice">$149</dd>
<dd>Mobile Service</dd>
<dd>Full Safety Compliance Report emailed Instantly</dd>
<dd>Trained, Fully Equipped and Certified Inspectors</dd>
<dd>Photo Evidence of Issues</dd>
<dd></dd>
<dd class="gkLink"><a href="#" class="loaded">More</a></dd>
</dl>

Cheers
Joshua

kentshelford

Hi, Thank you work a Treat...

What about changing Colours ?? Any Idea ??

Thanks Again 🙂

Joshua-M

Hi,

Try the following custom css to change colors (adjust color values to your needs):

.gkColorPriceTable dl {
    background: #3c99df;
 }

.gkColorPriceTable dl.gkPremium {
    background: #292929;
}

.gkColorPriceTable dl.gkColor {
    background: #51bcd4;
}

Cheers
Joshua

kentshelford

Hi and Thanks for That, I have searched and Searched to find where this code is... Can you let me know what file this would be in ??

Joshua-M

Hi,
These background colors are placed in css/style4.css file, but you don't need to edit this file, it's enough to add mentioned code into css/override.css file (here you can put all your css modifications).

Cheers
Joshua

kentshelford

Hi and Thanks Again, but it does not seem to be working, I have Cleared Cache on Computer and Website. this is what i have

/*
#------------------------------------------------------------------------

CloudHost - September Joomla! template (for Joomla 2.5)

License: Copyrighted Commercial Software

Website: http://www.gavick.com

Support: support@gavick.com

/ Here you can include your override CSS styles /

.gkColorPriceTable dl {
background: #292929;
}

.gkColorPriceTable dl.gkPremium {
background: #51bcd4;
}

.gkColorPriceTable dl.gkColor {
background: #7fff2e;
}

It does have Question mark with this - Element (DL.gk.Premium) is overqualified, please just use, gk.premium with element name
??

Thanks 🙂

teitbite

kentshelford Hi. You do not have override.css file activated. Please in template settings in advanced options tab select a CSS Override to ON.

kentshelford

Thanks that Worked.... 🙂

Ok so i have changed the Background Colour and found where to change the Line to white, but i can't seem to change the colour of the Round Icons and tghe Colour when you hoover....

kentshelford

new

Joshua-M

Try this code with your colors:

.gkColorPriceTable .gkLink a {
    border-color: #first-block-color;
}

.gkColorPriceTable .gkLink a:hover {
    background: #first-block-color-hover;
}

.gkColorPriceTable .gkPremium .gkLink a {
	border-color: middle_block_color;
}

.gkColorPriceTable .gkPremium .gkLink a:hover {
	background: middle_block_color_hover;
}


.gkColorPriceTable .gkColor .gkLink a {
	border-color: #third-block-color-border;
}

.gkColorPriceTable .gkColor .gkLink a {
	background: #third-block-color;
}

Cheers
Joshua

kentshelford

Thanks 🙂