If you are interested, and why wouldn’t you be, here is a summary of the new products and features we launched in 2010.

Name:Ricky Hayes

About:A valued member of the Heart Internet team since 2007, Ricky is a System Administrator responsible for looking after the company's webservers, mailservers, upgrades and security.

Posts by Ricky (16)

The intended purpose of our staging platform is so that your customers can continue to use your existing live site while you make modifications on the staging platform. Once you are happy with your changes, you can then apply them to your live site.

Set up your staging platform
You will find a link to the set up page at the bottom of the “Customise end user Control Panel” page. This link will take you to the brand new “Install HostPay staging site”. Simply follow the instructions and click on ‘Install HostPay staging now’.

Using your staging platform
You are now ready to get started. You can choose to change the theme of your staging area and play with a new look, transfer live files across to the staging areas to start making changes to existing files, as well as view the order confirmation pages etc. Note: If you put through an order in the staging area and HostPay is not in test mode, it will be processed as a genuine order by HostPay.

You asked us for this so it would be great if yet us now how you get on with this new feature. If you have any ideas how we can improve it let us know via your reseller feedback form.

Name:Matthew Telfer

About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for 5 years. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Posts by Matthew (242)

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)

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

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)

Features include:

• Linux or Windows OS
• Dual Core or Quad Core processors
• Monthly or annual contracts
• Dell & Intel technology
• Unlimited bandwidth
• Your own IP address (x2)
• Full root access
• Remote server reboot

There are no minimum monthly commitments expected from you and if you don’t sell a dedicated server you don’t pay for anything. They are essentially pay as you go!

Getting started
This feature has been set as ‘off’ by default, if you would like to turn it on and start selling dedicated servers through HostPay, simply log in to your Reseller Control Centre and within HostPay click on the new icon ‘Dedicated Server Products’. Click the check box to turn it on.

Once you have activated selling dedicated servers within HostPay, you will be shown all the dedicated server products you can sell (along with cPanel and server backups) plus set the prices you want to charge.

Because of the costs involved and to help you prevent fraud, servers are not automatically setup when ordered. If a customer places an order for a dedicated server you will receive a message when you login to your control panel which will contain a special link to process the order.  Once the dedicated server order has been processed your customer can manage their dedicated server via an automatic login link to the Dedicated Server control panel, found in their HostPay end user control panel. Your customers will be able to remotely reboot their machine and view bandwidth graphs in HostPay.

What is HostPay?
HostPay is a highly customisable shopping cart 100% free for all Heart Internet Resellers. It allows you to sell web hosting, domains, dedicated servers and add-on products to end users through your website, as well as registering and transferring domains; activating web hosting packages in real time and selling a range of add-on products. Read more about HostPay.

Name:Matthew Telfer

About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for 5 years. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Posts by Matthew (242)

Both templates have adapted characteristics of modern looking web 2.0 sites you may find online, this breaks away from the more traditional style of design web hosting companies have used over the years and gives you something that’s completely different, but still conveys the right message. Each templates homepage caters for a large promotional pitch at the top, this can be changed to anything you desire, we’ve also added a sprinkle of jQuery magic to one of the templates, to create a slideshow effect that dynamically rotates various messages. We’ve taken the time to include a couple of blank message templates which you can change accordingly using your favorite graphics package (Mines Fireworks!) or use it as a basis to create your own! As usual the templates are built with XHTML/CSS and are fully W3C standards compliant.

We hope you enjoy these new-look templates and would certainly love to hear what you think about them!

Screenshots below:

Template 1:

Template 2:

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)

To get started log in to your HostPay control panel and click on ‘Payment Gateways’. From here you can input all your details and styling information to activate PayPal Pro. Before starting we would recommend you read our payment gateway set up guides which will help you get up and running as quickly as possible.

This follows the recently added Customer support ticket system in HostPay and Exclusive monthly contract dedicated servers for resellers.

Name:Matthew Telfer

About:Matthew is Heart Internet's Marketing Manager, and has held senior marketing positions in the web hosting industry for 5 years. With a passion for online marketing, Matthew is responsible for shaping strategy and developing the Heart Internet brand.

Posts by Matthew (242)

The new system allows you to manage many customers quickly and ensures that you are only dealing with a genuine customer. Continue reading to find out more and how to activate the ticket system for your customers.

HostPay control panel
The system is so easy to set up and manage we are really proud of it. I might sound like Steve Jobs here but it’s pretty awesome…

Activate the ticket system
To activate the ticketing system log in to your Reseller Control Centre > HostPay > “Customer Control Panel” and scroll down to “Contact support”. You will see a new option has been added called “HostPay Ticket System”. Click on the radio button and you are done!

Admin and replying to tickets
You can either click on the link displayed in the activation box to take you to the ticketing admin area or go directly from the HostPay control panel front page where we have added a new icon called ‘Support Ticket System’. From here you will manage all your customer tickets including the ability to view all your tickets, reply to any new or open tickets, assign a ticket to another operator, close a ticket and search tickets by operator, customer name, ticket status or type in keywords. When customers raise a ticket you will be emailed to let you know that it is there.

Your customers control panel
Your customers can now raise tickets directly from within their control panel.

Once you have activated the ticket system within your own HostPay control panel, by default clicking on “Contact support” will take your customer to their ticket summary page where they can view their ticket history, reply to any updated you have given them or close the ticket themselves.

From here they can also raise a new ticket…

Your feedback
We are always looking for new ways to make our products even better and thanks to all your feedback we have created this ticketing system. If you have any other ideas or suggestions you would like to see added to your reseller hosting let us know through the feedback form in your control panel. We read every single one and we have literally already acted on thousands of them over the years.

Name:Jonathan Brealey

About:As a Director and Co-founder of Heart Internet, Jonathan developed the company based around innovative features, user-friendly functionality and excellent customer support. Jonathan has been a key player in shaping the UK web hosting industry since 1997, having co-founded WebFusion with Tim Beresford.

Posts by Jonathan (79)

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.

<body>
<div id=”container”>
<div id=”header”>
<img src=”logo.png” alt=”Your Logo Name” />
</div>
</div>
</body>

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

<style type=”text/css”>
body {margin: 0; padding: 0; background: #e4e4e4;}
#container {width: 900px; background: #fff; height: 500px; margin: 0 auto;}
#header {width: 900px; height: 150px; background: #06c url(gradient.png) repeat-x top;}
.logo {padding: 60px 0 0 60px;}
</style>

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)

You’ll notice it’s very text heavy, not only will this benefit you from a search engine optimisation point of view but it also allows you to modify this to your own requirements very quickly (Plus it loads extremely fast!). We’ve added some fancy effects like rounded corners and text shadows for all the Firefox/Safari/Chrome users out there! Don’t worry it will still look great in Internet Explorer!

Feel free to leave your comments on this new template set. (Don’t forget to send us a link if you use this template for your own hosting company, we’d love to see it in action!)

Screenshots below:

To apply this new template design please login to your customer control panel.

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)