Joomla Templates Club 406,261 posts

[alisamii Friend alisamiiJoin date: June 2010Posts: 48Downloads:0Uploads:10 Thanks: 14]

#152684

Hi:

How do I change the badge on the quote of the day module?

My site is being developed in French, and I need to change the text that appears on the badge from “new” to “nouveau”

I believe that the badge is an image, which is “icon-badge.png” but modifying that is not easy as it is not included in the source files, and that particular image has 4 different corner tabs on it, so I am not sure how it has been developed.

Any assistance would be appreciated.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#350486

Alisamii,

The badges are all contained on a single graphic: templates/ja_pyro/images/icon-badge.png
And the words are part of the graphic, not produced by text.
You simply need only to create a new PNG graphic and replace it with the one.

Have fun!
John

[alisamii Friend alisamiiJoin date: June 2010Posts: 48Downloads:0Uploads:10 Thanks: 14]

#350499

How do I specify which badge is to be used if it is all in the same graphic, and, what are the size limits?

Also, the png file you refer to is not a valid Fireworks layered png, so I cannot modify it, but would need to create a new PNG, however, since all the images are in one single file, I need to know the parameters and requirements that are used to recreate the proper badges. Can you provide me with either a layered PNG or a guidelines documentation for this PNG file.

Thank you.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#350550

The actual image is indeed flat, so to change you’ll simply need to create your own image.
It is a sprite image which is controlled by a series of CSS elements.

Open [FONT=”Arial Black”]/templates/ja_pyro/css/template.css[/FONT] beginning at line 746

This is the basic call for the badge sprite…it is:

• showing the icon-badge.png
• and limiting its appearence to a 46 x 45 image. If you want to show a larger image, this is where you make the change.


.badge {
background-image:url("../images/icon-badge.png");
background-repeat:no-repeat;
height:46px;
position:absolute;
right:0;
top:0;
width:45px;


As to which image in the sprite is called that is controlled by module suffix found at the bottom of the Typography page.

And the magic finally occurs because of the following CSS coding for each of the badges.

Beginning on line 756 of the same template.css file you see the following:


badge-hot .badge {
background-position:0 0;
}

.badge-new .badge {
background-position:0 -46px;
}

.badge-pick .badge {
background-position:0 -92px;
}

.badge-top .badge {
background-position:0 -138px;
}


Put it all together now and here’s what we’re saying:

For the “HOT” badge:

• Create space for a 46×45 badge image ( our CSS code at line 746)
• use the icon-badge.png image
• Start showing that image at the very top (background-position: 0 0; )

The result is that the “HOT” part of the image is shown and nothing else.

Likewise if we want the “NEW” badge

• Create space for a 46×45 badge image ( our CSS code at line 746)
• use the icon-badge.png image
• This time we start showing that image 46 pixels below the top (background-position: 0 -46; )

And so on and so on.

Sprites are used to speed up a website…as you are only loading one image rather than four separate.

Hope this helps!
Have fun!
John.

1 user says Thank You to John Wesley Brett for this useful post

1. alisamii

[Author]

Posts