Christmas Version

Can anyone help me to put a Christmas version in this template? How can i had a background without transform the template?

Regards

Hi,

Are you asking about GK Music template as I don't see Christmas version within GK Corporate template.

Yes, i am trying to put the christmas version of Music Template into the Corporate Ltd. the background it`s done but the santa hat i am having dificulty. Trying most of css code but it looks that i am wrong
It only shows or my logo or the santa hat, can`t put the both at the same time

Give me your site URL please then I will take a look to check if I can fix it for you!

The link is www.santaremdigital.com

I don't see the code you added to show the hat http://easycaptures.com/fs/uploaded/640/8130265414.jpg

Please add it first then I will check some css code to show it for you.

I don't see the code you added to show the hat http://easycaptures.com/fs/uploaded/640/8130265414.jpg

Please add it first then I will check some css code to show it for you.

In template_css.css i have
/* Logo
------------------------------------------------------------*/

a#logo,
a#logo_styled img {
display: block;
height: auto;
margin: 0;
width: auto;
}
a#logo_styled {
background: url('http://www.santaremdigital.com/templates/gk_corporate/images/style1/logo.png') no-repeat 0 0;
margin:0 0 0 0;
float:left;
display:block;
height: 70px;
width: 254px;
}
a#logo_styled span {
display: block;
}

In style1.css i have:
a#logo_styled + span {
display: block;
background: transparent url('http://www.santaremdigital.com/images/christmas_logo.png') no-repeat 0 0;
width: 157px;
height: 172px;
position: absolute;
top: -77px;
left: 250px;
}

Apparently you have added two background images to only ONE html element and it's impossible. You may need to customize logo place to have a wrapper of logo, then set the hat image as background for this wrapper.

For example, now the logo mockup is:

Code: Select all

<a href="/./" id="logo_styled">
</a>

You change it to:

Code: Select all

<div class="logo-wrapper">
<a href="/./" id="logo_styled">
</a>
</div>

Apparently you have added two background images to only ONE html element and it's impossible. You may need to customize logo place to have a wrapper of logo, then set the hat image as background for this wrapper.

For example, now the logo mockup is:

Code: Select all

<a href="/./" id="logo_styled">
</a>

You change it to:

Code: Select all

<div class="logo-wrapper">
<a href="/./" id="logo_styled">
</a>
</div>

In the template_css.css?

That`s html code, how can i put in css code?

The file was: \templates\gk_corporate\index.php

Exact code to find:

Code: Select all

<a id="logo<?php echo ($logo_as_image) ? '' : '_styled'; ?>" href="./">
            <?php if($logo_as_image) : ?>
            <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/images/style1/logo.png" alt="Logo" />
            <?php endif; ?>
         </a>

Change to something like:

Code: Select all

<div class="logo-wrapper><a id="logo<?php echo ($logo_as_image) ? '' : '_styled'; ?>" href="./">
            <?php if($logo_as_image) : ?>
            <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/images/style1/logo.png" alt="Logo" />
            <?php endif; ?>
         </a></div>

The file was: \templates\gk_corporate\index.php

Exact code to find:

Code: Select all

<a id="logo<?php echo ($logo_as_image) ? '' : '_styled'; ?>" href="./">
            <?php if($logo_as_image) : ?>
            <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/images/style1/logo.png" alt="Logo" />
            <?php endif; ?>
         </a>

Change to something like:

Code: Select all

<div class="logo-wrapper><a id="logo<?php echo ($logo_as_image) ? '' : '_styled'; ?>" href="./">
            <?php if($logo_as_image) : ?>
            <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/images/style1/logo.png" alt="Logo" />
            <?php endif; ?>
         </a></div>

Now the logo disappear and there is no logo and no santa hat.

Opps, you are lacking close tag for <a> http://easycaptures.com/fs/uploaded/640/3968979221.jpg

Opps, you are lacking close tag for <a> http://easycaptures.com/fs/uploaded/640/3968979221.jpg

But its close,
The code that you gave me has the </a> before </div>

Code: Select all

<div class="logo-wrapper><a id="logo<?php echo ($logo_as_image) ? '' : '_styled'; ?>" href="./">
            <?php if($logo_as_image) : ?>
            <img src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/images/style1/logo.png" alt="Logo" />
            <?php endif; ?>
         </a> </div>

Opps, you are lacking close tag for <a> http://easycaptures.com/fs/uploaded/640/3968979221.jpg

I changed some css in the template_css.css

Code: Select all

html {
   height:100%;
   margin-bottom:1px;
        background: #f6f6f6 url('http://www.santaremdigital.com/images/christmasbg.jpg') no-repeat center top;
}
body {
   margin-top:80px;
   margin-bottom:0;
   padding:0;
   font-size:62.5%; /* Reset: 1em = 10px */
   font-family:Arial , Verdana, sans-serif;
   color:#979797;
        background: transparent url('http://www.santaremdigital.com/images/christmas_logo.png') no-repeat 0 0;
        background-position: 250px -77px;
}
html>body {
   min-height: 100%;
   height: auto;
}

but now the santa hat is behind "html" and the "div#wrapper_main{"
Tried to use z-index but does not work.

help please.

Cheers

Thank for all the help, i have done it with some html code.

Opps, you are lacking close tag for <a> http://easycaptures.com/fs/uploaded/640/3968979221.jpg

I thought that i done it but now i see a problem. I used this to insert the hat in the template

Code: Select all

<div id="bgTopDiv">
<img style="position:absolute; top:7px; left:180px" src="http://www.santaremdigital.com/images/christmas_logo.png" alt="Natal"/>
    </div>

but now i saw that in some screens the hat is in another place, i think it`s because the resolution of the screen. How can i fix this?

Cheers

It's because you use absolute position for bgTopDiv.

Why didn't you move bgTopDiv inside wrapper_top to have it always reside the same position with the logo?

It's because you use absolute position for bgTopDiv.

Why didn't you move bgTopDiv inside wrapper_top to have it always reside the same position with the logo?

It never showed the hat, i don`t know why. Which code do you sugest to use?

Give me your FTP access over a support ticket then I will try for you!

After some tries o did it. I put the code in wrapper_main, tem just ajustes the position and works fine now.

Thank you for the help

Regards