Background Home Page CloudHost

Hi,

I search to change the background picture on the home page of this template :
CloudHost

Where can i do it please, i don't find.

Thanks.

Hello,

The easiest way is just replacing the following images with your own ones:

* images/header_wide.jpg
* images/header_tablet.jpg
* images/header_mobile.jpg

Can we make it transparent?

Then you will have to use the PNG images and you will have to rename these image filenames in the template CSS files. But please remember that the PNG image will be very heavy and will slow down your website significantly.

Thank you very much.

Is there a way t0 make the gkheader position smaller. Meaning. I want it to fit on the screen so the domain search bar will show beneath. Kind of like a slide size but a bit bigger?

any changes I make to the background images messes up the domain search below techkey.co I even added the original image back and it is still off.

I'm sorry but I don't understand your requests - could you better explain what do you want to achieve?

Hi there, I cannot activate the backround picture at all. I placed this code into the override.css which is activated. Did I oversee something?

.imageBg #gkHeader {
background: transparent url('images/header_wide.jpg') no-repeat center 0;
background-size: cover;
border-bottom: none;
margin-bottom: 0;
}
.grey-content #gkPageContent {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

@quicksat - did you specified the page suffixes for the page where you want to display the background image?

NO. How I must do this? I want to have a different background pic at different sites, How I can hanle this? And how to specify the page suffices?

You can specify the page suffixes under the template settings in the "Features" tab. You have to specify the menu item ID for the specific suffix. You have to use in your case the imageBg suffix. If you need more backgrounds, then you have to duplicate the .imageBg #gkHeader declaration and rename the imageBg suffix to i.e. imageBg2

Hi Dziudek, thank you very much. I did it, but now the frontpage is white. No pic to see:

http://satellite-internet.eu. Did I miss something?

Hi there, now I see it at Safari but only when the browser is not full screen over my mac. Its not there in firefox.
Also the top list bg colour changed into white, what is a pitty, because it makes no sense for me at all. how can I fix it, that the top list will not change its colour? also why dissapeared the nice line inbetween the main menu and the rest ? What do I have to do to keep it there also with bg image?

and last but not least, which commands are allowed to "play" as url here in this code? Does it NEED a jpg/gif/png etc or would it be possible to play also a iframe?

I mean instead of:

.imageBg #gkHeader {
background: transparent url('/css/images/header_wide.jpg') no-repeat center 0;
background-size: cover;
border-bottom: none;
margin-bottom: 0;
}
.grey-content #gkPageContent {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

this here for example:

.imageBg #gkHeader {
background: transparent url('<<here the iframe="/css/images/header_wide.jpg' end iframe>>) no-repeat center 0;
background-size: cover;
border-bottom: none;
margin-bottom: 0;
}
.grey-content #gkPageContent {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}

Or something like this? I am no programer unfortunately....

I see now, while trying to order something, that the VM layout is really ugly and I dont know why?
It should look like here: http://bauhausfurniture.net/bauhausfurn ... table-1956

but it doesnt. It looks like this: http://satellite-internet.eu/index.php/ ... ion-detail

Can you maybe have a look over the souce code? Maybe its an easy step for you:

span.custom-variant-inputbox{width:152px;float:left;display:block;margin-bottom:5px;}
input.custom-attribute{width:140px;}
span.quantity-box{float:left;width:27px;padding-top:5px;}
input.quantity-input{height:19px;width:25px;text-align:center;font-weight:700;padding:2px;}
span.quantity-controls{width:15px;float:left;padding-top:2px;margin:0 0 0 10px;}
span.quantity-controls input.quantity-controls{height:14px;border:none;width:15px;color:transparent}
span.quantity-controls input.quantity-plus{background:url(../images/vmgeneral/quantity-controls.png) repeat-x;margin-bottom:2px;}
span.quantity-controls input.quantity-minus{background:url(../images/vmgeneral/quantity-controls.png) repeat-x;background-position:15px 0;}
.addtocart-bar{margin:0;padding:0;}
span.addtocart-button{width:152px;float:left;margin:0 0 0 10px;}
span.cart-images img {
float: left;
margin: 0;
width: 45px;
}
span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}
span.addtocart-button input.addtocart-button-disabled {width:auto;background:#f2f2f2 top repeat-x;border:solid #333 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;color:#333;margin:10px 0px 0px 0px;}

This I took out from the css file: templates/gk_cloudhost/css/vmsite-ltr.css

Did you solved the background problem? For me it looks fine now on my Chrome and Firefox.

Regarding the VirtueMart issue - I'm sorry but this template has no built-in support for this component so if you want to implement it you have to do it by yourself.

Background works now. Thank you. Is there NO way you can help with the VM issue? Its no big deal. You know your script.... PLEASE.... I NEED VM...

Sorry but fixing VM in this case is not so easy as you can think. If you really need to style it, please try to use the vm.css code from one of our templates which supports VM defaultly - maybe it will help.

okay done. I pasted it here: satellite-internet/httpdocs/administrator/components/com_virtuemart/assets/css

Is this the right place?

I also pasted it here, but nothing happened unfortunately

public_html/satellite-internet/httpdocs/templates/gk_cloudhost/css/vm.css

Do I MISS something?

I took the one from storefront template

I found it
It is the css file

vmsite-ltr.css

HERE I can change everything with results at the frontpage.