Keyword

How to change K2 featured item icon

  • minutka
  • minutka's Avatar Topic Author
  • Offline
  • New Member
More
6 months 2 weeks ago #169493 by minutka
minutka created the topic: How to change K2 featured item icon
Hi, I found few topics about this, but I've never found some clear answer to how to change the star icon to something else. I thought it was a picture so I can simply replace it with another one, but appearently it is a font, and I need to use png picture instead :-) I am not a coder, could someone please guide me what to do?

So far I know the star icon is called on lines 89 and 90 in k2.css:

div.itemIsFeatured:before,
div.catItemIsFeatured:before,

I have no idea how to rewrite it to call an image. I wnat the image to be placed at the exact same place as is the star icon now - next to the item title, aligned to the right, simply to be appeared in the right top corner of the item.

Thank you very much :-)

Barbora

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

  • Fotis
  • Fotis's Avatar
  • Offline
  • Administrator
  • JoomlaWorks Support Team
More
6 months 2 weeks ago #169500 by Fotis
Fotis replied the topic: How to change K2 featured item icon
Edit this block around line 98 in k2.css:
div.catItemIsFeatured:before,
div.userItemIsFeatured:before,
div.itemIsFeatured:before {content:"\e09b";}

to:
div.catItemIsFeatured:before,
div.userItemIsFeatured:before,
div.itemIsFeatured:before {background:url(../images/your_image.png) no-repeat 0 0; width:16px; height:16px;}

I recommend you copy the file k2.css from /components/com_k2/css/k2.css to /templates/YOUR_TEMPLATE/css/k2.css and then place "your_image.png" mentioned above in your template's "images" folder.

Done :)

More info on overrides can be found here: getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates

I highly recommend overrides to avoid losing your styling when K2 updates.


If you use & love K2, please take a moment to add your review and rate it
at the Joomla Extensions Directory: extensions.joomla.org/extension/k2/


IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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

  • Fotis
  • Fotis's Avatar
  • Offline
  • Administrator
  • JoomlaWorks Support Team
More
6 months 1 week ago #169609 by Fotis
Fotis replied the topic: How to change K2 featured item icon
What is your issue exactly?


If you use & love K2, please take a moment to add your review and rate it
at the Joomla Extensions Directory: extensions.joomla.org/extension/k2/


IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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

More
1 week 1 day ago #171764 by Harris DImoliatis
Harris DImoliatis replied the topic: How to change K2 featured item icon
And how can i have a different image depending on language?
I mean other picture in Greek and other in English.

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

  • Fotis
  • Fotis's Avatar
  • Offline
  • Administrator
  • JoomlaWorks Support Team
More
1 week 12 hours ago #171765 by Fotis
Fotis replied the topic: How to change K2 featured item icon
Use the current language tag (through <?php echo JFactory::getLanguage()->getTag(); ?> which would print something like "en-GB") in your template's index.php <body> tag. E.g.
<body class="isLang_<?php echo JFactory::getLanguage()->getTag(); ?>">

Then using CSS targeting do (for English):
body.isLang_en-GB div.catItemIsFeatured:before,
body.isLang_en-GB div.userItemIsFeatured:before,
body.isLang_en-GB div.itemIsFeatured:before {...}

or for French:
body.isLang_fr-FR div.catItemIsFeatured:before,
body.isLang_fr-FR div.userItemIsFeatured:before,
body.isLang_fr-FR div.itemIsFeatured:before {...}
...and so on.


If you use & love K2, please take a moment to add your review and rate it
at the Joomla Extensions Directory: extensions.joomla.org/extension/k2/


IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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

More
3 days 7 hours ago #171831 by Harris DImoliatis
Harris DImoliatis replied the topic: How to change K2 featured item icon
Not an expert. did not make it work.
I added the
<body class="isLang_<?php echo JFactory::getLanguage()->getTag(); ?>">
at the end of index.php from my templates folder
and
body.isLang_en-GB div.catItemIsFeatured:before,
body.isLang_en-GB div.userItemIsFeatured:before,
body.isLang_en-GB div.itemIsFeatured:before {background:url(../images/my_image.png) no-repeat 0 0;}
and
body.isLang_fr-FR div.catItemIsFeatured:before,
body.isLang_fr-FR div.userItemIsFeatured:before,
body.isLang_fr-FR div.itemIsFeatured:before {background:url(../images/other_image.png) no-repeat 0 0;}

but stll points to the degault image

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

  • Fotis
  • Fotis's Avatar
  • Offline
  • Administrator
  • JoomlaWorks Support Team
More
1 day 21 hours ago #171842 by Fotis
Fotis replied the topic: How to change K2 featured item icon
You don't add "<body class="isLang_<?php echo JFactory::getLanguage()->getTag(); ?>">" at the end of index.php. You change your current <body> tag into "<body class="isLang_<?php echo JFactory::getLanguage()->getTag(); ?>">". An HTML document can't have 2 <body> tags. This is HTML 101.

The rest of the code I provided is CSS code. You don't just place that in index.php. You have to place it in your template's CSS file.

Ask your template provider WHERE and HOW to edit the template.

And you need a primer on web development. This link provides some helpful resources on that: css-tricks.com/where-do-you-learn-html-css-in-2019/


If you use & love K2, please take a moment to add your review and rate it
at the Joomla Extensions Directory: extensions.joomla.org/extension/k2/


IMPORTANT: Please search the forum before posting a question!

JoomlaWorks Support Team Member

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

Moderators: william white

Powered by Kunena Forum