Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
Joseph_balson
Experienced
Topic Author
Posts: 73
Joined: 08 Mar 2021, 05:35

image popup vs image page: link css weirdness.

21 Jun 2021, 07:30

I have that head scratching thing with the way links in description are displayed.

This is a test site based on an unmodded X3:
popup: https://did-art.fr/X3/yosemite/
regular page: https://did-art.fr/X3/#pid=1.yosemite.jpg

the link in the popup is ok: no underline, which is expected.
The link in the regular page is underline, whatever I try: I put text-decoration: none; in every place i could, it is STILL underlined. only whay to get rid that I found consists in adding style="text-decoration:none;" in the < a > tag. I don't want to do that.

What am I missing?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: image popup vs image page: link css weirdness.

22 Jun 2021, 00:43

First of all,  I see some un-rendered HTML because description is added into attributes including "quotes", which is breadking the data-description="" attribute. I'm not sure how this page or description is created, but you would have to use 'single-squotes' instead, or make sure to escape "quotes.

Considering the above, I can't really grasp the problem. You can easily block link underline with CSS (Settings > Custom > Custom CSS), either globally for all links, or for a class that you add to the links, or for certain areas (popup etc). It would look something like this:
Code
.mylinkclass {
  text-decoration: none !important;
}
 
User avatar
Joseph_balson
Experienced
Topic Author
Posts: 73
Joined: 08 Mar 2021, 05:35

Re: image popup vs image page: link css weirdness.

22 Jun 2021, 03:00

those exemples are from a totally normal X3., I just added the links in the regular photo editor. So those pages are just created by X3. i didn't touch the code.

I tried to create classes like 
Code
.mylinkclass {
  text-decoration: none !important;
}
but it doesn't change anything.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: image popup vs image page: link css weirdness.

22 Jun 2021, 03:29

Joseph_balson wrote:those exemples are from a totally normal X3., I just added the links in the regular photo editor. So those pages are just created by X3. i didn't touch the code.
Ok. Basically, the description made available to the popup, goes into an attribute on the link:
Code
data-description="{description}"
In X3, I should probably encode the description to avoid "quotes" in custom descriptions from breaking the attribute, which is what is happening in your case. The short term solution is to edit the caption and use 'single quotes'.
Joseph_balson wrote:I tried to create classes like 
Code
.mylinkclass {
  text-decoration: none !important;
}
but it doesn't change anything.
That was just an example which requires adding the custom class to each link you wish to affect. I can't see what you are doing in your examples, which are both affected by the issue above, which is unrelated to underline. For example, in the below link, you can see the top link is underlined, while the bottom link (with some messed up attribute output) is not underlined, because you have style="text-decoration:none" on the link.
https://did-art.fr/X3/yosemite/

If you want to globally remove all underline styles from all links everywhere, try this in custom CSS:
Code
a, a:hover {
  text-decoration: none !important;
}
 
User avatar
Joseph_balson
Experienced
Topic Author
Posts: 73
Joined: 08 Mar 2021, 05:35

Re: image popup vs image page: link css weirdness.

22 Jun 2021, 03:39

ok, so not quotes in description field it will be :) thanks
https://did-art.fr/X3/yosemite/