Sunday, August 1, 2010

Creating a Rotating Header Image For your Artisteer Joomla Template.

I have seen a lot of different tricks out there for this, but most of them require lots of hacking and code modifying. The average user without a lot of code knowledge might have tons of trouble or errors. In this tutorial, I'll show you a way to do it, that will not require a lot of code steps or skills to achieve the desired effects.

1. Adding a "header" position to your template's index.php.

Open up your template's index.php and find where the code says: <div class="art-header">. Right after the closing > add the following code:

<!-- begin header -->
<div class="Header">
<jdoc:include type="modules" name="header" style="xhtml" />
</div>
<!-- end header -->

2. Adding the Position to your template's templateDetails.xml

In your template's templateDetails.xml, find the code where it looks like this:

<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>banner</position>
<position>header</position>
<position>footer</position>
<position>pathway</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
</positions>

Add <position>header</position> to the list of positions somewhere in between the <positions></positions> tags.

3. Install Simple Image Rotator into your Joomla Website.


4. After the module is installed, go to the module manager, and open the "Simple Image Rotator" module. You will need to do 5 things.

On the left column:

  1. Change "show title" to no.
  2. Set "enabled" to yes
  3. Change the "position" to "header"
On the right column:

  1. Set the "image folder path" to the location on your server where you have put your header files.
  2. Change the "Image (header) width" and the "Image (header) height" to the width and height of your images.
Save and look at your page! now the images will cycle at random through your images! I hope this helps the people like me who have wanted to do this function, but didn't want to spend a lot of time and effort making this happen.
Posted by at
Labels:

4 comments:

  1. AnonymousJanuary 30, 2011 at 7:29 PM

    Used this and it was exactly as you said, short and sweet. Worked well to get the jpegs in the header and rotating. I just need a little more help how do you right justify them and also I am using a menu in the user3 position and I can't seem to get the pics to align to the top of the header and there is a strip above the pic and it is cutoff below. I am a newb at joomla but trying hard.

    ReplyDelete
  2. Duncan HarmsworthJanuary 30, 2011 at 7:54 PM

    When I used this module for www.arizonasportsmenforwildlife.org I made the header image exactly the size of the header, and used the exact same dimensions as the image in the module. Even though it looks like just the pictures change on the left, really the whole header changes. I find a lot of the time building web pages requires some illusions in order to make the clients happy. As long as they see what they want, I have a satisfied customer.

    As for your padding/margin issue, without being able to see the page I would guess that you might need to specify the parameters in the index.php file.

    Whichever Div you put the header position code in, I would add style="margin:0px; padding:0px" to the div.

    If that doesn't work, then I need to see what is happening, and then I am sure I can help.

    ReplyDelete
  3. AnonymousJanuary 31, 2011 at 4:37 PM

    Duncan - Thanks for taking the time to help me. I put the code in the template's index.php and it didn't do anything different. I think I got it in the right spot. I set the header height in Artisteer to 100px and the images are the same size. It looks like they line up at the bottom of the user3 menu. The site is scosparish.cloundaccess.net. If you can find the time to look at it I would greatly appreciate it.

    Bob

    ReplyDelete
  4. Duncan HarmsworthJanuary 31, 2011 at 6:10 PM

    Ok, first the typo in the url through me for a loop. I assumed your site is at cloudaccess, not cloundaccess.

    Now, I think it might be a nesting issue. My code is as follows:

    <div class="art-header">
    <!-- begin header -->
    <div class="Header">
    <jdoc:include type="modules" name="header" style="xhtml" />
    </div>
    <!-- end header -->
    <div class="art-header-png"></div>
    <div class="art-header-jpeg"></div>


    And your code is:

    <div class="art-header">
    <div class="art-header-png"></div>
    <div class="art-header-jpeg"></div>
    <!-- begin header -->
    <div class="Header">
    <jdoc:include type="modules" name="header" style="xhtml" />
    </div>
    <!-- end header -->


    I think your

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

    needs to come after the

    <!-- begin header -->
    <div class="Header">
    <jdoc:include type="modules" name="header" style="xhtml" />
    </div>
    <!-- end header -->

    I hope this helps.

    ReplyDelete

Subscribe to: Post Comments (Atom)