Public Forums 71,145 posts

[mu12 Friend mu12Join date: October 2007Posts: 1Downloads:0Uploads:0]

#123073

Hi,

I tried replacing the /templates/images/logo.gif file with my own – but yet the website shows the defaullt logo that came with ja_purity template.

am i missing something?

[vmajor Friend vmajorJoin date: April 2008Posts: 1Downloads:0Uploads:0]

#244807

I am stumped as well (I am a n00b). How do I change the logo to my own one? Joomla logo is purdy, but stil….

V.

[quads Friend quadsJoin date: April 2008Posts: 10Downloads:0Uploads:0 Thanks: 2]

#244855

IIRC, there are two files in there, one gif or jpg and the other is a png.
make sure your css file is calling the correct file or that you are replacing the active file which is being called (ie, it may be calling the png, not the jpg, which you have replaced)

Site link?

[bigrk Friend bigrkJoin date: February 2007Posts: 1425Downloads:0Uploads:2 Thanks: 39 Thanked: 45 times in 15 posts]

#249486

Moved thread. Posted to notify users.

[trainsforyou Friend trainsforyouJoin date: June 2008Posts: 3Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253533

It would be nice to have a Tutorial or instructions to change a logo on these templates

It may be simple for some. but i should be some where to help beginers do the simple things about getting a top menu, and changing the default logo.

I think this template looks great. But i’m not sure where to put the images.

I am using joomla 1.5.3, virturemart 1.1, comunity builder 1.1 legacy.
Site http://trainsforyou.com/

thank you Anthony

[trainsforyou Friend trainsforyouJoin date: June 2008Posts: 3Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253536

Here are some basic instructions to change the logo part.

For Joomla 1.5.3
Changing the Joomla logo in the Purity template

First step design your logo, as a JPG, or suitable image file
/templates/ja_purity/images/

“remember the name of the file”
Upload to your site in the directory

/templates/ja_purity/images/

using your upload tool, Filezilla etc.

Open up your web browser, on two tabs

One with the site, and one in Administrator

In the administrator log-in and go to

Extensions menu

Choose the template you want to edit

Eg
2
JA_Purity

1.2.0 12/26/07 JoomlArt.com

Then Edit
Then edit ccs

And choose

template.css Unwritable

Then edit

Use ctrl f to find “logo” on the page

h1.logo a {
width: 400px;
display: block;
background: url(../images/trainsforyou.jpg) no-repeat;
height: 80px;
position: relative;
z-index: 100;

then Change background: url(../images/logo.png) no-repeat

to the file name you placed there like

background: url(../images/trainsforyou.jpg) no-repeat

click save and apply you may need to change the width and the height.like I did.

Hope this helps you
Anthony
http://www.trainsforyou.com/

1 user says Thank You to trainsforyou for this useful post

1. tbolt

[trainsforyou Friend trainsforyouJoin date: June 2008Posts: 3Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253855

Hi It still dosen’t work in Ie 6 a blank logo and the gif thing
whats that called. Anthony
thanks

[rrijnders Friend rrijndersJoin date: June 2008Posts: 2Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253981

Same problem here. I replaced the CSS with my logo file and uploaded it to the correct directory. My logo now shows fine in Firefox and Safari, but does not show up at all in IE :confused:

~~ rich

[rrijnders Friend rrijndersJoin date: June 2008Posts: 2Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#253983

OK, it appears that the js_purity template expects that the logo is a PNG file as defined here:


h1.logo a {
width: 364px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 72px;
position: relative;
z-index: 100;
}


So far fine. You would expect that you could change that image file to whatever you want (adjusting width / height) and it should work.

But wait!

Note that our logo is actually defined as the background image to the “h1.logo a” tag? In the ja_purity/index.php file I see this:

[PHP]
<?php if ($tmpTools->isIE6()) {
?>
<script type=”text/javascript”>
var siteurl = ‘<?php echo $tmpTools->baseurl();?>’;

window.addEvent (‘load’, makeTransBG);
function makeTransBG() {
fixIEPNG($E(‘.ja-headermask’), ”, ”, 1);
fixIEPNG($E(‘h1.logo a’));
fixIEPNG($$(‘img’));
fixIEPNG ($$(‘#ja-cssmenu li ul’), ”, ‘scale’, 0, 2);
}
</script>
<style type=”text/css”>
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }
#ja-cssmenu li ul li, #ja-cssmenu li a
{
background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;
}
</style>
<?php } ?>
[/PHP]

Note the line:
fixIEPNG($E('h1.logo a'));
Why, that’s our logo tag! And later I see the CSS block:


<style type="text/css">
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }
#ja-cssmenu li ul li, #ja-cssmenu li a
{
background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;
}
</style>

There’s our logo tag again!

It appears that “fixPNG()” is manipulating our header logo tag in some way, and then the re-written CSS block is actually moving the logo tag background (that we meticulously set in the CSS file) right off the page! All specifically for IE. My guess is that fixPNG is loading the PNG image in some other fashion for IE (I haven’t analyzed the code yet) and then the main page blanks the background image (for IE only).

The Solution

Plan A:
First I tried changing my gif image to a png. This made it show up in IE fine, but my png in Firefox and Safari displayed with a funny outline that I couldn’t explain or get rid of.

Plan B:
I went back to using my gif image and simply edited ja_purity/index.php as follows:

1. Removed the call to fixPNG for the logo tag by removing the line

fixIEPNG($E('h1.logo a'));

2. Removed the logo tag from the IE CSS modifier that moved the background image off the screen. To do this, I changed:


<style type="text/css">
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }


to


<style type="text/css">
.ja-headermask, #ja-cssmenu li ul
{ background-position: -1000px; }


…removing the “h1.logo a” tag from the style declaration.

So far in my testing this is working in all three browsers. I haven’t tested this in any other versions of IE or in Opera. If anybody does try this and tests in other versions of IE or Opera, let me know how it works (or doesn’t).

Hope this helps anybody else out there with this issue. I love this template and hope to have a working Joomla/VirtueMart site with it up soon!

~~ Rich

1 user says Thank You to rrijnders for this useful post

1. tbolt

[jazzur Friend jazzurJoin date: August 2008Posts: 1Downloads:0Uploads:0]

#263910

I had no problem at all changing the logo images, since i named them exactly the same, so no need to make any changes at all! worked straight away !

Bu t i would like to know how to change the size of the text on the left?
thx!

[mtporter Friend mtporterJoin date: August 2008Posts: 1Downloads:0Uploads:0]

#265405

is there a way to have a bigger image that would look good in 800 as well as 1024

take a look (may have been fixed by then but go ahead)

just a testing area

http://www.dailyshorts.com/thecomedycatch

i can post my current edited template.css file later

[tbolt Friend tboltJoin date: November 2009Posts: 1Downloads:0Uploads:0 Thanks: 3]

#322527

Just wanted to thank trainsforyou and rrijnders for the detailed posts. Train’s first post did the trick the first time, but I’m glad to see there was follow-up afterwards.

Thanks again! 🙂

[frozendale Friend frozendaleJoin date: December 2009Posts: 1Downloads:0Uploads:0]

#325574

trainsforyou

can you please tell me how to edit the header I’m a real joomla newbie here.

i just check your site and its cool you seemed to change the header so as your logo.

now that you’ve done your part hopefully you could share that to me, by the way i am using joomla 1.5.10

the site is already running, i am using the backend to modify things so as changing the header but i can’t do it because i don’t know where to find the folder which the images is located

regards lordaeron

[vivekbhutra Friend vivekbhutraJoin date: May 2010Posts: 1Downloads:0Uploads:0]

#343311

Hello rrijnders,

Thanks for your suggestion to fix the problem of showing logo in IE6.

It is working for me also 🙂

[egrogg Friend egroggJoin date: September 2010Posts: 1Downloads:0Uploads:0]

#355502

I tried the below and I still see the default logo for JA Purity? Can you or anyone help? I changed to my logo and nothing?

<em>@rrijnders 59556 wrote:</em><blockquote>OK, it appears that the js_purity template expects that the logo is a PNG file as defined here:


h1.logo a {
width: 364px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 72px;
position: relative;
z-index: 100;
}


So far fine. You would expect that you could change that image file to whatever you want (adjusting width / height) and it should work.

But wait!

Note that our logo is actually defined as the background image to the “h1.logo a” tag? In the ja_purity/index.php file I see this:

[PHP]
<?php if ($tmpTools->isIE6()) {
?>
<script type=”text/javascript”>
var siteurl = ‘<?php echo $tmpTools->baseurl();?>’;

window.addEvent (‘load’, makeTransBG);
function makeTransBG() {
fixIEPNG($E(‘.ja-headermask’), ”, ”, 1);
fixIEPNG($E(‘h1.logo a’));
fixIEPNG($$(‘img’));
fixIEPNG ($$(‘#ja-cssmenu li ul’), ”, ‘scale’, 0, 2);
}
</script>
<style type=”text/css”>
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }
#ja-cssmenu li ul li, #ja-cssmenu li a
{
background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;
}
</style>
<?php } ?>
[/PHP]

Note the line:
fixIEPNG($E('h1.logo a'));
Why, that’s our logo tag! And later I see the CSS block:


<style type="text/css">
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }
#ja-cssmenu li ul li, #ja-cssmenu li a
{
background:transparent url(<?php echo $tmpTools->templateurl(); ?>/images/blank.png) no-repeat right;
}
</style>

There’s our logo tag again!

It appears that “fixPNG()” is manipulating our header logo tag in some way, and then the re-written CSS block is actually moving the logo tag background (that we meticulously set in the CSS file) right off the page! All specifically for IE. My guess is that fixPNG is loading the PNG image in some other fashion for IE (I haven’t analyzed the code yet) and then the main page blanks the background image (for IE only).

The Solution

Plan A:
First I tried changing my gif image to a png. This made it show up in IE fine, but my png in Firefox and Safari displayed with a funny outline that I couldn’t explain or get rid of.

Plan B:
I went back to using my gif image and simply edited ja_purity/index.php as follows:

1. Removed the call to fixPNG for the logo tag by removing the line

fixIEPNG($E('h1.logo a'));

2. Removed the logo tag from the IE CSS modifier that moved the background image off the screen. To do this, I changed:


<style type="text/css">
.ja-headermask, h1.logo a, #ja-cssmenu li ul
{ background-position: -1000px; }


to


<style type="text/css">
.ja-headermask, #ja-cssmenu li ul
{ background-position: -1000px; }


…removing the “h1.logo a” tag from the style declaration.

So far in my testing this is working in all three browsers. I haven’t tested this in any other versions of IE or in Opera. If anybody does try this and tests in other versions of IE or Opera, let me know how it works (or doesn’t).

Hope this helps anybody else out there with this issue. I love this template and hope to have a working Joomla/VirtueMart site with it up soon!

~~ Rich</blockquote>

[Author]

Posts