You can preview the result of this tutorial HERE.Tutorial Updated to ocPortal version 9
This tutorial will show how to change the Header image Background and use the original Logo block to add a simple animation. It will make only two small changes to the global.css file. This should not be too challenging for new users. Follow each step and look at its attached illustration for reference and you should be able to change the Header in a satisfying way.
I've used the logo to overlay a simple animation. You can download it here.
Otherwise, you can find an extensive library of free animated gif at Gifs.net Free Animations.
Home–>Admin Zone–>Style–>Manage themes; choose your current theme and click on Edit CSS (styles)
Select global.css and press the 'Choose' button.
Scroll to line 440 and 456 and remove the comments.
This will replace the small left top logo with the larger header image template.
step-2 A small css modification will overly the top logo on the header image.
Again In the global.css file, scroll down to line 450 and change display: none; to:
Do not worry about the look at this point, it will all make sense in the next steps.
Changing the Images
Select General, scroll down to header and click to edit.
Right click on the image and ask your web browser to save it.
Use your favorite Image editor to compose your own header:
Finally, upload the new version of your header image:
step-4 Next, from the Manage theme images interface find and edit the 'logo/-logo' image.
Replace by uploading 'birds.gif' and save.
That's it. You now have a nice new animated top header.
You can view the result of this tutorial HERE.