Joomla Templates Club 406,261 posts

[dhuston53 Friend dhuston53Join date: May 2007Posts: 36Downloads:0Uploads:6 Thanks: 8]

#134770

I am the adviser to a student magazine. They’re all set to go, but I have mucked up the works trying to place the new logo on the template.

I need an intervention!

Here is the site now:

http://thegatorbyte.com/index.php

The log should go in the now-vanished space above the menu. How do I gt the space back and what code should I use to get the logo in there? I know it’s a CSS issue, but my CSS skills are primitive.

Thanks

Here is the CSS:

/* HEADER
——————————————————— */
#ja-headerwrap {
}

#ja-header {
height:90px;
line-height: normal;
position: absolute;
}

h1.logo, h1.logo-text {
margin: 0;
padding: 0;
font-size: 300%;
}

h1.logo a {
width:220px;
display: block;
background: url(../images/gator_byte_rev.png) no-repeat;
position: absolute;
height:110px;
float:left;
margin-left:100px;
margin-top:200px

}

h1.logo a span {
position: absolute;
top: -500px;
}

h1.logo-text a {
outline: none;
position: absolute;
top: 15px;
left: 5px;
letter-spacing: 1px;
font-weight: bold;
}

p.site-slogan {
margin: 0;
padding: 1px;
color: #999999;
position: absolute;
top: 52px;
left: 15px;
letter-spacing: 1px;
}

/*Head Tools*/
#ja-headtools {
top: -10px;
right: 0;
position: absolute;
border: 1px solid #FFFFFF;
}

#ja-headtools:hover,
#ja-headtools.hover {
border: 1px solid #CCCCCC;
background: #F7F7F7;
}

#ja-headtools .ja-innerpad {
position: relative;
padding: 5px;
float: left;
}

#ja-headtools ul {
margin: 0;
padding: 3px 0 0;
float: left;
white-space: nowrap;
}

#ja-headtools li {
margin: 0;
padding: 0 8px;
display: inline;
background: url(../images/vline.gif) no-repeat right center;
line-height: normal;
}

#ja-headtools li a {
}

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#276893

Just copy over the original template.css file from your downloaded zip of Teline and start again 🙂

It will be in /templates/ja_teline_ii/css/

or copy over the bits you want to redo

1 user says Thank You to scotty for this useful post

1. dhuston53

[mwanakijiji Friend mwanakijijiJoin date: September 2007Posts: 37Downloads:0Uploads:4 Thanks: 15]

#276932

<em>@dhuston53 87873 wrote:</em><blockquote>I am the adviser to a student magazine. They’re all set to go, but I have mucked up the works trying to place the new logo on the template.

I need an intervention!

Here is the site now:

http://thegatorbyte.com/index.php

The log should go in the now-vanished space above the menu. How do I gt the space back and what code should I use to get the logo in there? I know it’s a CSS issue, but my CSS skills are primitive.

Thanks

Here is the CSS:

/* HEADER
——————————————————— */
#ja-headerwrap {
}

#ja-header {
height:90px;
line-height: normal;
position: absolute;
}

h1.logo, h1.logo-text {
margin: 0;
padding: 0;
font-size: 300%;
}

h1.logo a {
width:220px;
display: block;
background: url(../images/gator_byte_rev.png) no-repeat;
position: absolute;
height:110px;
float:left;
margin-left:100px;
margin-top:200px

}

h1.logo a span {
position: absolute;
top: -500px;
}

h1.logo-text a {
outline: none;
position: absolute;
top: 15px;
left: 5px;
letter-spacing: 1px;
font-weight: bold;
}

p.site-slogan {
margin: 0;
padding: 1px;
color: #999999;
position: absolute;
top: 52px;
left: 15px;
letter-spacing: 1px;
}

/*Head Tools*/
#ja-headtools {
top: -10px;
right: 0;
position: absolute;
border: 1px solid #FFFFFF;
}

#ja-headtools:hover,
#ja-headtools.hover {
border: 1px solid #CCCCCC;
background: #F7F7F7;
}

#ja-headtools .ja-innerpad {
position: relative;
padding: 5px;
float: left;
}

#ja-headtools ul {
margin: 0;
padding: 3px 0 0;
float: left;
white-space: nowrap;
}

#ja-headtools li {
margin: 0;
padding: 0 8px;
display: inline;
background: url(../images/vline.gif) no-repeat right center;
line-height: normal;
}

#ja-headtools li a {
}</blockquote>

From http://thegatorbyte.com/templates/ja_teline_ii/images/gator_byte_rev.png I can see the dimensions of your logo is 129px × 80px

In that case then, in your CSS change:
h1.logo a {
width:220px;
display: block;
background: url(../images/gator_byte_rev.png) no-repeat;
position: absolute;
height:110px;
float:left;
margin-left:100px;
margin-top:200px
}

TO:
h1.logo a {
width:129px;
display: block;
background: url(../images/gator_byte_rev.png) no-repeat;
position: absolute;
float:left;
height: 80px;
margin-top:1px
margin-bottom:1px;
}

If you change the size of your logo, then make sure to change width:129px; and height: 80px; accordingly.

[Author]

Posts