Replace Star Icons with Custom Icons?

  • Posts: 27
  • Thank you received: 3
8 years 7 months ago #210551

-- 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.

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
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: 8 years 7 months ago by Jerome. Reason: clean code

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 7 months ago #210561

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.

  • Posts: 27
  • Thank you received: 3
8 years 7 months ago #210688

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.

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 7 months ago #210702

Hi,

With pleasure !

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.

Time to create page: 0.063 seconds
Powered by Kunena Forum