- Schermata 2016-01-26 alle 14.06.20.png (156.35 KiB) Viewed 5258 times
How can I do that?
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
-
-
andreamarucci
Experienced
- Posts: 308
- Joined:
Replace the asterisk with something other
Hello Karl, I'd like to replace the icon that appear when I hover on each gallery
with another png icon.
How can I do that?
with another png icon.
How can I do that?
Re: Replace the asterisk with something other
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.
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
I'd be interesting in a hack to use a different icon from the font-awesome icons
Re: Replace the asterisk with something other
Use this resource to find the "content" code for the icon you want to use:sprocket wrote:I'd be interesting in a hack to use a different icon from the font-awesome icons
http://astronautweb.co/snippet/font-awesome/
Then go to panel->settings->custom->css:
Code
.folders .image-container:before {
content: '\f004' !important;
}https://fortawesome.github.io/Font-Awesome/cheatsheet/
-
-
andreamarucci
Experienced
- Posts: 308
- Joined:
Re: Replace the asterisk with something other
I've tried to put that code but I got an error
and the code was not saved...
Code
Error -> TextStatus:errorRe: Replace the asterisk with something other
Really? It works here ... Can you click Save WITHOUT the code now? I would need link and login to your panel to diagnose further ...
-
-
andreamarucci
Experienced
- Posts: 308
- Joined:
Re: Replace the asterisk with something other
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.
-
-
andreamarucci
Experienced
- Posts: 308
- Joined:
Re: Replace the asterisk with something other
Solved, don't know if it's the same but it was mod_security. Disabling it do the trick... Thanks!
-
-
andreamarucci
Experienced
- Posts: 308
- Joined:
Re: Replace the asterisk with something other
Also upgraded PHP to 7.0 and X3 works perfectly and it seems faster than before... 
Re: Replace the asterisk with something other
Niceandreamarucci wrote:Also upgraded PHP to 7.0 and X3 works perfectly and it seems faster than before...
Re: Replace the asterisk with something other
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.
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.
- normal.jpg (40.77 KiB) Viewed 5222 times
- small glitch
- glitch.jpg (41.25 KiB) Viewed 5222 times
Re: Replace the asterisk with something other
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.
Code
.folders.hover .image-container:before {
content: '\f004' !important;
}Re: Replace the asterisk with something other
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. Thanksmjau-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.Code.folders.hover .image-container:before { content: '\f004' !important; }