COMMUNITY FORUM

How to change K2 featured item icon

Start
Prev
1
Next
End

minutka
Topic Author
Offline
New Member

6 years 9 months ago #169493 by minutka

How to change K2 featured item icon was created by minutka

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.

JoomlaWorks
Offline
Admin

6 years 9 months ago #169500 by JoomlaWorks

Replied by JoomlaWorks on 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.

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

JoomlaWorks
Offline
Admin

6 years 8 months ago #169609 by JoomlaWorks

Replied by JoomlaWorks on topic How to change K2 featured item icon

What is your issue exactly?

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

Harris DImoliatis
Offline
New Member

6 years 2 months ago #171764 by Harris DImoliatis

Replied by Harris DImoliatis on 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.

JoomlaWorks
Offline
Admin

6 years 2 months ago #171765 by JoomlaWorks

Replied by JoomlaWorks on 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.

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

Harris DImoliatis
Offline
New Member

6 years 2 months ago #171831 by Harris DImoliatis

Replied by Harris DImoliatis on 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.

JoomlaWorks
Offline
Admin

6 years 2 months ago #171842 by JoomlaWorks

Replied by JoomlaWorks on 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/

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

Start
Prev
1
Next
End