vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Miscellaneous Hacks - Arrow Image next to posted links - Wiki style. (https://vborg.vbsupport.ru/showthread.php?t=259978)

AURFSCAN 03-06-2011 10:00 PM
Arrow Image next to posted links - Wiki style.
 
1 Attachment(s)
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


Code:

.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.

Code:

.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

Code:
/* 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 :)

Code:

/* 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

Code:

/* 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
Quote:
Originally Posted by Boofo (Post 2170503)
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
Quote:
Originally Posted by Taurus1 (Post 2170505)
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

Code:
  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
Quote:
Originally Posted by AURFSCAN (Post 2170513)
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
1 Attachment(s)
Quote:
Originally Posted by AURFSCAN (Post 2170682)
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:

HTML Code:
/* 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
1 Attachment(s)
'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

Code:

/* 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

Code:
.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
Quote:
Originally Posted by Boofo (Post 2170720)
I ended up just using it for my wiki tags. Here is what I added to the additional.css template:

HTML Code:
/* 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
Quote:
Originally Posted by Toorak Times (Post 2300833)
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
Quote:
Originally Posted by Boofo (Post 2300843)
Sure, go for it. ;)

Cheers mate, appreciated, I'll mark this installed eh!

Spangle 03-10-2013 12:22 PM
Quote:
Originally Posted by Boofo (Post 2170720)
I ended up just using it for my wiki tags. Here is what I added to the additional.css template:

HTML Code:
/* 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?

Attachment 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?


All times are GMT. The time now is 04:59 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01226 seconds
  • Memory Usage 1,796KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (8)bbcode_code_printable
  • (3)bbcode_html_printable
  • (8)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (25)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete