Joomla Templates Club 406,261 posts

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

#134774

The default logo for Teline II is 42px high.

I have a logo that is 120px.

I don’t know how to make room for it. Right now it overlaps the main menu across the top of the page.

Should I try to move the menu/page position downwards? How do I do that?

When I move the “top” position the logo isn’t visible on the page.

Here’s the way it looks now.

http://thegatorbyte.com/index.php

David

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

#276918

<em>@dhuston53 87889 wrote:</em><blockquote>The default logo for Teline II is 42px high.

I have a logo that is 120px.

I don’t know how to make room for it. Right now it overlaps the main menu across the top of the page.

Should I try to move the menu/page position downwards? How do I do that?

When I move the “top” position the logo isn’t visible on the page.

Here’s the way it looks now.

http://thegatorbyte.com/index.php

David</blockquote>

Just go to template_css.css (Located here ..templates/ja_teline_ii/css/template_css.css)

Change:
h1.logo a {
width: 278px;
display: block;
background: url(../images/logo.gif) no-repeat;
position: absolute;
height: 42px;
top: 20px;
left: 0;
}

TO:
h1.logo a {
display: block;
background: url(../images/logo.gif) no-repeat;
position: absolute;
left: 0;
}

But the following should be the BEST Option:
h1.logo a {
display: block;
background: url(../images/logo.gif) no-repeat;
position: absolute;
top: 1px;
bottom: 1px;
left: 0;
}

The above changes will display your LOGO in it’s original dimensions.

Best of luck.

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

#276922

I tried your suggestions.

Nothing showed up–no logo at all.

Now I have restored the default setting for the template logo–still nothing shows up.

I deleted user data/refreshed cache–still nothing.

I didn’t change anything else.

Any idea what went wrong?

Anyone?

Thanks

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

#276933

<em>@dhuston53 87913 wrote:</em><blockquote>I tried your suggestions.

Nothing showed up–no logo at all.

Now I have restored the default setting for the template logo–still nothing shows up.

I deleted user data/refreshed cache–still nothing.

I didn’t change anything else.

Any idea what went wrong?

Anyone?

Thanks</blockquote>

I now get it.

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;
}

That should give you the original size of your logo. But if you want to expand the WIDTH and HEIGHT make sure to change the width:XXXpx; and height: XXXpx; accordingly.

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

#276956

I changed the code as you suggested, but the browser does not expand the space above the menu–it just slaps the logo over the menu.

The attached pic shows what I mean.

Here is my code:

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

#ja-header {
height:80px;
line-height: normal;
position: relative;
}

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

h1.logo a {

width:207px;
display: block;
background: url(../images/gator_byte_d.png) no-repeat;
position: absolute;
float:left;
height:120px;
margin-top:1px;
margin-bottom:1px;

}

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

Thanks for working with me. I’m trying!

David

---

Attachments:

1. 

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

#276960

You have to set the Header height to fit in the logo and then also the logo height and width itself….

<em>@dhuston53 87956 wrote:</em><blockquote>

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

#ja-header {
height:80px; <<<<This must be set to the height of your logo + 2px to allow for your margin
line-height: normal;
position: relative;
}

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

h1.logo a {

width:207px; <<<<Put here the width of your logo
display: block;
background: url(../images/gator_byte_d.png) no-repeat;
position: absolute;
float:left;
height:120px; <<<< Put here the height of your logo
margin-top:1px;
margin-bottom:1px;

}

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

Thanks for working with me. I’m trying!

David</blockquote>

1 user says Thank You to scotty for this useful post

1. dhuston53

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

#276971

YES!!!

That did the trick.

Many thanks for clarifying all this.

I only wish this kind of documentation existed somewhere. Joomlart Teline II is a great template, but sorely lacking detailed documentation. I’ve never used such a complex program with so little instruction.

Hope they finally get around to that. Meanwhile, we amateurs really depend on helpful pros like you!

Thanks a million.

David:D

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

#277092

Me again:

thegatorbyte.com

My students have developed another variation on their logo–longer than height.

When I followed the above instructions–nothing will appear.

Here is my code:

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

#ja-header {
height:80px;
line-height: normal;
position: relative;
}

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

h1.logo a {

width:400px;
display: block;
background: url(../images/gator_byte_e.png) no-repeat;
position: absolute;
float:left;
height:78px;
margin-top:1px;
margin-bottom:1px;

}

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

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: 25px;
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 {
}

What have I missed here?

They want to “unveil” their creation tomorrow, so I am a little hysterical here.

Thanks for any suggestions.

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

#277287

Hi dhuston53,

The changes you have made seem to be correct.

Are you sure that templates/ja_teline_ii/images/gator_byte_e.png exists? There seems to be no image of that name in the location you are pointing to in the .css?

http://thegatorbyte.com/templates/ja_teline_ii/images/gator_byte_e.png

1 user says Thank You to scotty for this useful post

1. dhuston53

[Author]

Posts