Tutorial: Points Icon
Standard member
For this tutorial I will show you how to add a points icon, which displays the points you have available on hover, and takes you to your points tab when you click the icon.
While I know the points is visible when you click on your profile icon, I wanted something a little more obvious for our members who are a little less website aware. Something more obvious.
Anyway. Here it is.
Our points icon is represented by the gift icon on the far left.
When you hover you mouse over it:
The points (gift) icon is also an active hyperlink which when clicked will take that member straight to their points tab in their profile.
Now the howto.
- Open GLOBAL_HTML_WRAP.tpl
- Find:
Code
{+START,IF,{$CONFIG_OPTION,block_top_notifications}}{$BLOCK,block=top_notifications}{+END}
Which should be at line 40.
Above that add the following: (Sorry had to attach image as this forum is passing the code no matter what I do)
Now with the above code we have referenced the actual image used as "points" referenced as . From here we will upload the icon.
- Go to your theme, edit theme images.
- Then down the bottom click Add Theme Image.
- Codename: /points
- Upload your 24x24 image (I used a icon with a height of 20)
- Then click save.
- Open Global.css
- Down the bottom add the following:
Code
img.top_points {
vertical-align: middle;
opacity: 0.5;
}
I chose opacity of 0.5 so it blends well with the other icons.
That should be it. Done.
Here is the icon I used.
If anyone has any issues or questions please do not hesitate to ask here. I am sure there is a better way of doing it, but the above worked for me.
My next one will be a shopping cart icon. Although at this stage I am not using the ecommerce addon, not yet anyway.
Standard member
Change {$TOTAL_POINTS} to {$AVAILABLE_POINTS}
Standard member
Useful tips, thanks.
Your code says ' Codename: /points ', the '/' is mandatory? '/' is not there in your code attached (as image).
Sorry, if question is too oridinary.
Sreekumar
Standard member
Yes place the / in the codename. And use the code as per image.
Standard member
{+START,IF,{$ADDON_INSTALLED,points}}
{+END}This just checks if the points addon is installed. If it's not installed then the points icon will not be shown.
1 guest and 0 members have just viewed this.
