Web Hosting Blog » css

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)

New! 2 Stylish HostPay Templates Released

Ben — Wed, 24 Feb 2010 12:56:27 +0000

Fresh from the creative depths of our web design workshop has emerged a pair of brand new HostPay templates. These templates have taken on a different look from our previous releases as to give our customers a greater choice when selecting a style for their web hosting company.

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

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)

New – Free Premium HostPay Template Released

Ben — Tue, 17 Nov 2009 09:01:39 +0000

It’s my pleasure to announce the release of our 3rd Premium style HostPay template. This web 2.0 style hosting template comes in four different colour variations: blue, red, green and grey and is available to all our Reseller hosting customers completely free of charge. Following on from the theme of our previous templates it’s CSS based, XHTML/W3C standards compliant and extremely easy to modify and adapt to your own brand, we’ve made everything as highly configurable as possible only using images where needed.

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

Posts by Ben (92)

CSS Tutorial: Create rounded corners with only one image

Jonathan — Mon, 29 Sep 2008 09:26:12 +0000

We’re going to show you how to make expandable rounded corners with CSS. Using our method will require only 6 HTML tags and one background image (yes, ONE image for all 4 corners!). It also validates, works across all the major browsers, and looks great in your source code.

Download the full rounded corners tutorial below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

Making the corner images
One downside of most of the other methods for rounded corners is that you require multiple background images, one for each corner. With our method you only need one. If you take a look at corners.gif in the source files you’ll see how you need to set up your image. The basic premise is to create a full circle, chop it up into 4 segments and put each segment in the opposite corner to what it started in (top left would go into the bottom right, etc).
The last thing to do is put a white (or other colour) background behind the segments and then save the image.

HTML Code

Heart Internet

Keeping the HTML short and valid is important for many reasons, so for the rounded corners we’re going to use an unordered list with some span elements. There may be shorter methods, but this is quick, easy, and validates.

The full tutorial including HTML, CSS and Graphics can be download via the link below:
http://www.heartinternet.co.uk/blog/Rounded_Corners.zip

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)

Create a drop shadow effect for your website using CSS

Jonathan — Sun, 17 Aug 2008 08:05:21 +0000

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out.This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:
http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

The shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:

Your Content Here

CSS Code:
body {
     background-image: url(images/background_760.jpg);
     background-repeat: repeat-y;
     background-position: center;
     background-color: #f7f4ee;
}#container {
     width: 760px; margin: 0 auto; text-align: center;
}

Download the full tutorial here:
http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

Name:Jonathan Brealey

Posts by Jonathan (79)

Create a super fast website navigation with a single image and CSS

Jonathan — Wed, 06 Aug 2008 06:11:54 +0000

This tutorial will show you how create a navigation for your website using CSS and a single image so there’s no loading times for the rollover states, resulting in smoother transitions.

The trick to creating a seamless rollover is to have both the normal and hover (Rollover) states in a single image and then use CSS to move the image accordingly.

HTML Code: (This goes between your tags)

Stylesheet Code:
#navigation ul {
     width: 333px;
     height: 27px;
     background: url(navigation.gif) no-repeat 0 0;
     list-style: none;
     padding: 0;
     margin: 0 auto;
}
#navigation li { display: inline; }
#navigation li a:link, #navigation li a:visited {
     display: block;
      text-indent: -7000px;
     outline: none;
     height: 27px;
     width: 100px;
     float: left;
}
#navigation li.navhome a:hover {
      background: url(navigation.gif) no-repeat 0 -27px;
}
#navigation li.navhosting a:hover {
      background: url(navigation.gif) no-repeat -100px -27px;
}
#navigation li.navcontact a:hover {
      background: url(navigation.gif) no-repeat -200px -27px;
}

And that’s it!

Be sure to add the CSS code either within the tag of your website or within a separate stylesheet.

Don’t worry if you are having troubles with this tutorial, you can download all the files associated with it below. If you look in the code of the html you will see everything commented to help you understand how it works and also help you modify it for your own website.

Download this tutorial:
http://www.heartinternet.co.uk/blog/HI_Tutorial_Navigation.zip

Name:Jonathan Brealey

Posts by Jonathan (79)