- Posts: 2
COMMUNITY FORUM
How to change K2 featured item icon
- minutka
-
Topic Author
- Offline
- New Member
Less
More
4 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
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
4 months 1 week ago #169500
by Fotis
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
Fotis replied the topic: How to change K2 featured item icon
Edit this block around line 98 in k2.css:
to:
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.
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
4 months 1 week ago #169609
by Fotis
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
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.
Moderators: william white