[CUSTOM] Badges on myStore

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

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

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.

@freshgs Why i should mind?

Thanks for sharing with all.

I cannot make it work!!!

I 've done everything.!!

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?

yes I have enabled it!

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?

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.

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

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.

For a reason that i really cannot understand when I put the code in ovveride.css it doesn't work.
When I put it in the template.css it works!!

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

Thank you all...

Did you turn on 'override css' option in template manager ?

Yes I did, and everything else in override.css works fine !!!

i can't download demo please reupload!! thanks

can't download demo please reupload

What demo you mean? Quickstart package?