TYPOlight 2.5.9 - lines beneath image as link

Hi,

I'm trying to make some changes to a charity website built on TYPOLight 2.5.9. I'm just a user but we don't have the funding to employ a professional developer so I'm seeing what changes I can make myself. In an ideal world I'd upgrade the system to the latest Contao but I've tried that before and it's going to take a professional to drag the website through the process in one piece.

For now I'm addressing one issue at a time:

When I create an image element and choose to use the image as a link a line appears on the front-end which stretches the full length of the bottom border of the image and sticks out slightly to the right hand side. In fact it appears to do the same for any kind of link - I created a custom html element for a facebook follow icon and the line appears again.

Is this a common issue? Any thoughts on how I can address it?

Thanks

Hi,

This is a very simple thing.

Go to theme>css or your custom css file in the tl_files folder and add the following lines:

a img {
text-decoration: none;
}

a {
text-decoration: none;
}

The first one is for the line below the image as link and the second one is to delete the line below all hyperlinks.

Hope this helps you out!

Hi Paul,

Thanks for the response.

Excuse my ignorance but there appear to be quite a few different .css files in the themes folder I can find. Any thoughts on the kind of name the one I should be editing would have?

Thanks

Hi Paul,

I think I identified the correct .css: basics.css, and I updated the code accordingly img and link codes accordingly. But it appears to have had no effect. Any thoughts?

Thanks

Anthony

Can anyone help me with the above? Would really appreciate some help.

Thanks

Hi AntDancer,
Artified suggestion is correct, you just need to dig and find the correct css file to place the code.

My advise would be for you to learn how to use Firebug (on firefox) or any of the inbuilt elements inspects (on Chrome or Safari) to analyse the code of the website, you can find tutorials all over the web including youtube. It's very useful especially when digging around someone else's code.

If you want useful help, well a link to the problem website might be a good start, otherwise it's all speculation.

Hi geung,

Thanks for the advice.

The website is:

http://saiga-conservation.com/

You'll see the social media image links in the right hand bar have a line underneath them.

I'm pretty sure I located the appropriate css: basic.css.

I changed:

/* Links */
a { color:#666966; text-decoration:none; }
a:hover { color:#8ab858; }

/* Images */
img { border:0px; }

to:

/* Links */
a {
text-decoration: none;
}
a:hover { color:#8ab858; }

/* Images */
img {
text-decoration: none;
}

But it seemed to have no effect.

I used firebug and found this (see attached image).

Now to resolve your issue.

Find the css file 'element.css' in the following path:
templates/sca_files/element.css

Then go to line 38 or find and edit

Code:

---

div#content a {
    border-bottom: 1px solid #000000;
    text-decoration: none;
}

---

to

Code:

---

div#content a {
    text-decoration: none;
}

---

That should do it.

Amazing! It worked!

Thanks geung. I was looking for the css file in completely the wrong place.

I see what you mean now about locating the problem. I tend to use chrome so is Developer tools sufficient or is it worth switching to Firefox so that I can use firebug? If the latter has more tutorials/support I may go with that.

Anyway, thanks for the help.

Ant

Glad it worked.

I use Chrome too for browsing, it's dev tool is a fine tool and is almost the same as firebug (not as powerful or intuitive as firebug but that's down to personal taste and need).
Like most things, you just need to know where to look and how to use it.

Yeah Firebug is a real must-have to develop websites