Tutorial: Points Icon

Post

Posted
Rating:
Item has a rating of 5 (Liked by AdamLiked by Chris Graham)
#2671 (In Topic #486)
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
From time to time I will be posting some tutorials in here. Sharing some of my work thus far.

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.

Points Icon on the far left

Our points icon is represented by the gift icon on the far left.

When you hover you mouse over it:

Mouse hover over the points icon on the far left

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.
  1. Open GLOBAL_HTML_WRAP.tpl
  2. 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.
Now a little css edit:
  • 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.

points.png

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.
Online now: No Back to the top

Post

Posted
Rating:
#2680
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Small error:

Change {$TOTAL_POINTS} to {$AVAILABLE_POINTS}
Online now: No Back to the top

Post

Posted
Rating:
#2683
Avatar
Standard member
Sreekumar is in the usergroup ‘Fan in training’
Hi Paul,

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
Online now: No Back to the top

Post

Posted
Rating:
#2686
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Thankyou.

Yes place the / in the codename. And use the code as per image.
Online now: No Back to the top

Post

Posted
Rating:
#2734
Avatar
Standard member
Paul Flavel is in the usergroup ‘Honoured member’
Another little change to the code.

{+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.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Users online:

MVLipwig, gabriel58, babu, Salman, Paul D, amit.nigam

Forum statistics:
  • 1,070 topics, 5,160 posts, 6,010 members
  • Our newest member is Kathraal
Birthdays:
Back to Top