Functional Footer Layouts with iCustomFooter

Not long ago the whole new, redesigned and polished OpenCart 2.0 was officially released. Working on the version of our popular iCustomFooter compatible with the new OpenCart, we made a lot of improvements in our module which allow you to achieve even more impressive and functional footer layouts.

In this post I will explain more about iCustomFooter layouts and will give you some useful tips about the proper layout configuration of the module. Generally we can achieve two types of layouts, Fluid Layout and Fixed Layout, using the iCustomFooter settings and adding little CSS. We will not dive deeper into boring details and explanations about these two types of layout in aspect of Web Design.

For the purpose of this guide I will use a test installation of OpenCart 2.0.1.1 with the default OpenCart theme enabled.

Fluid Layout

The most essential feature of the fluid layout is the measurement of the footer elements. In fluid layouts the dimensions of the elements are defined in percentages. The best thing about setting the dimensions in percentages is that you don’t need to worry about device size and screen width because all the elements will automatically adapt to it.

Below you can see a sample configuration of the iCustomFooter dimensions for a fluid layout. I have the Footer Wrapper width set to 100%, the Footer Width is also set to 100% and the Column Width is set to 25%, because I want to have 4 columns on a line.

Note that for a fluid layout I have the iCustomFooter Responsive Design disabled. The reason is that the responsive design feature works best with designs where we have dimensions in pixels and not in percentages. Also there is no need to have the responsive design enabled in fluid layout because fluid layout makes the footer responsive by nature.

The configuration shown in the image will result in a footer that takes the full width of the screen and this is not exactly what I want.

Because I am using the default OpenCart theme whose width is limited to 1170px on desktop devices I will limit the width of iCustomFooter to 1170px as well. In order to keep the fluid behavior of the footer I will use the CSS max-width property and add it in the custom CSS box that is a default feature for iCustomFooter.

I add the following CSS code to limit my footer width:

#iCustomFooter, #icustomfooter_default_footer {
    max-width: 1170px;
}

Now I like the way the footer is displayed on desktop devices but I don’t like the way it is displayed on tablet and mobile devices. The reason is that the footer is divided into 4 columns and I think there is not enough space for 4 footer columns on smaller devices.

I will use media queries to add specific footer styles for tablet and mobile devices. I want to have 2 footer columns on tablets and 1 footer column on mobile devices. My store uses the default OpenCart theme which is responsive by default. It is built on the famous Bootstrap Responsive Grid so I will use the the same breakpoints as my theme uses to adapt the footer for smaller devices. The Bootstrap Responsive Grid is mobile first which means that we should start from the smallest screen first. We will add the media queries in the custom CSS box, right after the first CSS snippet we already added.

The first breakpoint is for mobile devices. It will trigger for resolutions below 767px. This code limits the footer width to 100% and the column width to 100%, which means one column per line.

@media (max-width: 767px) {
    #iCustomFooter, #icustomfooter_default_footer {
        max-width: 100%;
    }
    .iCustomFooter ul li.grid_footer_3, #icustomfooter_default_footer .column {
        width: 100%;
    }
}

The second breakpoint is for tablet devices. It will trigger for resolutions above 768px and will take precedence over the previously added rules. This code limits the footer width to 750px and the column width to 50%, which means two columns per line.

@media (min-width: 768px) {
    #iCustomFooter, #icustomfooter_default_footer {
        max-width: 750px;
    }
    .iCustomFooter ul li.grid_footer_3, #icustomfooter_default_footer .column {
        width: 50%;
    }
}

The next breakpoint is for medium devices (desktops). It will trigger for resolutions above 992px and will take precedence over the previously added rules. This code limits the footer width to 970px and the column width to 25%, which means 4 column per line.

@media (min-width: 992px) {
    #iCustomFooter, #icustomfooter_default_footer {
        max-width: 970px;
    }
    .iCustomFooter ul li.grid_footer_3, #icustomfooter_default_footer .column {
        width: 25%;
    }
}

The last breakpoint is for large devices (large desktops). It will trigger for resolutions above 1200px and will take precedence over the previously added rules. This code will reset the footer to its default dimensions.

@media (min-width: 1200px) {
    #iCustomFooter, #icustomfooter_default_footer {
        max-width: 1170px;
    }
}

This ends up the fluid layout configuration of iCustomFooter. Now I have a functional, 4-column footer for my store which suits different screen sizes.

Fixed Layout

The main thing about fixed layouts is that the dimensions of the elements are set in pixels. This may be considered as a disadvantage of this type of layout because this means that the layout does not automatically adapt to different devices. For that reason we have implemented a Responsive Design feature in iCustomFooter. Once enabled, this feature will allow the footer to automatically adapt to smaller screens and devices.

Below you can see a sample configuration of the iCustomFooter dimensions for a fixed layout. In my case my theme content is 1140px wide so I will set the width of my custom footer to 1140px as well. I have the Footer Wrapper width set to 1140px, the Footer Width also set to 1140px and the Column Width set to 285px, which means again 4 columns per line. I also have the Responsive Design feature enabled because my theme is responsive and I want the custom footer to be responsive as well.

The configuration of the iCustomFooter fixed layout is easier and does not require any additional CSS code to be added. This makes it a preferred choice for those who don’t feel comfortable writing CSS.

​

Fixed footer layout is also a preferred choice for stores who don’t have responsive layouts and use the same width across all devices. In this case the responsive design feature of the iCustomFooter should be disabled. Otherwise, the footer will adapt to the different screen sizes and platforms and will look different than the rest of your website.

Final Words

I hope this guide will give a better understanding of how the iCustomFooter layout configurations work and will help you configure the custom footer for your needs and theme layout. The described footer layouts represent the most common cases, footer configurations and website layouts.