Trick to Achieve Logo and Header Image Overlay in Atahualpa Theme

Pyramid Investing blog uses Atahualpa Theme (version 3.4.2 at the time of this post) that is developed for blogs based on WordPress. I am very satisfied with richness of theme’s features, design and the multitude of ways it can be customized. I was able to go through theme options and make desired changes in no time.

Pyramid Investing Blog Logo

While setting up the blog header, I run into a small issue. The theme did not offer an option that I was intending to use:

Header area, among other things, consists of logo area and randomly displayed image. Logo area, on the other hand, contains blog logo, blog title and blog tagline. The theme options offer blog title and blog tagline to be overlaid on top of header image. However, there is no option to overlay the blog logo as well. My intention was to have blog logo, title, tagline and image, all in the same line.

The solution to this idea can be achieved in a few different ways. My modest programming skills did not produce desired solution by modifying the theme’s code. Thus, I was left to use a little trick to get around nonexistent option. Instead of having the code to do the job of overlaying the logo and the header image, I used photo editing software to create header images that already contain blog’s logo overlaid! Thus the only things left to be overlaid by the code were blog title and blog tagline, which was possible to achieve through theme’s options.

An example of randomly displayed 380px by 150px image

I decided to leave default fluid layout width (99%). However, I imposed fixed min and max widths (770px and 994px respectively). With that in mind, my header image did not need to exceed 994px. I also decided to use default header image height of 150px. Then I created Pyramid Investing logo (the U shaped stock chart) that I resized to 150px height. I also removed the layout’s left sidebar and kept only right sidebar at 380px. I wanted the randomly displayed image to be roughly the same width as layout’s right sidebar. That determined the size of images I am to use for the header image: 380px by 150px.

For the simple photo editing needs, I was able to use Paint from Microsoft’s accessories list. Here is a sequence of operations to produce header images:

Open Paint and go to Image –> Attributes…
Set the Width to 988px and Height to 150px (this will be the size of canvas)
Go to Edit –> Paste From…
Select the blog logo gif or jpg
Click Open and the logo will be inserted in the upper left corner of the canvas
Just click somewhere off the inserted logo
Scroll to the far right of the canvas and do the insertion of prepared 380×150 image
Before clicking anywhere else, click on newly inserted image and move it to the right until it aligns with the right edge of your canvas
Click to File –> Save As… and save your finished header image

Repeat this process for as many header images as you want to have in your selection. Obviously, these images will all have exact same left portion with the logo. The middle area will be blank white (or other color depending on your canvas). The right portion will differ based on your choice of actual images.

Now, you can upload all these header images into the appropriate folder on your blog’s website: [your-blog.com]/wp-content/themes/atahualpa/images/header

Lastly, go to Atahualpa Options –> Header Image and set Header Image: Alignment to ‘top left’ and chose ‘Yes’ for Overlay Blog TITLE Over Header Image(s) and Overlay Blog TAGLINE Over Header Image(s). Finally, tweak margin-top and margin-left pixel values until you get your title and tagline satisfactorily positioned over the blank area of header image.

Visit your blog and hit refresh to test blog’s header images. Voila! The trick worked.