Search…

X3 Photo Gallery Support Forums

Search…
 
SilentD
Topic Author
Posts: 17
Joined: 31 Jan 2016, 08:40

footer icons

17 Dec 2017, 23:00

is it possible to add custom footer icons somehow?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: footer icons

18 Dec 2017, 00:40

You can add any link with any color and any title, and any icon that you can find available in Font Awesome:
http://fontawesome.io/icons/
Code
<a href="https://flamepix.com" data-icon="fire" data-color="brown" title="X3 hosting!"></a>
More complicated if you want to add your OWN icon. You would have to create an icon (png), upload into a dir, and add custom CSS to make sure the new button looks almost identical with the other buttons (since you are using an image and not a font). If you really need a different graphic/icon/logo than available in Font Awesome, it might be an idea to add the link BELOW the icon buttons instead of struggling to try to make it look identical.
 
SilentD
Topic Author
Posts: 17
Joined: 31 Jan 2016, 08:40

Re: footer icons

18 Dec 2017, 20:06

design is my thing, so thats the easy part.. adding the code is the hard part for me..

how would the code or link look like, in order to attach an image as an icon?.. say I put a "youpic.png" in the images folder.  How does it appear in the footer?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: footer icons

19 Dec 2017, 00:01

SilentD wrote:how would the code or link look like, in order to attach an image as an icon?.. say I put a "youpic.png" in the images folder.  How does it appear in the footer?
I can give you the html code (see below), but the icon will not look the same as the other icons. The dimensions and aspect of your IMG would create a different padding for the circle, and the circle would be bigger and not even symmetric [screenshot]. You would have to add several custom CSS styles to make it look the same.
Code
<a href="https://flamepix.com" data-icon="" title="X3 hosting!">
  <img src="/content/custom/files/images/filename.png" alt="">
</a>
Unfortunately, it's not as easy as it may seem to create symmetric rounded circles if the icons inside have different size/aspect or are different in nature. This should work: Go to settings > custom > custom CSS:
Code
.my-custom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
Then add the above class to your img icon:
Code
<a href="https://flamepix.com" data-icon="" title="X3 hosting!">
  <img src="/content/custom/files/images/filename.png" class="my-custom-icon" alt="">
</a>
Maybe we can improve X3 so it's easier to add custom icons in a future release.
 
SilentD
Topic Author
Posts: 17
Joined: 31 Jan 2016, 08:40

Re: footer icons

19 Dec 2017, 09:11

ok. thanks.. that worked just fine.