COMMUNITY FORUM

How to change K2 featured item icon

Start
Prev
1
Next
End

minutka
Topic Author
Offline
New Member

8 months 1 week 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
Offline
Administrator
JoomlaWorks Support Team

8 months 1 week 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
Offline
Administrator
JoomlaWorks Support Team

8 months 6 days 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.

Harris DImoliatis
Offline
New Member

2 months 2 days 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
Offline
Administrator
JoomlaWorks Support Team

2 months 1 day 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.

Harris DImoliatis
Offline
New Member

1 month 4 weeks 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
Offline
Administrator
JoomlaWorks Support Team

1 month 3 weeks 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.

Start
Prev
1
Next
End

Moderators: william white