[TUTORIAL] how to fix the design structure of Merchant Expertise (Prestashop 1.5.x.x)

[ALMAJ]

This is a tutorial on how to fix the design structure of Merchant Expertise that as been haunting Prestashop 1.5.x.x for years!

 

So, do your design structure of Merchant Expertise looks like this?:

 

and this?:

 

after we fixed, the final result should look like this:

 

 

So lets go fix 

 

1 - go to "/modules/gamification/views/css" and open this file: "gamification.css"

2 - now open the file with a html editor or a notepad and find this code:

ul#gamification_badges_list {
	list-style-type:none;
	overflow: auto;
	height: 300px;
	width: 315px;
	padding-top:10px;
}

and change it with this one:

ul#gamification_badges_list {
	list-style-type: none;
	overflow: auto;
	height: 280px;
	width: 350px;
	padding-top: 10px;
}

3 - save it. done.

 

------------------------------------------------------------------------------------------------------------------------------

 

The part 1 is done

now we need to fix the structure of the Merchant Expertise progress bar in the main page!

 

1 - in the same file "gamification.css" find this code:

#completion_gamification #gamification_progress-label_tab{
	float:left;
	width:10%;
	margin-left: 15px;
    text-align: left;
}

and change it with this one:

#completion_gamification #gamification_progress-label_tab{
	float: left;
	/* width: 10%; */
	/* margin-left: 15px; */
	text-align: center;
	top: -25px!important;
	height: 24px;
	vertical-align: middle;
}

2- save it. done!

 

 

I hope this tutorial helps someone!

 

 

Regards

 

Edited March 28, 2014 by ALMAJ (see edit history)