About Kate Jordan

Kate Jordan is a serial expat travelling Europe, working as a travel writer and web designer. She specialises in website and blog design for Wordpress and Blogger platforms.

How to use a custom font on your website

Custom-Font
For the purpose of this tutorial, I am going to use Pacifico, a font you can find on Font Squirrel.

A custom font is a font that is not of a standard nature (i.e. one that comes with your computer when you buy it), nor is it a Google font, which are readily available for use on the web.

A custom font is something you download from websites like the one mentioned above, purchased from designers or any other method you may use to obtain fonts that are not considered to be web fonts. Typically, people use them on images only.

This tutorial will teach you how to install a custom font on your website in under five minutes and as a result, will open so many more options for you and your web design.

We will utilize font-face feature to add custom fonts.   With font-face feature we can use the fonts which are not installed on the users computer. The font is automatically downloaded when required.

Continue Reading

How to Create A Sticky Footer With CSS

Create a fixed footer with CSS

A sticky footer is a great way to encourage people to subscribe to your website’s newsletter, get more eyes on your advertisements or post short and important updates for your visitors.

The difference between a sticky header and a sticky footer is that the footer doesn’t take up “prime real estate” on your blog’s page in the same way that a header does. Visitor’s eyes will naturally make their way down to the footer as they read through your content and it’s not disruptive to their viewing.

What is a sticky footer?

Typically, it’s a bar that runs along the bottom of your webpage, even when scrolling.

Create a fixed footer with CSS

View the live demo here .

The Method

Let’s start out by creating a HTML webpage.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</style>
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
</body>
</html>

Next, we’ll add the footer div layer to the page.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
<div id="footer">
Your fixed footer content goes here. You can use web forms, images, javascript code or whatever you want!
</div>
</body>
</html>

Now that we’ve got the basic set up for your webpage, we will rely on CSS to do the rest of the work. Use the following code in your style.css file or include it in between the script tags I have used above.

I am going to include a little styling for mine, which is optional for you.

body {
background-color: #e4e4e4; /* Styling */
font-family: 'Arial', sans-serif; /* Styling */
font-size: 17px; /* Styling */
}

#footer {
position: fixed;
bottom: 0px;
width: 100%;
overflow: visible;
z-index: 99;
height:40px;
left: 0px;
padding: 5px; /* Styling */
border-top: 2px solid #000000; /* Styling */
background-color: #ffffff; /* Styling */
text-align: center; /* Styling */
}

Not only do you now have a sticky footer on your screen, but it’s also mobile responsive. Keep in mind that you will have to add some additional styling for mobile view if you want the viewer to be able to see what is in the footer. Widths should be set to 100% and heights to auto to ensure it shrinks to size correctly.

Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

With Pinterest coming out of the woodwork and taking social media by storm in the recent months, it’s apparent that a lot of it’s popularity is down to it’s aesthetically pleasing layout. Pinterest’s “grid view” style for displaying pins is what the design world refers to as a Masonry Grid.

Masonry Grids are different from normal grids in that they do not have to be the same size as each other (like traditional grids created with CSS & HTML) and they slot in perfectly with each other despite their different lengths.

Traditional Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Masonry Grid

Masonry Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content GridContinue Reading