Page 1 of 1
Replace the asterisk with something other
Posted: 26 Jan 2016, 08:08
by andreamarucci
Hello Karl, I'd like to replace the icon that appear when I hover on each gallery
- Schermata 2016-01-26 alle 14.06.20.png (156.35 KiB) Viewed 6103 times
with another png icon.
How can I do that?
Re: Replace the asterisk with something other
Posted: 26 Jan 2016, 11:35
by mjau-mjau
First of all, this is not a PNG, but a font-ICON from the font-awesome library:
http://fortawesome.github.io/Font-Awesome/icons/
I could probably create a hack for you so you can replace the icon with another icon from the list in the link above. However, it would be complicated to replace it with a custom PNG image. It would have to be scaled correctly, and loaded separately ... Keep in mind, font-icons are VECTOR, so scale is irrelevant.
Re: Replace the asterisk with something other
Posted: 26 Jan 2016, 14:13
by sprocket
I'd be interesting in a hack to use a different icon from the font-awesome icons
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 01:35
by mjau-mjau
sprocket wrote:I'd be interesting in a hack to use a different icon from the font-awesome icons
Use this resource to find the "content" code for the icon you want to use:
http://astronautweb.co/snippet/font-awesome/
Then go to panel->settings->custom->css:
.folders .image-container:before {
content: '\f004' !important;
}
You can also get codes from this updated resource, but you will need to extract codes
\f244 from
[]:
https://fortawesome.github.io/Font-Awesome/cheatsheet/
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 03:27
by andreamarucci
I've tried to put that code but I got an error
Error -> TextStatus:error
and the code was not saved...
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 03:49
by mjau-mjau
Really? It works here ... Can you click Save WITHOUT the code now? I would need link and login to your panel to diagnose further ...
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 03:58
by andreamarucci
I clicked save with the field empty and it worked but as soon as I put the code in and click Save, I got that error. I've sent you a PM with login and password.
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 04:15
by mjau-mjau
Suhosin
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 04:22
by andreamarucci
Solved, don't know if it's the same but it was mod_security. Disabling it do the trick... Thanks!
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 04:29
by andreamarucci
Also upgraded PHP to 7.0 and X3 works perfectly and it seems faster than before...
Re: Replace the asterisk with something other
Posted: 27 Jan 2016, 04:36
by mjau-mjau
andreamarucci wrote:Also upgraded PHP to 7.0 and X3 works perfectly and it seems faster than before...
Nice
Re: Replace the asterisk with something other
Posted: 28 Jan 2016, 09:04
by sprocket
I've discovered a little glitch with this hack. As long as "hover" existing in the css classes (the folders tab is where I'm using it), everything appears as expected. the hover icon changes to your liking.
- normal.jpg (40.77 KiB) Viewed 6067 times
However, if you have a page where you don't want a hover icon (no "hover" in the css class), then a small character appears between title and image. The character is there with or without hovering.
- small glitch
- glitch.jpg (41.25 KiB) Viewed 6067 times
Re: Replace the asterisk with something other
Posted: 28 Jan 2016, 09:18
by mjau-mjau
Yea, I guess that's why you call it a hack ... It should work if you make the CSS more specific like below, but it will make it even more of a "hack" really. With the below, it only applies for folders where you have the
hover class applied.
.folders.hover .image-container:before {
content: '\f004' !important;
}
Re: Replace the asterisk with something other
Posted: 28 Jan 2016, 09:35
by sprocket
mjau-mjau wrote:Yea, I guess that's why you call it a hack ... It should work if you make the CSS more specific like below, but it will make it even more of a "hack" really. With the below, it only applies for folders where you have the
hover class applied.
.folders.hover .image-container:before {
content: '\f004' !important;
}
That got it and I see within the folder css classes, we can use 'hover' for our hacked hover icon or 'x3-hover-icon-asterisk-primary' to keep the original hover icon, allowing us to mix and match the two. Thanks