TinyPortal

[@rjen]

In an existing article: in the editor switch to 'Source' view and then add in the line just after the '<a'  before the 'href'  the 'class="bbc_link"'

[jbridges87]

Perfect.
Is there a way to make all future articles show like this as well?

[@rjen]

If you want that default you can consider creating bbc articles . Changing the css is not an option cause that would cause every link in the forum to be underlined.

[Antechinus]

You might be able to set this up as a permanent thing in the CSS, if the TP HTML articles have a usable identifier that distinguishes them from other articles and elements of the site. If they don't have one, it presumably wouldn't be hard to add a custom one to the Sources code. Something like:

Code (template) Select Expand

<div class="html_article">********

Code (css) Select Expand

.html_article a:link, .html_article a:visited {color: #whatever; text-decoration: dowotchalike;

I can see this being useful, since you could potentially set up a stylesheet to handle the bulk of the styling for any HTML article, without requiring typing a pile of classes every time you write one (although it could get a tad gnarly on descendants if you went overboard).

Not that I'm suggesting this be added to TP as a core feature at this stage, but if someone wants to do it on their own site it shouldn't be that difficult.

[@rjen]

It's not available atm, but I agree that we can add it in a next release

[Antechinus]

If someone wanted to do this for themselves, where would they add the class?

[Arantor]

Looks like you could springboard this off .article-text ?

[Antechinus]

Yes there are quite a few classes in the markup for the articles on the fjr-club front page, but I suspect those were written as BBC articles (inline styles for justify, etc make me think that).

ETA: Just taking a quick look. TPmodules.template has this:

Code Select Expand

if($mg['articletype']=='php')
echo '
<textarea name="tp_article_body'.$mg['id'].'" id="tp_article_body'.$mg['id'].'" wrap="auto">' , $mg['body'], '</textarea><br>';

elseif($mg['articletype']=='html' && $tp_use_wysiwyg > 0)
TPwysiwyg('tp_article_body'.$mg['id'], $mg['body'], true,'qup_tp_article_body', $tp_use_wysiwyg);

elseif($mg['articletype']=='html' && $tp_use_wysiwyg == 0 )
echo '
<textarea name="tp_article_body'.$mg['id'].'" id="tp_article_body" wrap="auto">' , $mg['body'], '</textarea><br>';

elseif($mg['articletype']=='bbc')

So it wouldn't be hard to use those in a suitable place (haven't found suitable place yet).

[Arantor]

I found that also on the TP site but I found it on a page rather than necessarily on an article explicitly :/

[@rjen]

It is already possible by using the article_inner class that holds the article body text: just add this to your .css at the end...

Code Select Expand

.article_inner a, a:visited {
    border-bottom: 1px solid #a8b6cf;
}

[@rjen]

I can see this being useful, since you could potentially set up a stylesheet to handle the bulk of the styling for any HTML article, without requiring typing a pile of classes every time you write one (although it could get a tad gnarly on descendants if you went overboard).

Not that I'm suggesting this be added to TP as a core feature at this stage, but if someone wants to do it on their own site it shouldn't be that difficult.

FYI: in TP 2.0.0 we have introduced a custom css file in TinyPortal which I am using for exactly that:  it holds all styles that I setup to be used in my Articles. This tweak can also easily be added into that custom css file. Which is what I did here: https://test2.fjr-club.nl/index.php?page=FJR-club-Nederland
This is a html article by the way...

[Antechinus]

Cool. That's sorted then.

[@rjen]

Actually the better .css is this:

Code Select Expand


.article_inner a, .article_inner a:visited {
    border-bottom: 1px solid #a8b6cf;
text-decoration: none;
}

[Antechinus]

I've gone off the bottom border for links, because it tends to look crap with linked images. There's another trick you can do these days:

Code Select Expand

/* Styling for BBC tags */
.bbc_link:link, .bbc_link:visited, .bbc_link:hover, .bbc_link:focus {
text-decoration: underline;
text-decoration-color: #463C31;
text-underline-position: under;
border-bottom: 0;
}
.bbc_link:hover, .bbc_link:focus {
text-decoration-color: #85735D;
}

That's from my dark theme for this site, so you'd obviously have to adjust the colours to suit your intended use. You also probably wouldn't need the override for the default bottom-border.

The good thing about this method is that since it's a text-decoration it isn't applied to linked images, so they look fine even if they have a transparent background around the central content, but the text-underline-position: under; makes the underline sit lower, like a bottom border. You get the same look with better functionality, and it has good support. IE (any version) won't support it, but who cares? Firefox on Android and Safari on iOS won't support it either, at least at the moment. They'll just fall back to standard underline. Anything else is good to go.

[@rjen]

Haha, I was JUST looking into the same thing with the images...

[Antechinus]

Yep. I originally wanted the bottom border because I find underlined text becomes a real PITA to scan if there's much of it. A paragraph full of underlined links is just a crap user experience, IMO. Linked images are definitely a problem though, so text-underline-position: under; is the better option*. Easy to read (especially since you can style the colour of the underline separately to the text) and no problems with images.

*Wasn't supported back in 2.0.x beta days.

[@rjen]

Perfect.
Is there a way to make all future articles show like this as well?

well there you go.

Put this in your css and it should do the trick..
Colors are the SMF2.0 curve colors. If you are using another theme, you may have to adapt the colors...

Code Select Expand


/* Styling for Link tags */
.article_inner a, .article_inner a:visited, .article_inner a:link {
text-decoration: underline;
text-decoration-color: #a8b6cf;
text-underline-position: under;
border-bottom: 0;
}
.article_inner a:hover, .article_inner a:focus {
text-decoration-color: #334466;
}


[edit] just checked your site: default colors are ok...

[Antechinus]

You don't need to declare hover and focus initially. Just having them picking up the color in the second chunk of code is enough. They'll automatically grab the rest due to being links.

[@rjen]

You are right, I updated my post accordingly.

That's what you get when doing som quick and dirty stuff...

[jbridges87]

I added the code to the bottom of my themes css, and then wrote a test article with some URL links, but there was no difference.

The linked text still shows up normally.

Edit - Looks like there may have just been a delay. They're showing underlined now.
I'm going to test a few more links out on a new article, and see the results. I'll report back.