Change Header image

General questions relating to Joomla! 1.5 There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Locked
deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Change Header image

Post by deano927 » Sat Aug 11, 2012 9:33 am

I currently have a flash.swf header but have been told that it's better for SEO purposes to switch to a normal image. I wish therefore to change to a .gif image but unsure what requires to be changed to make this happen. I believe the index.php doc needs editing, but there is so much data relating to flash/adobe/flash container in this doc that I'm nervous about deleting in case it damages my site.

Appreciate any advice.

Thanks,
Dean

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 11, 2012 1:17 pm

Hi Dean,

Do you have the flash movie in a module? If so then just remove that module and create a new custom HTML module with your image in, and place it in the position where the flash module was. You may need to use some CSS to get it looking perfect.

This is assuming a lot as there are a few different situations you could have, whether the flash movie is not in a module and is actually hard coded in the index.php for example.

Would be handy to see some code so we could advise further.

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Sat Aug 11, 2012 2:08 pm

Hi Faldinio - Thinking about it, I don;t think that module relates to my header, i believe it's one that I may have created subsequently, but not activated. Sorry to confuse you!

Regards,
Dean

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 11, 2012 2:49 pm

If you're removing the flash movie anyway, then you should be able to get rid of everything within the <object> tags. From the code you send me, it looks like you could remove everything between

<div class="art-header">

and the corresponding closing </div> tag (the last </div> tag your copied), then use CSS to style the div and add an image background, or put an img tag within the div itself. Back up your files before making any changes.

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 11, 2012 5:12 pm

Dean, please can you post replies in the forum instead of sending private messages, so others can see.

You don't need any 'flash' information to add a gif, you only need the img tags. I suggest reading through W 3 Schools pages on how to use img tags.

http://www.w3schools.com/tags/tag_img.asp

Basically you can just replace all the flash info with

<img src="path_to_image/image.gif" alt="image_description" />

You can add other attributes as well if you wish. See the tutorials for guidance.

http://www.w3schools.com/tags/tag_img.asp

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Sat Aug 11, 2012 5:34 pm

Thanks, I shall take a look at the tutorials and see how I get on. Apologies for sending PMs - thought I was replying in the forum - oops!

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Mon Aug 13, 2012 1:47 pm

Hi

I can't see evidence of my latest message to you on here, so will re-send:

I am happy with the format of the new image tag which I've created, but unsure whereabouts within the index.php doc I should place the script. Also if I need to update any other doc on my site?


Below is the script within the index/php doc relevant to the current flash header, would appreciate your advice on where the new image tag should be placed and what existing data can be deleted. Many thanks!

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/swfobject.js"></script>
<div id="art-flash-area">
<div id="art-flash-container">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1013" height="202" id="art-flash-object">
<param name="movie" value="<?php echo $templateUrl; ?>/container.swf" />
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&clip=<?php echo $templateUrl; ?>/images/flash.swf&radius=15&clipx=0&clipy=0&initalclipw=1013&initalcliph=202&clipw=1013&cliph=202&width=1013&height=202&textblock_width=0&textblock_align=no" />
<param name="swfliveconnect" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="<?php echo $templateUrl; ?>/container.swf" width="1013" height="202">
<param name="quality" value="high" />
<param name="scale" value="default" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="color1=0xFFFFFF&alpha1=.30&framerate1=24&clip=<?php echo $templateUrl; ?>/images/flash.swf&radius=15&clipx=0&clipy=0&initalclipw=1013&initalcliph=202&clipw=1013&cliph=202&width=1013&height=202&textblock_width=0&textblock_align=no" />
<param name="swfliveconnect" value="true" />
<!--<![endif]-->
<div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/down ... player.gif" alt="Get Adobe Flash player" /></a></div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<script type="text/javascript">swfobject.switchOffAutoHideShow();swfobject.registerObject("art-flash-object", "9.0.0", "<?php echo $templateUrl; ?>/expressInstall.swf");</script>

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Mon Aug 13, 2012 2:31 pm

Looking at it, you should be able to remove everything and just replace it with the image. So you'd have something like:

<div class="art-header">
<img src="path_to_image/image.gif" alt="image desc" />
</div>

Without seeing the whole file and the CSS, I can't determine whether the two other divs (art-header-png & jpg) are actually adding any value, so I have just not included them.

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Mon Aug 13, 2012 3:03 pm

Thanks for your reply. Yes, I believe both the art-header-png & jpg do add value - they give colour and shape to the background/padding - so I would wish to retain them. That being the case, how should the new code be written?

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Mon Aug 13, 2012 3:06 pm

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Mon Aug 13, 2012 11:32 pm

I changed the script and it works perfectly. I'm delighted and want to thank you very much for your assistance - it's most appreciated!

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Tue Aug 14, 2012 8:33 am

You're welcome.

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Fri Aug 17, 2012 1:11 pm

Following on from my previous request, can you advise me how i can add a background to the header image. My new header is fne, but i have a white line between that and the body of the site, implying to me that it needs a 'black' background to cover this. The code includes the header.png and header.jpg but neither of these images is kicking in!

The code entered:

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

Thanks.

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Fri Aug 17, 2012 1:18 pm

I think the header images you are referring to are:

<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>

These are not images, they are 'containers'. You need to style them using CSS if you want them to have an image as a background, or put an img tag within them if you want them to have an image inside them.

To make the background of your div black, then you just need to find the line in the CSS stylesheet that refers to "#art-header" and add "background:#000". If there is no previous styling then just add the following line to your stylesheet:

#art-header {background:#000}

Thanks

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Fri Aug 17, 2012 1:36 pm

Thanks very much for the advice - most helpful & much appreciated!

I shall have a go and let you know how I get on.. :-)

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Fri Aug 17, 2012 1:39 pm

Sorry the line should be ".art-header" rather than "#art-header" as it is a class not an ID

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Fri Aug 17, 2012 8:49 pm

Not sure how to 'script' the art-header png to convert into a background image file. Also, do I edit in the template.css file only, or also in the index.php file?

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 18, 2012 9:48 am

You would edit the template.css file.
Read up on CSS styling as it can do some amazing things.

http://www.w3schools.com/css/

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Sat Aug 18, 2012 11:07 am

I'm a bit confused (not for the first time!). The art-header png in template.css already includes a 'background' image file (header.png) (with which I am happy), so do I not just edit the script in the index.php (incorporating the art-header png to reflect this? Or do i need to edit the script in the index.php file to specify the path to the header.png file? Hope that makes sense!

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 18, 2012 11:36 am

If the image is fine, then why are you trying to change it?

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Sat Aug 18, 2012 11:43 am

Sorry if I've not explained myself clearly! I want to include the header.png file as a background to the image I have set (header.gif) as my header. Reason being that it defines the shape. I thought I may be able to include this in the script on the index.php file? The code currently on this file is shown below, but as you point out... the PNG and JPG file are only containers.

<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
<img src="path_to_image/image.gif" alt="image desc" />
</div>

I would appreciate your further advice, and sorry to be a pain!

Faldinio
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 112
Joined: Mon Mar 14, 2011 10:15 am
Location: UK
Contact:

Re: Change Header image

Post by Faldinio » Sat Aug 18, 2012 11:47 am

They are only containers but they can have backgrounds set in the CSS file, as per your previous post, the art-header-png has a background property set that specifies header.png as the background.

If you want that as the background, an easy way would be to just put the img tag inside that div. Alternatively you could use CSS to position the image.

Putting the image inside the other div:

<div class="art-header">
<div class="art-header-png"><img src="path_to_image/image.gif" alt="image desc" /></div>
<div class="art-header-jpeg"></div>
</div>

deano927
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Aug 11, 2012 9:26 am

Re: Change Header image

Post by deano927 » Sun Aug 26, 2012 8:30 pm

I have changed my header, but still getting a shadow effect on my header (to the left & right) I managed to remove the shadow above the header by changing the 'padding' in the template.CSS (from 5px to 0px) but this had no impact on the rest of the page. I also have a shadow to the left & right of the main body of the site.


Locked

Return to “General Questions/New to Joomla! 1.5”