Connections Reloaded Header

Had made this for Clifford Lee and have decided to release it to everyone since it has been highly requested.

Connections Reloaded Header

You can now download the header for Connections Reloaded in .psd. You will need Photoshop to open the .psd file.

The .psd contains three layers, viz. BG, header and topnav.

header is the image of the car in the tunnel you see above.
topnav is the top navigation bar just above the header.
BG is the rest of the image.

BG has been placed above both, followed by header and topnav.

If you want to change the colour of the top navigation bar, all you need to do fill the topnav layer with the desired colour.

Fill the header layer with whatever colour or image you want. It has to be a minimum of 741×143 pixels in order to fill the rectangular area. Ensure that the image doesn’t go too high up or it will cover the top navigation area.

Note that this psd can be used even if you are using the original Connections theme and would like to customize the header. I have created the psd using the top.jpg file.


Share this post with your friends!


  1. Have you considered taking the actual photo out of the header? I had made this same PSD with the layers to create the different random images I have in my own but I didn’t like having to create each of them in photoshop each time. I haven’t got around to modifying the CSS and the layout for the header to make a containing frame for the photo in it (mainly because I don’t have to now that I’ve made some 30 images already with the frame 🙂 but I thought it would be a good thing. And would simplify customising (could even make the header a configurable option in the admin screen)

  2. I have considered that eduo. But like you said it is going to be one task all right!

    Mainly because I will need to create the surrounding frame.

    I think it would be a lot easier to just work on the psd to create your custom headers.

    Regarding making it a configurable option, this is on high priority.

    Have been considering the theme-toolkit for this.

    Also thinking of implementing random headers. Just little stuff to play around with in Revolutions.

  3. Ajay,
    Thanks for sharing Connections Reloaded for WordPress. Your excellent installation guide made it very easy for me to install this them.



  4. I found this today, which may help those that like me were looking for a way to rotate the headers.

    I myself did it directly in PHP in the tag itself, but this may suit better those that prefer automated routines and don’t want to code directly. I just changed mine and it works.

    While I put it I realised I was sick of having to create the frames for the header each time, so I did some changes to the header.php file and the style.css file. You can check in that now the photo itself is a 741×143 JPG and the frame is a gif that can be cached by the client. This also means that the photo itself can be smaller (important in rotating headers) and that the frame image, by being saved as a gif, can lose the artifacts it was showing before and can be cleaner. I worked around the \”PNG alpha channel bug\” in IE by using a transparent GIF. The colors, when taking the picture out, are enough for a gif. While I was doing this I also made the green \”links\” bar a background color as well, which may help in future customisation optins for your theme, should you wish to go that way. Let me know if you’d be interested in these.
    Other small changes I made to the theme:
    -Added if(function_exists()) to all plug-ins, so deactivating any plug-in currently won’t break the theme.
    -Added the \”fixed stylesheet\” plug-in to place all plug-in related style separate from the theme ( )
    -Modified subtly header.php to come up with wpg2header.php (and footer, mind) to integrate better with G2:

  5. Nice job Eduo.

    Thanks for spreading the news about it to me as well.

    Will take a closer look at the links soon.

  6. No worries. I did it last night but had it in my head for a while. I’ve tested it in Win/Mac Firefox, Win IE and Mac Safari. All the header section seems to work OK. In reality I did it because I was sick of having to do the \”Photoshop -> Layer -> Action -> Save\” dance. Now I only have to do a crop action (and, technically, I could have the G2 gallery do it automatically, but I won’t go there). I still have to polish the \”frame\” (there are some leftover artifacts from the JPG encoding) but I’ll probably leave it as it is. I’ve taken out the photo and the title box, which can now be configured separately (and thus included in an admin page too) so I can feel satisfied for a while.

Comments are closed.

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.