The Joomla! Forum ™



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.



Post new topic Reply to topic  [ 23 posts ] 
Author Message
 Post subject: Change Header image
PostPosted: Sat Aug 11, 2012 9:33 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 11, 2012 1:17 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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.

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 11, 2012 2:08 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 11, 2012 2:49 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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 of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 11, 2012 5:12 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 11, 2012 5:34 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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!


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Mon Aug 13, 2012 1:47 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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&amp;alpha1=.30&amp;framerate1=24&amp;clip=<?php echo $templateUrl; ?>/images/flash.swf&amp;radius=15&amp;clipx=0&amp;clipy=0&amp;initalclipw=1013&amp;initalcliph=202&amp;clipw=1013&amp;cliph=202&amp;width=1013&amp;height=202&amp;textblock_width=0&amp;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&amp;alpha1=.30&amp;framerate1=24&amp;clip=<?php echo $templateUrl; ?>/images/flash.swf&amp;radius=15&amp;clipx=0&amp;clipy=0&amp;initalclipw=1013&amp;initalcliph=202&amp;clipw=1013&amp;cliph=202&amp;width=1013&amp;height=202&amp;textblock_width=0&amp;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/download_buttons/get_flash_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>


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Mon Aug 13, 2012 2:31 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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.

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Mon Aug 13, 2012 3:03 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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?


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Mon Aug 13, 2012 3:06 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
<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>

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Mon Aug 13, 2012 11:32 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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!


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Tue Aug 14, 2012 8:33 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
You're welcome.

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Fri Aug 17, 2012 1:11 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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.


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Fri Aug 17, 2012 1:18 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Fri Aug 17, 2012 1:36 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
Thanks very much for the advice - most helpful & much appreciated!

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


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Fri Aug 17, 2012 1:39 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
Sorry the line should be ".art-header" rather than "#art-header" as it is a class not an ID

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Fri Aug 17, 2012 8:49 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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?


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 18, 2012 9:48 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
You would edit the template.css file.
Read up on CSS styling as it can do some amazing things.

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

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 18, 2012 11:07 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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!


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 18, 2012 11:36 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
If the image is fine, then why are you trying to change it?

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 18, 2012 11:43 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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!


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sat Aug 18, 2012 11:47 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Mon Mar 14, 2011 10:15 am
Posts: 111
Location: UK
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>

_________________

Faldinio of -
Localorie Media & Design | http://store.localorie.co.uk


Top
 Profile  
 
 Post subject: Re: Change Header image
PostPosted: Sun Aug 26, 2012 8:30 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Aug 11, 2012 9:26 am
Posts: 115
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 23 posts ] 



Who is online

Users browsing this forum: No registered users and 31 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group