[CUSTOM] Badges on myStore

Change your online store into modern look with myStore eCommerce VirtueMart Joomla template - discussion forum.
GK User
Sun Feb 20, 2011 1:29 am
Hi

This might be a nice feature to added on myStore template - the use of badges on module header.
I think the badges used on Black & White template fit's perfectly on myStore.
Here's some examples:

Using "[space]badge-new" and "[space]badge-hot" module suffix:
screen1_2011-02-20.png


Using "[space]badge-top" and "[space]badge-soon" module suffix:
screen2_2011-02-20.png


Theme style 1, using "[space]color[space]badge-new" and "[space]color[space]badge-hot" module suffix:
screen3.png


Theme style 1, using "[space]color[space]badge-top" and "[space]color[space]badge-soon" module suffix:
screen4.png


Theme style 2, using "[space]color[space]badge-new" and "[space]color[space]badge-hot" module suffix:
screen5.png


Theme style 2, using "[space]color[space]badge-top" and "[space]color[space]badge-soon" module suffix:
screen6.png


Theme style 3, using "[space]color[space]badge-new" and "[space]color[space]badge-hot" module suffix:
screen7.png


Theme style 3, using "[space]color[space]badge-top" and "[space]color[space]badge-soon" module suffix:
screen8.png


INSTRUCTIONS:

Step 1)
Copy the attach image to this location ../templates/gk_mystore/images/

Step 2)
Enable override.css file on template parameters.

Step 3)
Add the following code on override.css file:

Code: Select all
.badge { position:absolute; background:transparent url('../images/badges.png') no-repeat 0 0; top:8px; right:8px; z-index:999; text-indent:-999em; width:54px; height:54px; }
.badge-hot,
.badge-new,
.badge-soon,
.badge-top { position:relative; }
.badge-hot .badge { background-position: 0 -54px; }
.badge-top .badge { background-position: 0 -108px; }
.badge-soon .badge { background-position: 0 -162px; }


That's it.
Enjoy ;)


badges.zip
User avatar
Platinum Boarder

GK User
Sun Feb 20, 2011 7:19 am
Thanks Seichinha,

Hope you don't mind but I had a play with your idea in Penguin for J1.6 and came up with this...

Changes to site/templates/gk_penguinmail/css/template.css

Code: Select all
/* badges */
.badge { position:absolute; top:12px; right:12px; width:20px; height:32px; text-indent:-999em; }
.badge-hot,
.badge-new,
.badge-soon,
.badge-new1,  /*added*/
.badge-hot1,  /*added*/
.badge-top1,  /*added*/
.badge-soon1, /*added*/
.badge-top { position:relative; }


Addition to site/templates/gk_penguinmail/css/override.css
Code: Select all
/* Custom Module Badges */

.badge { position:absolute; background:transparent url('../images/badges1.png') no-repeat 0 0; top:8px; right:8px; z-index:999; text-indent:-999em; }
.badge-new1 .badge { background-position: 0 -130px; width:54px; height:54px; margin-top: -8px; }
.badge-hot1 .badge { background-position: 0 -184px; width:54px; height:54px; margin-top: -8px; }
.badge-top1 .badge { background-position: 0 -238px; width:54px; height:54px; margin-top: -8px; }
.badge-soon1 .badge { background-position: 0 -292px; width:54px; height:54px; margin-top: -8px; }


Copy this modified sprite in to site/templates/gk_penguinmail/images/badges1.png
Image

badges1.zip


In the modules class suffix just add badge-top for the default badge in the template, or badge-top1 to use the new badge supplied by Seichinha.

The new suffix options are [space]badge-hot1 [space]badge-top1 [space]badge-new1 [space]badge-soon1 plus you have the option of using the original set.
User avatar
Expert Boarder

GK User
Sun Feb 20, 2011 12:23 pm
@freshgs Why i should mind? :P

Thanks for sharing with all. ;)
User avatar
Platinum Boarder

GK User
Mon Feb 21, 2011 2:02 pm
I cannot make it work!!!

I 've done everything.!! :angry: :(
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 3:47 pm
It should certainly work for any template that uses the class .badge-xxx.

Are you sure you have override.css enabled in the template advanced parameters?
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 3:56 pm
yes I have enabled it!
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 4:19 pm
Are you having the problem with this site http://www.e-advertising.gr/ using Penguinmail?

If it is this could be part of the issue where is the badges1.png?

There is an error in my post - path I gave for the image is wrong (cut 'n paste for you), but the file isn't on your site in either location. The correct path is site/templates/gk_penguinmail/images/badges1.png

The override.css has this code for the badge classes...

Code: Select all
.badge { background:transparent url('../images/style2/badges.png') no-repeat 0 0; } .badge-hot .badge { background-position: -10px -32px; } .badge-top .badge { background-position: 0 -64px; } .badge-soon .badge { background-position: 0 -96px; }


Are you testing on a local system or publicly accessible server? Can you provide a link please?
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 4:44 pm
I forgot to mention that the override.css isn't showing in the doc head.

The other styling you have included in the header can be added to the override.css file once you activate it.

Also you can use this extension to remove the joomla generator tag Bye Bye Generator. This is also useful Clean Response.
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 6:04 pm
thank you for your reply.


No the site isn't e-advertising.gr.

Is another one that at the moment is on a localhost.

Thank you anyway for your answer
User avatar
Expert Boarder

GK User
Mon Feb 21, 2011 6:44 pm
I'm not sure what the issue could be. If you have followed Seichinhas instructions in the OP it should work perfectly.

Good luck with it.
User avatar
Expert Boarder

GK User
Tue Feb 22, 2011 7:49 am
For a reason that i really cannot understand :ohmy: when I put the code in ovveride.css it doesn't work.
When I put it in the template.css it works!! :dry:

Everything else included in my override.css works perfect!! ...... but I can live with that :whistle:

Thank you all...
User avatar
Expert Boarder

GK User
Tue Feb 22, 2011 10:46 am
Did you turn on 'override css' option in template manager ?
User avatar
Platinum Boarder

GK User
Tue Feb 22, 2011 11:02 am
Yes I did, and everything else in override.css works fine !!!
User avatar
Expert Boarder

GK User
Thu Dec 05, 2013 8:29 am
i can't download demo please reupload!! thanks
User avatar
Fresh Boarder

GK User
Sat Dec 07, 2013 1:48 pm
can't download demo please reupload


What demo you mean? Quickstart package?
User avatar
Platinum Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.