Different layout for BBC [iurl] and [url] links / all intern links autom. [iurl]

[sangham.net]

Dear SMF team, dear programmers and professionals,

two questions (could be considered together and independently) .

1. Is there a simple way to show the links coming form [ iurl ] and [ url ] in a different way. Like to add an icon (an arrow , or to make different underlining), if it is a link redirecting into a new window?

Could not figure out a way of discrimination within the css structur. There is "just" "link" and "visited", as far as I am able to undestand.

2. Is there a possibility to set generate automatical [iurl] for links inside the own url area (intern links)?

Thanks a lot for your help in advanced!

[Mr. Pedram]

1. Is there a simple way to show the links coming form [ iurl ] and [ url ] in a different way. Like to add an icon (an arrow , or to make different underlining), if it is a link redirecting into a new window?

Could not figure out a way of discrimination within the css structur. There is "just" "link" and "visited", as far as I am able to undestand.

I made a mod called « Redirect Links » , that will do what you want. add a icon (arrow) to links and also redirect all links to new window. but this mod still isn't in SMF Mod site, so you can't use it. but for now if you want to play with links output, you must take a look to subs.php:

Code (Find) Select Expand

'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link" target="_blank">',
'after' => '</a>',

Code (Replace) Select Expand

'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link" target="_blank">',
'after' => ' <img src="'. $settings['images_url'] .'/arrow.gif" alt="" class="icon" /></a>',

And:

Code (Find) Select Expand

global $txt, $scripturl, $context, $modSettings, $user_info, $smcFunc;

Code (Replace) Select Expand

global $txt, $scripturl, $context, $modSettings, $user_info, $smcFunc, $settings;

Note:

just copy arrow.gif to default images directory.
if you want to change link style, you should do it via css.
also same for [iurl] .

[sangham.net]

Thank you very much Mr. Pedram,

looks simple and straight forward. Very helpful.
Just an additional question. If I understand it right, it's all about class="bbc_link", that includes, as far as I understand [iurl] as well. For the pic it self, you added a new parameter, called "$settings".

How to catch the [ iurl ] [ url ] differently?

What would be the class name for [ iurl ] in the css?

Or do I misunderstand or oversee something?

(A additional side question, never did anything in .php, to edit the file simply fia ftp and with an editor like notepath++ is ok?)

[Mr. Pedram]

Thank you very much Mr. Pedram,

looks simple and straight forward. Very helpful.

You're welcome.

Just an additional question. If I understand it right, it's all about class="bbc_link", that includes, as far as I understand [iurl] as well. For the pic it self, you added a new parameter, called "$settings".

this class just will handle your link's style ([url] and [iurl] both).

Code Select Expand

class="bbc_link"

you can change it in index.css

Code Select Expand

/* Styling for BBC tags */
.bbc_link:link, .bbc_link:visited
{
border-bottom: 1px solid #A8B6CF;
}
.bbc_link:hover
{
text-decoration: none;
border-bottom: 1px solid #346;
}

And

Code Select Expand

'. $settings['images_url'] .'

is your default images directory, and you need to globaliz it on subs.php

Code Select Expand

global $settings;

How to catch the [ iurl ] [ url ] differently?

for add arrow just follow this

Code (Find) Select Expand

'tag' => 'iurl',
'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link">',
'after' => '</a>',

Code (Replace) Select Expand

'tag' => 'iurl',
'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link">',
'after' => ' <img src="'. $settings['images_url'] .'/arrow.gif" alt="" class="icon" /></a>',

What would be the class name for [ iurl ] in the css?

class="bbc_link"

if you want to be different with [url] you can change class name like this:

Code Select Expand

'before' => '<a href="$1" class="bbc_link">',

change to:

Code Select Expand

'before' => '<a href="$1" class="bbc_ilink">',

and add this class to index.css:

Code Select Expand

/* Styling for [iurl] tag */
.bbc_ilink:link, .bbc_ilink:visited
{
border-bottom: 1px solid #A8B6CF;
}
.bbc_ilink:hover
{
text-decoration: none;
border-bottom: 1px solid #346;
}

(A additional side question, never did anything in .php, to edit the file simply fia ftp and with an editor like notepath++ is ok?)

yes, no problem.

[sangham.net]

Thanks a lot, more then great to understand how it works!!

Just an additional question:

if you want to be different with [url] you can change class name like this:

Change or add? If I like to have different layouts for both? If I would change it, there would be no special setting for the [ url ], or is it meant in together with the globaliz it on subs.php If so you have done the whole work already and catches exactly what I hoped that it is possbile. *big bow*

[Mr. Pedram]

both, [url] and [iurl] using a certain css class, that here called bbc_link
if you want to change style of each one, you must change the class name, and add this class to style.css. As i said in prev post:

if you want to be different with [url] you can change class name like this:

for change [iurl] style:

Code Select Expand

'before' => '<a href="$1" class="bbc_link">',

replace with:

Code Select Expand

'before' => '<a href="$1" class="bbc_ilink">',

and add this class to index.css:

Code Select Expand

/* Styling for [iurl] tag */
.bbc_ilink:link, .bbc_ilink:visited
{
border-bottom: 1px solid #A8B6CF;
}
.bbc_ilink:hover
{
text-decoration: none;
border-bottom: 1px solid #346;
}

[sangham.net]

Great explaining, I guess useable for many on this issue. Thanks a lot, Mr. Pedram!!

[Mr. Pedram]

Great explaining, I guess useable for many on this issue. Thanks a lot, Mr. Pedram!!

You're welcome Johann B

[sangham.net]

I have tried this variant:

I have changed followed lines in  ../sources/subs.php :

Code ("line 1297 - 1300") Select Expand

'tag' => 'iurl',
'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link">',
'after' => '</a>',

into

Code ("line 1297 - 1300") Select Expand

'tag' => 'iurl',
'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link">',
'after' => ' <img src="'. $settings['images_url'] .'/arrowi.gif" alt="" class="icon" /></a>',

and

Code ("line 1566 - 1568") Select Expand

'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link" target="_blank">',
'after' => '</a>',

into

Code ("line 1566 - 1568") Select Expand

'type' => 'unparsed_equals',
'before' => '<a href="$1" class="bbc_link" target="_blank">',
'after' => ' <img src="'. $settings['images_url'] .'/arrow.gif" alt="" class="icon" /></a>',

and

Code ("line 889") Select Expand

global $txt, $scripturl, $context, $modSettings, $user_info, $smcFunc;

into

Code ("line 889") Select Expand

global $txt, $scripturl, $context, $modSettings, $user_info, $smcFunc, $settings;

As well as a File arrow.gif for [ iurl ] and arrowi.gif for [ url ] added in ../Themes/defaul/images/

But there did not happen much yet . I guess I have overseen something generally. hmm... I really appreciate the patient many supporters have developed here for dummies like me.

Do anybody have a strong hit (hint)?

[Mr. Pedram]

I thought you said your problem solved, anyway
attach your subs.php here.

[MrPhil]

"What" did not happen "much yet"? That's rather vague. Are you seeing any difference from "stock" SMF? Do you see an "image not found" icon, or a blank space? You may have to show the page source (in the browser, such as ctrl+U on Firefox) and see if the new code is there. If so, where is it trying to find the arrow image? Does that match where you actually have that file?

[sangham.net]

I thought you said your problem solved, anyway
attach your subs.php here.

Dear Mr. Pedram,

I was very sure, as your explaining was perfect and I could follow it fully. And actually I guess I found the problem. Thanks MrPhil !, for the "trick" strg+U, so I could see that it refers to the theme folder and not as I thought to the default image folder.

Code Select Expand

</a><br />2.&nbsp;&nbsp;&nbsp;<a href="http://sangham.net/index.php?topic=7.msg246#msg246" class="bbc_link">Tugend – Sila <img src="http://sangham.net/Themes/sangham/images/arrowi.gif" alt="" class="icon" /></a>

Thanks Mr. Pedram!



*Big bow* and thank you both! May I be able to repay it on time.

[Mr. Pedram]

Good to hear it solved