Author Topic: Change link style (Read 11845 times)

Jor · « **on:** April 10, 2002, 05:51:56 PM »

My final version of this filterset is down in this thread. Direct Link

********************************************************

This (set of) filters will allow you to change the way links are portrayed in your browser, with far more capabilities than those browser by default allow.
It consists of three parts: two web-page filters, and one stylesheet, to be placed in your [PROX]/HTML folder (or added to an existing user stylesheet).
I've finally found a way to give email links a special style

The filters:
Name = "Insert Links Stylesheet"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 256
Match = "<start>"
Replace = "<link rel="stylesheet" type="text/css" href="dhtml/links.css" />
"

Name = "Style Email links"
Active = TRUE
Multi = TRUE
Bounds = "<as*>"
Limit = 512
Match = "1 href=$AV(mailto:*2) 3 & (^*class="email")"
Replace = "1 href="mailto:2" class="email" 3"

The stylesheet:

/* Make sure links appear the way I want them to */
a
{
text-decoration : none;
}
a:hover
{
text-decoration : underline overline;
}
a:visited
{
text-decoration : line-through;
}

a.email:link
{
text-decoration : underline;
}
a.email:visited
{
text-decoration : underline line-through;
}
a.email:hover
{
text-decoration : overline;
}

The necessary files can also be downloaded here.

Edited by - Jor on 12 Apr 2002 02:19:43

Edited by - Jor on 23 Apr 2002 03:54:51

Arne · « **Reply #1 on:** April 10, 2002, 08:24:55 PM »

Just tested the set. It is really cool! Good work

Best wishes
Arne

Imici username: Arne

Jor · « **Reply #2 on:** April 11, 2002, 12:11:24 PM »

Hehe, glad it works right

I'm actually testing some more alternatives now, for instance this one:

a.email:before
{
  content : "Email: ";
  font-size: smaller;
}

Too bad there is no way within CSS to style email links -- but thank god for Prox ^=^

JD5000 · « **Reply #3 on:** April 11, 2002, 10:04:47 PM »

Thanks for sharing Jor! I really found this filter and it's technique useful.

--------

"Imagination is more important than knowledge" - Einstein

JD5000 · « **Reply #4 on:** April 12, 2002, 12:09:26 AM »

quote:

Hehe, glad it works right

I'm actually testing some more alternatives now, for instance this one:
a.email:before
{
content : "Email: ";
font-size: smaller;
}

Too bad there is no way within CSS to style email links -- but thank god for Prox ^=^

Oooooh, I like that one.

I'm using this for Javascript links...

a.script:hover
{
text-decoration : none; border: thin dashed blue;
}

--------

"Imagination is more important than knowledge" - Einstein

Jor · « **Reply #5 on:** April 12, 2002, 01:18:10 AM »

I think I know what you mean, a filter like this, right?

Name = "Style JS links"
Active = TRUE
Multi = TRUE
Bounds = "<as*>"
Limit = 512
Match = "1 href=$AV(javascript:*2) 3 & (^*class="script")"
Replace = "1 href="javascript:2" class="script" 3"

Seems I hadn't realized what I stumbled on to with this filter *s*

These are the styles I now use for links:

/* Make sure links appear the way I want them to */
a
{
  text-decoration : none;
}
a:hover
{
  text-decoration : underline overline;
}
a:visited
{
  text-decoration : line-through;
}

a.email:link
{
  text-decoration : underline;
}
a.email:before
{
  content : "Email: ";
  font-size : smaller;
}
a.script:link
{
  border: thin dashed blue;
}
a.script:hover
{
  border: thin dashed red;
}

Thanks for the suggestion JD5000, I just realized a way to customize my browser even more

Edited by - Jor on 12 Apr 2002 02:18:54

JD5000 · « **Reply #6 on:** April 12, 2002, 01:40:37 AM »

Hehe, what fun Proxo is.

Exactly like that.

Now I have styles for, email, javascript, redirects and image links. Thanks Jor!

I have them setup like this.....

---------

/* Make sure links appear the way I want them to */

a.new:link
{
color: #008000; text-decoration : none;
}
a.new:hover
{
text-decoration : none;
}
a.new:visited
{
text-decoration : line-through;
}

a.email:before
{
content : "Email: "; font-size: smaller;
}
a.email:link
{
text-decoration : underline;
}
a.email:visited
{
text-decoration : underline line-through;
}
a.email:hover
{
text-decoration : none; border: thin solid #008000;
}

a.script:link
{
text-decoration : none;
}
a.script:visited
{
text-decoration : line-through;
}
a.script:hover
{
text-decoration : none; border: thin dashed blue;
}

a.image:before
{
content : " "; font-size: smaller;
}
a.image:link
{
text-decoration : none;
}
a.image:visited
{
text-decoration : line-through overline;
}
a.image:hover
{
text-decoration : none; border: thin dashed #008000;
}

a.bypass:link
{
text-decoration : none;
}
a.bypass:visited
{
text-decoration : line-through;
}
a.bypass:hover
{
text-decoration : none; border: thin dashed #dd0000;
}

#BPM-supero:hover
{
text-decoration : none; border: thin dashed #dd0000;
}
#BPM-supero:visited
{
text-decoration : line-through;
}

A.BPM-supero-d
{
font: 9pt verdana; color: #b22222;
text-decoration: none; position: relative; top: -6px; left: -11px;
}
A.BPM-supero-d:hover
{
font: 9pt verdana; color: #b22222;
text-decoration: none; position: relative; top: -6px; left: -11px; border: thin dashed #dd0000;
}
A.BPM-supero-d:visited
{
font: 9pt verdana; color: #ffffff;
text-decoration : line-through; position: relative; top: -6px; left: -11px;
}

--------

"Imagination is more important than knowledge" - Einstein

sidki3003 · « **Reply #7 on:** April 12, 2002, 03:39:22 AM »

Hi there,

Jor, thanks a lot for this filter. It's real fun

Here is my version:

Name = "Style links"
Active = TRUE
Multi = TRUE
Bounds = "<as*>"
Limit = 512
Match = "(*href=$AV(((mailto|ftp|javascript))1:*))2 3"
Replace = "2 class="1"3"

/* Make sure links appear the way I want them to */
a:link{text-decoration : underline;}
a:visited{text-decoration : underline; color : #009999;}
a:hover{text-decoration : underline overline; color : #0066ff;}

a.ftp:link{text-decoration : underline; color : #993399;}
a.ftp:visited{text-decoration : underline; color : #999999;}
a.ftp:hover{text-decoration : underline overline; color : #ff0066;}

a.mailto:link{text-decoration : underline; color : #993399;}
a.mailto:visited{text-decoration : underline; color : #999999;}
a.mailto:hover{text-decoration : none; border: thin dashed teal;}

a.javascript:link{text-decoration : underline; color : #993399;}
a.javascript:visited{text-decoration : underline; color : #999999;}
a.javascript:hover{text-decoration : none; border: thin dashed blue;}

JD5000, how do you set up the filter to catch redirects and images

JD5000 · « **Reply #8 on:** April 12, 2002, 04:08:59 AM »

Hey, I like that filter Sidki3003, going to have to try it.

For images & redirects I use some modified filters I found in the kitchen sink.

Name = "Open Links to Images in Another Window (MOD)"
Active = TRUE
Multi = TRUE
Bounds = "<(a|area)s*>"
Limit = 256
Match = "(#starget=$AV(*))+#>"
"&*href=$AV(*.(gif|png|jpg|jpeg|jpe|bmp|xbm))"
"&*href=([\"']+)1"
Replace = "@ target="_blank""
"title="Open in new window" class="image"1>"

Name = "Bypass redirects in links & Open in new window (MOD)"
Active = TRUE
Bounds = "<a(rea|)s*[^-]>"
Limit = 512
Match = "(*(href|onclick))1=$AV((?(*?|*")*)2(http(s|)|ftp)3"
"(:|ftp:)(/|ftp/)+{2}([^&'"]+)45)6"
Replace = "<a class="bypass" title=Redirect bypassed "
"target=_blank href="3://$UESC(4)">"

--------

"Imagination is more important than knowledge" - Einstein

sidki3003 · « **Reply #9 on:** April 12, 2002, 04:32:47 AM »

Cool

I will try them now.

Jor · « **Reply #10 on:** April 12, 2002, 04:20:07 PM »

Nice improvement on my filter, sidki -- I've taken it up.

Would any of you happen to know how I can get this to work btw?

a.mailto:before img {display: none}

If I understand the CSS specs right, it should work... but it doesn't.

I need it because adding content before links can mess up the layout of pages too much.

JD5000 · « **Reply #11 on:** April 13, 2002, 06:23:46 AM »

I'm still trying to understand CSS.

What site are you using as a reference? I've been reading about it Here.

--------

"Imagination is more important than knowledge" - Einstein

Jor · « **Reply #12 on:** April 13, 2002, 12:47:07 PM »

The same site actually -- I always try to follow the W3 standards 100%

The WDG ( http://www.htmlhelp.com/ ) also has great info and examples.

Jor · « **Reply #13 on:** April 23, 2002, 02:51:41 AM »

I'll give all filters I currently use here, so they're in one place:

[Patterns]
Name = "Insert Prox Stylesheet"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 256
Match = "<start>"
Replace = "<!--//--><link href="http://bweb..local.ptron/prox.css" "
          "type="text/css" rel="stylesheet" title="Prox CSS" />
"

Name = "Style links"
Active = TRUE
Multi = TRUE
Bounds = "<(a|area)s*>"
Limit = 512
Match = "(*href=$AV(((mailto|ftp|javascript))1:*))2 3"
Replace = "2 class="1" 3"

Name = "Style image links"
Active = TRUE
Multi = TRUE
Bounds = "<(a|area)s*>"
Limit = 256
Match = "1 href=$AV((*.(gif|png|jpg|jpeg|jpe|bmp|xbm))2) 3"
Replace = "1 class="image" href="2" 3"

Name = "Convert Javascript redirects to links"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 256
Match = "[dpstw]&(((window|document|this|self|top|parent) . )+{1,*} )1"
        "location ((. href|)=([^=]*)2|. replace "
        "$NEST((,2,))) [;}]"
Replace = "{ if (pageIsLoadingPROX) "
          "document.write('<a class="proxlink" class="redirect" "
          "target="_top" title="Redirect Bypassed""
          "href=' + unescape('%22') + (2) + unescape('%22') + "
          "'><\/a>'); else 1location = (2); }"

Name = "Convert Flash animations to links"
Active = TRUE
URL = "^$LST(AllowFlash)"
Bounds = "$NEST(<object,</object>)|<embeds*>"
Limit = 1024
Match = "<1s*(shockwave|macromedia|flash|swf)*&"
        "(*(src=$AV(2)|"
        "*<param name=$AV(movie) value=$AV(2) >)*)"
Replace = "<a href="2" class="flash" class="proxlink"> 2</a>"

Name = "Embed or BGsound to Link"
Active = TRUE
Bounds = "<(embed|bgsound)s*>"
Limit = 256
Match = "*src=("*'|w)1*&*.(mid|midi|wav|mp3)2"
Replace = "<a class="sound" class="proxlink" href=1>[2]</a>"

My links CSS is way too large now to be posted here... suffice it to say I've styles for the following link subclasses:
a (normal links), .mailto (email), .javascript, .ftp (FTP server links), .redirect (JS Redirect links), .image, .flash, .sound (Embed or BGSound).

If anyone is interested, I can give you my link CSS (part of my Prox.css).

A little clarification on the filters: Insert Links Stylesheet is the filter that includes your links.css to all pages. If you already have a stylesheet linked, you can skip this filter and add the link styling to that stylesheet instead. Style image links is a modified version of the one posted above, I don't like them opened in new windows. Convert Javascript redirects to links is Paul Rupe's, with an extra class= added. Convert Flash animations to links and Embed or BGsound to Link are "oldies" to my filterset, now much improved with this styling. Just goes to show what power CSS and Prox combined have

Oh btw, I know giving two classes to an element is a violation of the CSS specs... fortunately all browsers let this slip. I don't know of a way to do it within the spec... class="class1, class2" (or variations) doesn't seem to work.

[Edit: replaced the image styling filter with a cleaner, better version]

Edited by - Jor on 18 Jun 2002 15:47:43

altosax · « **Reply #14 on:** April 24, 2002, 08:09:54 PM »

-------------
jor wrote:

Oh btw, I know giving two classes to an element is a violation of the CSS specs... fortunately all browsers let this slip. I don't know of a way to do it within the spec... class="class1, class2" (or variations) doesn't seem to work.
-------------

i don't know if it works, but try with a class and an ID

regards,
altosax.

Old Proxomitron Forums

News:

Author Topic: Change link style (Read 11845 times)

Jor

Change link style

Arne

Change link style

Jor

Change link style

JD5000

Change link style

JD5000

Change link style

Jor

Change link style

JD5000

Change link style

sidki3003

Change link style

JD5000

Change link style

sidki3003

Change link style

Jor

Change link style

JD5000

Change link style

Jor

Change link style

Jor

Change link style

altosax

Change link style