Search…

X3 Photo Gallery Support Forums

Search…
 
rarp
Topic Author
Posts: 3
Joined: 26 May 2021, 06:10

[solved] Text links in footer

19 Feb 2026, 12:40

Hi all,

I've been using X3 for years, though for personal use only. Now I want to take the plunge and make my personal website using X3.

I have run into a couple of issues and would like to address them one by one, starting with my current pet peeve:
Text links in the footer, i.e. I want the 'title' attribute displayed.

My site is hosted in Germany, I want to move some legally required links from the main menu to the footer. In my opinion, they are as desirable and visually appealing in the main menu as dust spots in a photo. Begone!

Right now, Settings | Footer looks like this:
Code
<div class="icon-buttons hover-color hover-title">
  <a href="/Datenschutz/" title="Datenschutz"></a>
  <a href="/Impressum/" title="Impressum"></a>
</div>
The links proper work fine but they're defined as icons only.

It is my understanding that I can override standard CSS by adding my own CSS code to Settings | Custom | Custom CSS. Unfortunately, my CSS skills are limited and I have had no luck so far.
To check whether or not I am generally able to overrule the standard CSS, I tried this snippet:
Code
.footer { background-color: red !important; }
That worked well and led me to believe I am doing the right thing using wrong code. 

So, what would be the best approach?

Thanks & cheers
Last edited by rarp on 20 Feb 2026, 07:58, edited 1 time in total.
 
rarp
Topic Author
Posts: 3
Joined: 26 May 2021, 06:10

Re: Text links in footer

19 Feb 2026, 14:42

Some progress here, not there yet though.
Firstly, I have changed the footer to read
Code
<div class="icon-buttons hover-color hover-title">
  <a href="/Datenschutz/" title="Datenschutz">Datenschutz</a>
  <a href="/Impressum/" title="Impressum">Impressum</a>
Then I added the following custom CSS code:
Code
.icon-buttons a {
    background: none !important;
    border: none !important;
    color: inherit !important;
    text-decoration: none;
    position: relative;
    display: inline-block;
}
.icon-buttons a::after {
    content: attr(title);
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
    padding-left: 0.5rem;
}
.icon-buttons a::before,
.icon-buttons a i,
.icon-buttons a img {
    display: none !important;
}
I wanted to add a screenshot of 916x440px but as as soon as I do, I get this error message:
Your message contains 448073 characters.
The maximum number of allowed characters is 100000.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 14469
Joined: 30 Sep 2006, 03:37

Re: Text links in footer

19 Feb 2026, 22:08

rarp wrote:The links proper work fine but they're defined as icons only.
As long as you are creating your links inside the icon-buttons container, they will display as icons, because that's the entire point of the icon-buttons container. That's why there isn't even any text inside the links. It uses Javascript to assemble icon-based links.
Code
<div class="icon-buttons hover-color hover-title"> ...
If you want plain text links, in some form or other, you would create them outside of the above block. For example just using paragraphs:
Code
<p>
  <a href="/Datenschutz/" title="Datenschutz">Datenschutz</a>
</p>
As you can see in the above, we also need to add TEXT into the link, assuming you want to create a text link? Keep in mind, if you are going to stack links in the footer, they will generally stack vertically centered. If you had ideas for a different design of your own links in the footer, this may need to be planned with CSS.
rarp wrote:
Code
.footer { background-color: red !important; }
That worked well and led me to believe I am doing the right thing using wrong code. 
Yes, that would work, but it's hard to understand exactly what you want to do. If you want text links, then first of all, you would NOT add them inside the icon-buttons container (as emphasized above). If you add them outside, they will display as normal text links. Then, depending on what you want to achieve, you can customize further by adding separate CSS for your own links.
 
rarp
Topic Author
Posts: 3
Joined: 26 May 2021, 06:10

Re: [solved] Text links in footer

20 Feb 2026, 08:02

Thanks a million, works like a charm! And yes, it was painfully easy to implement:
Code
<p>
  <a href="/Datenschutz/" title="Datenschutz">Datenschutz</a> | <a href="/Impressum/" title="Impressum">Impressum</a>
</p>
Have a nice weekend!