Replace Star Icons with Custom Icons?

MichaelTunnell
Topic Author
Offline
Designer, Developer, Writer, Linux Enthusiast.

11 years 1 month ago - 11 years 1 month ago #210551 by MichaelTunnell

Replace Star Icons with Custom Icons? was created by MichaelTunnell

-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.3

I want to replace the star icons with custom icons but I do not want to do them in a sprite PNG like the default system has them. I want to generate them with CSS and a Font.

I know how to create the icons and style them and all the fundamentals of that but when I try to add the markup to the files the pages do not render the new markup and just ignores my changes.

I added custom markup to accomplish what I want in "vote / mini.php" but it is not rendering the markup and thus not rendering the icons.

Code:

for($i = 1; $i <= $hikashop_vote_average_score_rounded; $i++) {
	echo '<span class="ui-rating-star ui-rating-full"></span>';
}
for($i = $hikashop_vote_average_score_rounded; $i < $hikashop_vote_nb_star; $i++) {
	echo '<span class="ui-rating-star ui-rating-empty"></span>';
}

REPLACED WITH

Code:

for($i = 1; $i <= $hikashop_vote_average_score_rounded; $i++) {
	echo '<span class="ui-rating-star ui-rating-full"><i class="fa fa-star"></i></span>';
}
for($i = $hikashop_vote_average_score_rounded; $i < $hikashop_vote_nb_star; $i++) {
	echo '<span class="ui-rating-star ui-rating-empty"><i class="fa fa-star"></i></span>';
}

I also did it to "vote / listing.php" but that is also ignoring the markup so the icons are not working.

Can someone please explain to me how I can make the markup render correctly to the page? I can take it from there.

Personal: michaeltunnell.com
Business: visuex.com

Last edit: 11 years 1 month ago by Jerome. Reason: clean code

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

11 years 1 month ago #210561 by Jerome

Replied by Jerome on topic Replace Star Icons with Custom Icons?

Hi,

Some part of the vote is generated by PHP but most are generated by javascript (vote.js).
It's not something which can be override easily today ; the best is to override the CSS and not try to override the rendering

If "fa fa-star" will display what you want ; you can just copy the required CSS to make the same for "ui-rating-star".

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

MichaelTunnell
Topic Author
Offline
Designer, Developer, Writer, Linux Enthusiast.

11 years 1 month ago #210688 by MichaelTunnell

Replied by MichaelTunnell on topic Replace Star Icons with Custom Icons?

I see, it uses JS to render the class changing like ui-rating-hover.

Alright, I modified ui-rating and the rest to flow and look how I want. It looks pretty slick now actually.

I'll make a screenshot when it is done if you want

Personal: michaeltunnell.com
Business: visuex.com

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

11 years 1 month ago #210702 by Jerome

Replied by Jerome on topic Replace Star Icons with Custom Icons?

Hi,

With pleasure !

Regards,

Please Log in or Create an account to join the conversation.

Time to create page: 0.182 seconds