Creating a Simple Sticky Footer Using CSS

This code will make your footer stick to the very bottom of your page. It doesn’t matter how much or how little content you are producing, the footer will always be fixed to the bottom of the screen. I’ve used this on numerous responsive designs with great success across many different browsers and devices.

Step 1 – CSS

Copy and Paste the CSS code below.


.stickyfooter {
position:fixed;
left:0px;
bottom:0px;
height:3em;
padding:1.2em 0.1em 0.1em 0.1em;
width:100%;
background:#8a1924;
text-align:center;
}

Step 2 – HTML

Copy and Paste the html code below into your web page.

<div class="stickyfooter">
This is the sticky footer.
</div>

Xampp WordPress Images Redirecting to Live Site

If you happen to be referencing links in WordPress themes like below, you may encounter some problems when switching to and from local and live versions.

This example assumes moving a live site to local version using Xampp.

  1. Import the MySQL database into XAMPP phpMyAdmin as you normally would.
  2. Click on the table called wp_options and edit the siteurl field from www.yourwebsite.com to http://localhost

Probably best to leave a note to switch this back when moving back to the live site. Otherwise you will encounter the same problem with images on the live site.

Using your hosts file to test the success of a website move?

The brilliant thing about the hosts file is the ability to resolve to a domain name without using the domain name system.
By editing your computers hosts file, you can actually manipulate the IP address that a domain name is currrently pointing to.This will allow you to check whether a website has been moved successfully from one server OR host to another before cutting over.

To modify your hosts file:

Navigate to My Computer > Local Disk C:\ > WINDOWS > System32 > Drivers > etc > edit hosts file (Use notepad or notepad++ for editing)

Lets say the IP address of my new website is 74.208.135.130 you would simply add.

74.208.135.130 masterev.com
74.208.135.130 www.masterev.com

Save the file / refresh your cache and browse to your website. You should now be seeing the new site running on your domain.

This change is restricted to your local machine so you can test and make as many changes as you like without interefering with your live website.

Note: You should remove the changes you made to the hosts file once you are done. This could save a whole heap of confusion later on.

Create 301 redirect with question mark (?)

Came across this issue when 301 redirecting URLS in Zen Cart. This solution can be applied to any redirect where a question mark exists in a URL that requires a redirect.

A typical 301 redirect should look like below however, because of the question mark this will not work.

redirect 301 /index.php?main_page=testimonials http://www.masterev.com/testimonials

Instead, use RewriteRule to achieve the same result:

RewriteCond %{QUERY_STRING} ^main_page=testimonials
RewriteRule ^index\.php$ http://www.masterev.com/testimonials? [L,R=301]

WordPress Custom Contact Forms – working but not sending email.

Peculiar problem this week with a client simply moving hosting account and not being able to receive contact form emails using Custom Contact Forms in WordPress .

The forms was actually processing perfectly, it was actually storing each enquiry into the “Saved Form Submissions” area however, no emails were being sent.

Turns out this was an issue with and external MX server and cPanel wasn’t configured correctly.

Fix:
Log into cPanel > open MX Entry (under Mail options) and enter your MX destination.

Problem resolved itself instantly after this change.

CSS – Top, Bottom, Left, and Right Properties

One value – Specify an equal margin for all properties
e.g. margin:50px;

Two values – specifies top/bottom (first) and right/left (second) margin
e.g. margin:50px 100px;

Three values – specifies the top (first), right/left (second) and bottom (third) margin
e.g. margin:50px 100px 150px;

Four values – specifies the top, right, bottom and left respectively
e.g. margin:50px 100px 150px 200px;