Web Hosting Blog » tutorial

New Video Tutorial: Customising HostPay – Part 2

Ben — Thu, 14 Oct 2010 12:59:22 +0000

From our hotly anticipated video series on how to customise a HostPay template, i’m pleased to announce the release of the second installment.

In this video you’ll find out how to create gradient images, change the background colours of page elements, changing bullet styles and also how to change button colours.

In the third and final installment of this video series, we’ll be finishing off the skinning of the front-end template and also how to make changes within the control panel. Part 3 will be coming soon!

As usual, all the videos can be found within the video section of your customer control panel or alternatively you can check out our YouTube channel (Make sure you subscribe to be the first to know about new video releases).

Remember, you need to have HostPay installed before you can follow this tutorial, luckily we have a demonstration on that as well! – Check that out here.

Customising HostPay: Part 2

Any questions or feedback please leave them in the comments box below!

Cheers

Name:Ben Scott

About:As Senior Web Designer, Ben oversees all of Heart Internet's design, usability, SEO and conversion optimisation. Since joining the team in 2009, Ben has redesigned the Heart Internet website as well as the newsletters, HostPay templates, control panel and much more.

Posts by Ben (92)

New Video Tutorial: Customising HostPay – Part 1

Ben — Thu, 15 Jul 2010 08:07:20 +0000

Over the past few months we have been inundated with requests to create a series of videos on how you can customise the look and feel of a HostPay template.

Well, the wait is finally over! You spoke and we listened! Fresh from the Video production studio (Well, me and my laptop) is the first in a series of step-by-step video demonstrations taking you through the process of customising your HostPay template.

The first video from this series is giving you an overview of changing your HostPay templates, swapping in your company logo, CSS tips plus a brief explanation on transferring and editing files.

All the videos can be found within the video section of your customer control panel or alternatively you can check out our YouTube channel (Make sure you subscribe to be the first to know about new video releases).

Remember, you need to have HostPay installed before you can follow this tutorial, luckily we have a demonstration on that as well! – Check that out here.

In the next installment of this video series, you can expect to get into much more detail about changing background, link and text colours and also creating new pages. Part 2 will be coming soon!

Customising HostPay: Part 1

Any questions or feedback please leave them in the comments box below!

Cheers

Name:Ben Scott

Posts by Ben (92)

Tutorial: Creating a Gradient background with a Transparent Logo

Ben — Wed, 18 Nov 2009 12:00:48 +0000

We’ve had a few requests from our reseller hosting customers wanting to know how they can incorporate their own logo into a HostPay installation that uses a gradient as a background image.

I’ve created a tutorial to show you how easy it is to create your own gradient background and also seamlessly overlay your logo over the top.

For this demonstration I’ll be using Adobe Fireworks to create the graphics needed, the same method can be applied using other popular graphics package including The GIMP (Freeware), Adobe Photoshop etc, though the way an effect is achieved may vary from package to package. The final result will create two separate images, a thin 5px width gradient graphic that goes from light to dark blue and a transparent logo.

Click here to view the demo
Click here to download the source files which will include the html, images and the css with full commenting.

Creating a Gradient

Step one: Create the Canvas
Go to: File > New and create a canvas that measures 800px (Width) x 600px (Height) and give it a white background.

Step two: Create a vector box
Draw a rectangle that measures 800px by 150px so it spans the full width of the canvas.

Next, apply a vertical linear gradient to the vector so the top (lighter) colour has the value of #4E99E0 and the bottom (darker) colour has the value of #0066CC.

Step three: Exporting the gradient
We’ll be using CSS to tile the background horizontally across the header so we’ll only need a small 5px slice of the actual gradient image, this way we can save on file size and page load times.

To do this create a new canvas that measures 5px (width) x 150px (height) and copy and paste the gradient into this canvas.

To export/save this graphic, go to: File > Export Wizard > Continue > (Click “The Web”) Continue > (Click Exit if it appears) > Then on the “Format” option on the drop down click “PNG 32″ > Click “Export” > then save your file as gradient.png

Note:
You can also use the slice tool to export a 5px x 150px slice, make sure you select PNG 32 within the “Optimize” window (F8)

You have now created a gradient which we can use as the main background of the header.

Creating a transparent logo

Step one: Setting up the logo
Open your logo in a new canvas by going to File > Open > (Browse to your logo) and click “Open”. Make sure the logo is sat on a transparent background, if your logo sits on a coloured background please see the notes at the bottom of this section.

Set the background colour of the canvas to the “mid” colour of the gradient, this is important as it ensures the logo blends seamlessly with the background when used on the website.

Step two: Exporting the logo
Much like the method in exporting the gradient:
Go to: File > Export Wizard > Continue > (Click “The Web”) Continue > (Click Exit if it appears) > Then on the “Format” option on the drop down click “PNG 8″ the set it to 256 colours then using the transparency picker click on the background (The “mid” gradient colour) of the logo within the preview window. This will then remove that colour from the logo leaving a transparent background. You may notice the edges become slightly “bitty” but that’s fine as these will not be noticeable on the website and will blend nicely with the background.

Note:
If your logo has already got a solid colour as the background – you can remove this at the export stage when picking the colour of the index transparency. For the best result, make sure you adjust the colour of the gradient to match the background colour you removed from the logo so it blends nicely on your website.

We’ll be exporting the logo using index transparency and as a PNG8 – we won’t use the Alpha transparency option as this renders the edges jagged within IE6. PNG32 will create a grey background in IE6, so it’s best to avoid that as well.

Creating the website

Using a few lines of XHTML and CSS i’ll show you how to create a gradient header for your website and also how to align your logo properly on top.

Step one: The Structure
Below is the basic code to create the basic structure of your website & header.

The #container div will contain all your website elements and can adjusted accordingly. The #header div will contain your logo and have the gradient background style applied to it.

Step two: Styling the header
Add the following into the < head > of your document.

The following code assumes your images are in the root of your website relative to your homepage/index.html

Name:Ben Scott

Posts by Ben (92)