Fix issues with Facebook Like Box in Fortuna theme

Facebook Like Box - Fortuna

Facebook Like Box - Fortuna


Some days ago the Facebook Like Box widget included in Fortuna theme stopped working.

There was a change on the Facebook end. But the problem it’s easy to fix.

How to fix the issue?

If you want to make the updates for yourself let me explain.

1 First, add a container <div class="fb-container"> to the current box on catalog/view/theme/fortuna/template/common/footer.tpl and make sure to insert to the href attribute,

<div class="fb-container">
<div id="bg-box" class="fb-like-box" data-href="<?php echo $this->config->get('fortuna_facebook_id'); ?>" data-width="290" data-height="180" data-color-scheme="light" data-show-faces="true" data-border-color="#FFF" data-stream="false" data-header="false"></div>

2 Then, the CSS to hide the border (catalog/view/theme/fortuna/stylesheet/stylesheet.css):

.fb-container {
width: 288px;
height: 178px;
overflow: hidden;
margin: 0 auto;
.fb-container > div {
margin: -1px 0px 0px -1px;

3 Delete the references to Facebook frame at the bottom of the same file.

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
display: none;
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;

4 Also, you need to change the Facebook ID on Fortuna theme options module for the url ending. For example, if the page is, you need:

Facebook page


If you have any issues, send me a message through the contact form on my profile page on Themeforest.


Fix for bootstrap style pagination

In a previous release a vqmod was added as optional extension to get the same pagination style that bootstrap framework. But this extension has some conflicts with the pagination in the admin panel. To fix the issues edit catalog/view/theme/[your-theme]/stylesheet/stylesheet.css. Find the section marked with:

/* Pagination
-------------------------------------------------- */

And replace the whole section with

/* Pagination
-------------------------------------------------- */
.paginate {
border-top: 1px solid #EEEEEE;
padding-top: 8px;
overflow: hidden;
.paginate .links { float: left; overflow: hidden; }
.paginate .links a,
.paginate .links b {
padding: 6px 12px;
line-height: 24px;
text-decoration: none;
font-weight: bold;
border: 1px solid #DDD;
border-left-width: 0;
display: block;
float: left;
.paginate .links b {
font-weight: normal;
background: #eee;
.paginate .links a:hover {
background: #f2f2f2;
.paginate .links a:first-child,
.paginate .links b:first-child {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
.paginate .links a:last-child,
.paginate .links b:last-child {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
.paginate .results {
float: right;
color: #999;
.pagination.brands {
.pagination.brands a {
padding: 0 9px;

Also re-upload the following file if you want to change the arrows. This is optional:



Finally, clear your vQmod cache (delete everything inside vqmod/vqcache folder)