View Full Version : Miscellaneous Hacks - Arrow Image next to posted links - Wiki style.
AURFSCAN
03-06-2011, 10:00 PM
This is a really neat mod I just figured out :p
While messing around with another mod I just posted https://vborg.vbsupport.ru/showthread.php?p=2170434 I worked out how to add an Image after links in posts and sigs.
Image in this example is a small arrow - see attached Image
add to additional.css
.signature a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;
}
.postcontent a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;
}
change the url to point to your Image location
.postcontent arrow image will apply itself to attachment and quote boxes too :)
also you dont have to have them both (post link and sig link Images) , just add what you want
remove Image from Internal links - see post 18
:D
sulasno
03-07-2011, 06:17 AM
tagged and thanks;
is it possible to put the arrow in front of the link?
AURFSCAN
03-07-2011, 06:25 AM
sure sulasno, change in the code both 'right' to 'left'
eg.
.signature a {
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
.postcontent a {
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
sulasno
03-07-2011, 06:45 AM
thanks
my present code is
/* change link color in posts */
.postcontent a {
[HERE]
font-weight: bold;
color: #FF0000;
[THERE]
}
where do I add your code ? [HERE] or [THERE]
AURFSCAN
03-07-2011, 07:08 AM
easy just to add it underneath :)
/* change link color in posts */
.postcontent a {
[HERE]
font-weight: bold;
color: #FF0000;
[THERE]
}
.signature a {
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
.postcontent a {
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
but this will work aswell
/* change link color in posts and add Image*/
.postcontent a {
font-weight: bold;
color: #FF0000;
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
.signature a {
margin: 0px;
padding-left: 15px;
background-image: url('/images/link1.gif');
background-position:left center;
background-repeat: no-repeat;
}
Taurus1
03-07-2011, 07:53 AM
Now that is so cool man. Thanks! Looks great.
Boofo
03-07-2011, 08:15 AM
I'm confused here. Why would you want to add an arrow image to a link if it doesn't lead anywhere? That is what the arrow image is used for in posts.
Taurus1
03-07-2011, 08:24 AM
I'm confused here. Why would you want to add an arrow image to a link if it doesn't lead anywhere? That is what the arrow image is used for in posts.
HUH? The arrow is right behind the link, so clicking it takes you to where the link goes. To me, it makes links stand out a bit more in posts. Looks good.
sulasno
03-07-2011, 08:55 AM
I have installed it but I can't see the image using Palemoon; going to trying using another browser; personally I prefer a dancing girl instead of an arrow :-)
Boofo
03-07-2011, 09:16 AM
HUH? The arrow is right behind the link, so clicking it takes you to where the link goes. To me, it makes links stand out a bit more in posts. Looks good.
If the arrow takes you to the same place the link goes, then clicking the link or using the arrow is the same thing? That is kind of ambiguous, don't you think? To each their own, I guess.
AURFSCAN
03-07-2011, 09:16 AM
sulasno - make sure the Image path to where your have the Image uploaded is correct
background-image: url('/images/link1.gif');
Taurus1 - thanks, glad you like it.
Boofo - sorry for any confusion, its basically what Taurus1 said in that it makes any links stand out and lets the reader know that its a link off site or just a link in general and says 'click here and I'll take you somewhere else' .... kinda wiki style :)
sulasno
03-07-2011, 09:22 AM
I found the problem; had to add "/forum" :-)
now to go and look for a good indicator
not sure whether it is a bug though; the image also appears when someone edits a post
Boofo
03-07-2011, 09:49 AM
Boofo - sorry for any confusion, its basically what Taurus1 said in that it makes any links stand out and lets the reader know that its a link off site or just a link in general and says 'click here and I'll take you somewhere else' .... kinda wiki style :)
Actually, this might come in handy for my wiki bbcode tags. I can't see using it for all links but wiki links might be okay to use the image with.
AURFSCAN
03-07-2011, 08:23 PM
Good Idea boofo, just a thought that if you use for wiki tags and all links it'll display arrow twice.
cheers
Boofo
03-07-2011, 10:14 PM
Good Idea boofo, just a thought that if you use for wiki tags and all links it'll display arrow twice.
cheers
I ended up just using it for my wiki tags. Here is what I added to the additional.css template:
/* Arrow image next to wiki bbcode links */
.wikicontent {
margin: 0px;
padding-right: 15px;
background-image: url('images/boofo/wiki_link.gif');
background-position:right center;
background-repeat: no-repeat;
}
and the attached pic is the result. Thanks for steering me in the right direction. ;)
LifesGreatestGift
03-14-2011, 12:28 AM
The "arrow" image link is supposed to identify "external" links. Any link that is "internal" would theoretically not have an "arrow" image. i doubt that is the case here.
Boofo
03-14-2011, 12:51 AM
I use it only to show wiki links. Makes them easier to spot in long posts.
AURFSCAN
03-14-2011, 01:11 AM
'supposed to' and 'theoretically' are nice words... are they written in the Internet bible???
'Image in this example is a small arrow' says the Initial post.... example!
remove Image from Internal links
add to additional.css
/* remove Image from Internal links*/
.postcontent a[href^="http://www.yourdomain.com"] , a[href^="http:// yourdomain.com"] , a[href^="attachment.php?"] {
color: #306091;
background-image: none;
padding-right: 0;
}
I found an Image for the bible thumpers that dont add the above code.
:)
ClErK1991
02-07-2012, 07:22 PM
thanks for this, however dont work on CMPS :P
marked as installed
AURFSCAN
02-13-2012, 08:27 PM
cmps article preview
.article_preview_contents a {color: #306091;margin: 0px;padding-right: 13px;background-image: url('/images/link1.png');
background-position:right center;background-repeat: no-repeat;}
.article_preview_contents a[href^="http://www.domain.com"] , a[href^="http:// domain.com"], a[href^="attachment.php?"] {
color: #306091;background-image: none;padding-right: 0;}
change bold
:)
Toorak Times
02-18-2012, 11:02 AM
I ended up just using it for my wiki tags. Here is what I added to the additional.css template:
/* Arrow image next to wiki bbcode links */
.wikicontent {
margin: 0px;
padding-right: 15px;
background-image: url('images/boofo/wiki_link.gif');
background-position:right center;
background-repeat: no-repeat;
}
and the attached pic is the result. Thanks for steering me in the right direction. ;)
I tend to agree with you on this one Boofo, I am republishing a fortnightly Rock Magazine I published in the late '70's and early '80's and this will work wonderfully differentiating the links as Wiki. Can I use that code of yours as is?
Cheers
Mick
Boofo
02-18-2012, 11:43 AM
I tend to agree with you on this one Boofo, I am republishing a fortnightly Rock Magazine I published in the late '70's and early '80's and this will work wonderfully differentiating the links as Wiki. Can I use that code of yours as is?
Cheers
Mick
Sure, go for it. ;)
Toorak Times
02-18-2012, 01:38 PM
Sure, go for it. ;)
Cheers mate, appreciated, I'll mark this installed eh!
Spangle
03-10-2013, 12:22 PM
I ended up just using it for my wiki tags. Here is what I added to the additional.css template:
/* Arrow image next to wiki bbcode links */
.wikicontent {
margin: 0px;
padding-right: 15px;
background-image: url('images/boofo/wiki_link.gif');
background-position:right center;
background-repeat: no-repeat;
}
and the attached pic is the result. Thanks for steering me in the right direction. ;)
I like this idea, as a way of differentiating links, TBH I can't see the point for other links, as they normally turn blue to signify a link anyway.
Soidberg
07-21-2015, 09:44 AM
How can I remove the arrow from linked (internal) Images?
152857
I need the arrow on:
1 internal + external Textlinks
2 internal + external Links in Signature
3 only external Images
I don?t need the arrow on internal Pics, how can I fix this?
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.