Joomla Templates Club 406,261 posts

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#130453

In the teline II theme you have the choice of text to show in the top left or a graphic/logo which is a gif file. Although i have found similar posts whicih state how to do this i couldnt solve it.

My Problem

I need to – enlarge the space available for the graphic to fit into and dont know how to so this. essentially enlarge the grahic area top left so that i can upload a larger graphic there as at the moment this is too small for us. I have downloaded the source files but this is like default 90px and we need to enlarge it to say height 120 width 250 – how do i do this ?

I am using Joomla 1.5, Teline II template. Can you state exaxtly the file location is it is one or what lines need editing in any css or php files. and state where in what folders etc to get them from.

Many thanks in advance : )

Ol

[anisjolly Friend anisjollyJoin date: April 2008Posts: 661Downloads:0Uploads:15 Thanks: 33 Thanked: 96 times in 55 posts]

#257975

i think this should be an option in the template.css file. there should be a class or id with the logo label.

i might be wrong.

1 user says Thank You to anisjolly for this useful post

1. ollyjk

[gaygiorgia Friend gaygiorgiaJoin date: June 2008Posts: 218Downloads:0Uploads:7 Thanks: 15 Thanked: 15 times in 1 posts]

#257977

<em>@ollyjk 64311 wrote:</em><blockquote>In the teline II theme you have the choice of text to show in the top left or a graphic/logo which is a gif file. Although i have found similar posts whicih state how to do this i couldnt solve it.

My Problem

I need to – enlarge the space available for the graphic to fit into and dont know how to so this. essentially enlarge the grahic area top left so that i can upload a larger graphic there as at the moment this is too small for us. I have downloaded the source files but this is like default 90px and we need to enlarge it to say height 120 width 250 – how do i do this ?

I am using Joomla 1.5, Teline II template. Can you state exaxtly the file location is it is one or what lines need editing in any css or php files. and state where in what folders etc to get them from.

Many thanks in advance : )

Ol</blockquote>

<em>@anisjolly 64315 wrote:</em><blockquote>i think this should be an option in the template.css file. there should be a class or id with the logo label.

i might be wrong.</blockquote>
no u right.

especially in template.css:

#ja-header {
height: HEIGHT-YOU-NEED-IN-PIXELS + 5 MOREpx;
line-height: normal;
position: relative;
}

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

h1.logo a {
width: WIDTH-YOU-NEED-IN-PIXELSpx;
display: block;
background: url(../images/YOUR-NEW-LOGO.EXTENSION) no-repeat;
position: absolute;
height: HEIGHT-YOU-NEED-IN-PIXELSpx;
top: 5px;
left: 0;

1 user says Thank You to gaygiorgia for this useful post

1. ollyjk

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#257978

you need to edit:

template.css (line 801)
background:transparent url(../images/logo.gif) no-repeat scroll 0%;
display:block;
height:42px;
left:0pt;
position:absolute;
top:20px;
width:278px;

1 user says Thank You to bennitos for this useful post

1. ollyjk

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#257980

Thats great! Thanks so much!

Ol

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#257988

I am glad there are enough people who stepped in to help. And, provided just the correct advice too.

The only thing that was missing was to provide how to find it. Briefly, using a FTP program, to access the files and directories of the site, this would require login via FTP, following this route path:

public_html => templates => ja_teline_ii => css => template.css

to access the template.css. Open the file, and use the search to locate “logo”, and you will find the appropriate css specifications that needed to be modified exactly as gaygiorgia stated. I do it slightly differently:

/* HEADER
--------------------------------------------------------- */
#ja-headerwrap
{
} /* orig changed added */

#ja-header
{
height: 80px;
line-height: normal;
position: relative;
} /* orig height: 80px; changed added */

h1.logo, h1.logo-text
{
margin: 0;
padding: 0;
font-size: 300%;
} /* orig font-size: 300%; changed added */

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

Note that I placed in bold the ones that needed to be changed (of course you do not do that (i.e., place bold) in the template.css itself because you will destroy it) and you can change the ones in bold systematically.

One guide to make to know how much change you make, view the logo image using your browser to check its dimensions (width and height) and add about 10px for height and slightly more for the width.

To do this systematically, change one feature in the template.css file as indicated, then after each change, look at your site, e.g.,

http://mysite.com

and see if the change is making any difference. If you do not see any change, you may have to “clean cache” and use the reload button several times.

It is very important to change one css specification at a time so that it is much more clear to see its impact on the layout. If you do them all at the same time, it is difficult to know sometimes how to change it, if the overall visual effect of the changes is not the best.

Note also that before I make any changes, I copy them first in the one I added

/* orig changed added */

note also that the “} /” (close bracket and slash symbols) must have space between, and also if you have the ones added opened and closed with “/*” and “*/” like this, for example,

/* orig width: 278px; background: url(../images/logo.gif) height: 42px; top: 20px; changed added */

the server will not read them, but they serve as guides for you, in the future.

Why is this important?

Because there are times when you might change your mind, for example in other CSS specifications. And so you want to know what the original specification was, which is indicated by the code

orig => for original specification

This is specially critical for color, text size, margin, spacing, etc., when your changes may look ugly or not appropriate after, let us say after you changed the background color.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#257991

The other question to answer is this: Do you always have to have logo.gif?

The answer is NO.

Sometimes, you do not have the tools to create a “gif” image file, you can create your logo, either as “jpg”, “png”, etc. I found out that the png is more clear and the byte size is less than a jpg image file, so I make mine as logo.png

or I have it in my computer with the correct name, e.g., innovative-biomedicaLAB-logo.png, so that I know what to look for, since I have so many different sites and their corresponding logos.

To make the changes, following the same procedure as indicated above, follow this route path:

public_html => templates => ja_teline_ii => images

to open the images directory. Use FTP to upload your logo image in the images directory. Once it is uploaded find the image, e.g.,

innovative-biomedicaLAB-logo.png => rename it simply as logo.png

do not rename it as logo.gif, some image files would not accept that and it will corrupt your image file, and be destroyed.

After you are done with that, go back to the CSS directory. based on this route path:

public_html => templates => ja_teline_ii => css => template.css

Tip: Note that both the “images” and the “css” directories are in the ja_teline_ii so all you have to do is go back to the ja_teline_ii and find the css directory:

ja_teline_ii => css => template.css

if you still have your template.css file open from the previous change (as outlined above), just find logo again, and you will end up with

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

change:

logo.gif => logo.png

and use your browser to check your site

http://mysite.com

to ensure that the correct logo appears. You may have to clean your cache and click the reload button of your browser several times. If you are using Internet Explorer, sometimes the clear cache does not work, so you have to manually delete the cache file.

Cornelio

[Author]

Posts