Hi,
i'm using OC Version 3.0.3.6 and implement SVG icons on fort of category names.
Image are read from image - column of category definition.
From that point everything is fine, but i would like to change the color of the SVG on hover which doesn't work.
in category.twig i have this line:
<a href="{{ category.href }}" class="list-group-item active"><img src="{{ category.image }}" class="img_category" alt="{{ category.name }}"/>{{ category.name }}</a>
and in stylesheet.css:
.img_category {
width: 33px;
padding-right: 10px;/*! align-items: center; *//*! display: block; */
fill: green;
}
.img_category:hover {
fill: white;
}
But it doesn't work also the first color change on load to green doesn't work.
Actual i have no further idea where the issue comes from.
Thanks
Regards
Christian
i'm using OC Version 3.0.3.6 and implement SVG icons on fort of category names.
Image are read from image - column of category definition.
From that point everything is fine, but i would like to change the color of the SVG on hover which doesn't work.
in category.twig i have this line:
<a href="{{ category.href }}" class="list-group-item active"><img src="{{ category.image }}" class="img_category" alt="{{ category.name }}"/>{{ category.name }}</a>
and in stylesheet.css:
.img_category {
width: 33px;
padding-right: 10px;/*! align-items: center; *//*! display: block; */
fill: green;
}
.img_category:hover {
fill: white;
}
But it doesn't work also the first color change on load to green doesn't work.
Actual i have no further idea where the issue comes from.
Thanks
Regards
Christian
did you clear your cache in dashboard (or put it in development mode)?
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
yes - cache is cleared via dashboard and now also witch to "OFF"
hopefully because this isn't clear visible.
the css file is also the right one, because the size settings are working.
but the color change don't like to proper work.
SVG isn't 100% working after OC installation and i can now select SVG via image select on category administration, but afterward it isn't visible on the category page.
So it there an clear and good documentation, which steps are need to be taken for SVG ?
hopefully because this isn't clear visible.
the css file is also the right one, because the size settings are working.
but the color change don't like to proper work.
SVG isn't 100% working after OC installation and i can now select SVG via image select on category administration, but afterward it isn't visible on the category page.
So it there an clear and good documentation, which steps are need to be taken for SVG ?
To my knowledge there is no svg documentation but maybe someone else has seen something.
I use svg icons and have no issue with re colouration - there is nothing out of the ordinary for svg that is special for opencart.
Your original comment was that you have svg images working on the site and the css re colouration was not 'listening'.
What you are now saying is out of the scope of free support I am afraid and you would be best posting in the commercial section.
I use svg icons and have no issue with re colouration - there is nothing out of the ordinary for svg that is special for opencart.
Your original comment was that you have svg images working on the site and the css re colouration was not 'listening'.
What you are now saying is out of the scope of free support I am afraid and you would be best posting in the commercial section.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
that i can select svg in admin section, i need to install an extentation.
so now i can select them and it is diplayed on shop
but i only what to say this
i'm still confusing why this css setting doesn't work
thanks
so now i can select them and it is diplayed on shop
but i only what to say this
i'm still confusing why this css setting doesn't work
thanks
Try this:
Code: Select all
and in stylesheet.css:
.img_category {
width: 33px;
padding-right: 10px;/*! align-items: center; *//*! display: block; */
fill: green !important;
}
.img_category:hover {
fill: white !important;
}
Got an urgent question that’s keeping you up at night? There might just be a magical inbox ready to help: khnaz35@gmail.com
Enjoy nature
Who is online
Users browsing this forum: No registered users and 45 guests