Christmas Version

Corporate Ltd is perfect choice for your next business Joomla website
GK User
Sun Dec 04, 2011 4:48 pm
Can anyone help me to put a Christmas version in this template? How can i had a background without transform the template?

Regards
User avatar
Senior Boarder

GK User
Mon Dec 05, 2011 10:37 am
Hi,

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

GK User
Mon Dec 05, 2011 10:42 am
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 :(
User avatar
Senior Boarder

GK User
Mon Dec 05, 2011 10:45 am
Give me your site URL please then I will take a look to check if I can fix it for you!
User avatar
Platinum Boarder

GK User
Tue Dec 06, 2011 10:45 am
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 8:06 pm
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.
User avatar
Platinum Boarder

GK User
Tue Dec 06, 2011 8:12 pm
Don Lee wrote: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;
}
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 8:21 pm
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>
User avatar
Platinum Boarder

GK User
Tue Dec 06, 2011 8:25 pm
Don Lee wrote: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?
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 8:29 pm
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>
User avatar
Platinum Boarder

GK User
Tue Dec 06, 2011 8:34 pm
Don Lee wrote: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.
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 8:40 pm
Opps, you are lacking close tag for <a> http://easycaptures.com/fs/uploaded/640/3968979221.jpg
User avatar
Platinum Boarder

GK User
Tue Dec 06, 2011 8:49 pm
Don Lee wrote: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>
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 10:43 pm
Don Lee wrote: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
User avatar
Senior Boarder

GK User
Tue Dec 06, 2011 11:31 pm
Thank for all the help, i have done it with some html code.
User avatar
Senior Boarder

GK User
Wed Dec 07, 2011 11:24 am
Don Lee wrote: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
User avatar
Senior Boarder

GK User
Wed Dec 07, 2011 11:50 am
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?
User avatar
Platinum Boarder

GK User
Wed Dec 07, 2011 11:53 am
Don Lee wrote: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?
User avatar
Senior Boarder

GK User
Thu Dec 08, 2011 10:06 am
Give me your FTP access over a support ticket then I will try for you!
User avatar
Platinum Boarder

GK User
Thu Dec 08, 2011 10:53 am
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
User avatar
Senior Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.