If you want people to be able to email you from your site, but don’t like spam (who does?) then our new and improved Form to Email is what you need. It’s available through Heart Internet’s eXtend 2.0 Control Panel. Click on Form to Email, choose a directory to install into and it will be installed and configured for you.

Thanks to the addition of an image code verification field, like on most website registration forms, only real people will be able to send you email. This should help keep your inbox a bit cleaner.

The form is completely customisable and will allow you to put all sorts of form data into it. Anything from text boxes to radio buttons will be submitted to you by email.

You can change the email address that the form is submitted to, as well as setting up a page for the user to be forwarded to thanking them for their message.

Log in to eXtend (https://customer.heartinternet.co.uk/manage/) to give it a go.

Yes that’s right! With every Heart Internet hosting package we will give you access to our extensive resource library containing over 23,000 elements. Our massive digital library consists of web templates, logos,  flash banners, clipart, photography and much more, which can all be freely used within your web projects.  With so many high-quality templates available you can have a professional looking website within minutes. We also supply a fully layered Photoshop file and a font pack should you need to make any changes to the graphics. As an added bonus , every customer who has a Reseller hosting package with us will also be able to provide each of their clients access to the same resource library at no extra cost!

Free Resources Include:
- 22,500 Photos which are all intuitively categorised
- 50 Premium Web Templates
- 100 Extra Templates
- 400 Basic Web Templates
- 16 Flash Templates
- 5 Hosting Templates
- Over 100 Logos
- Flash Banners
- Clipart
- Software
- Plus much more!

With so much choice it’s never been easier to create a professional looking website! For more information on all our hosting packages please visit:

http://www.heartinternet.co.uk/hosting-h.shtml

Heart Internet customers also get access to a large CGI library of scripts to which they can easily install via our powerful eXtend 2.0 control panel, for more information please visit:

http://www.heartinternet.co.uk/cgiscripts-r.shtml

We migrated Web Builder Plus to a much faster server yesterday and also upgraded the software to the latest release. I know that some people had experienced slow login times on the previous version and this problem has now been resolved. The update also brought about a quite a few enhancements and some bug fixes.

If you have not tried Web Builder Plus before then click the link below to try the demo:

http://79.170.40.72/

To find out more about Web Builder Plus visit:

http://www.heartinternet.co.uk/webbuilderplus-r.shtml

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
<ul class=”roundedCornerWrapper”>
    <li class=”top”>
        <span></span>
    </li>
    <li class=”middle”>
        Heart Internet
    </li>
    <li class=”bottom”>
    <span></span>
    </li>
</ul>

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

 
We have just done a really special deal with Serif the software company based just a few miles away from us. We are offering the full and latest version of their popular web design package WebPlus X2 for FREE with the Heart Internet Home, Business or Reseller web hosting packages.

This really is a great piece of software, the guys at Serif gave us a demo of it a few months ago and we were surprised at how good it is. As well as being Vista certified the software has loads of very neat features. My particular favourite is the flash photo galleries, you just select your photos, choose the photo gallery look and feel and it’s done. The styles are right up-to-date, when you visit one of the galleries you think someone has worked on it for hours.
 
That’s just one of the features, I’ve also been trying out WebPlus Smart Objects as well. You can choose from phpBB forum, a blog, access control, mailing list, website poll and a few more. Again you just click your mouse a few times to setup the feature in your website.

The basics are well thought out also, like the way you can easily change site navigation just by dragging and dropping.

A couple of other hosting companies have offered WebPlus before but it has always been a cut down, older version. For example with one you can only publish five pages! We can’t see the point in that, it’s just frustrating, that’s why we are offering the full package - just like if you had bought it from the Serif website for £59.99.

If you are new to Heart Internet have a look at our web hosting packages at the link below, the ones that include Serif WebPlus are clearly marked:

http://www.heartinternet.co.uk/hosting-h.shtml

If you are an existing customer you also get WebPlus X2 for free (none of that “only for new customers” business here!), just login to our control panel and click the “Serif WebPlus” link:

https://customer.heartinternet.co.uk/manage/

We hope you enjoy using Serif WebPlus X2 - compliments of your friends at Heart Internet.

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/HI_Drop_Shadow.zipThe shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your <body> 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:
<div id=”container”>
     <p>Your Content Here</p>
</div> 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/HI_Drop_Shadow.zip

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 <body> </body> tags)
<div id=”navigation”>
     <ul>
          <li class=”navhome”><a href=”#” mce_href=”#”>Homepage</a></li>
          <li class=”navhosting”><a href=”#” mce_href=”#”>Hosting Packages</a></li>
          <li class=”navcontact”><a href=”#” mce_href=”#”>Contact Us</a></li>
     </ul>
</div>

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 <head> 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