Issue: Styling the Autolinked word

Issue Tools
- View Changes

July 9, 2010 11:42 AM

dvsDave

Regular Member

Styling the Autolinked word

Would like the option apply CSS to the autolinked word

On my old site where I used NuWiki, I had it setup so that I used CSS to create a dashed underline on the autolinked word and kept the font color the same as the regular text. It was a subtle method of conveying that the term was a link. My members find the straight link highlighting to be to "in your face" that it's a link.

Where can I edit the styling on the autolinked words?

Issue Details

Issue Number 1781

Issue Type Feature

Project VaultWiki 3.x Series

Category Styling / CSS

Status Public Release

Priority 5 - Minor Bugs / Small Tweaks

Suggested Version 3.0.1

Implemented Version (none)

Milestone VaultWiki 3.0.5

Software DependencyAny

Votes for this feature 0

Votes against this feature 0

Attachments 0

Assigned Users (none)

Tags Style

July 9, 2010 12:01 PM

pegasus

VaultWiki Team

Styling on wiki links is done in the template vw-links.css

Reply

July 9, 2010 2:02 PM

dvsDave

Regular Member

Originally Posted by pegasus

Styling on wiki links is done in the template vw-links.css

Code:

/* ######## LINKS ######## */

/* link on a redirect page */
.redirectText { font-size: 18px; }

/* text in the popup over wiki links */
/* properties override inheritance from bb-code */
.autolink_content {
	color: {vb:stylevar body_color};
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}

/*** links using the [URL] BB-Code, based on link protocol ***/
.link-http { background: url({vb:stylevar imgdir_vault}/external.png) center {vb:stylevar right} no-repeat; }
.link-https { background: url({vb:stylevar imgdir_vault}/lock_icon.gif) center {vb:stylevar right} no-repeat; }
.link-mailto { background: url({vb:stylevar imgdir_vault}/mail_icon.gif) center {vb:stylevar right} no-repeat; }
.link-news { background: url({vb:stylevar imgdir_vault}/news_icon.png) center {vb:stylevar right} no-repeat; }
.link-ftp { background: url({vb:stylevar imgdir_vault}/file_icon.gif) center {vb:stylevar right} no-repeat; }
.link-irc { background: url({vb:stylevar imgdir_vault}/discussionitem_icon.gif) center {vb:stylevar right} no-repeat; }

/* links to new (uncreated) articles */
.autolink_content a.new, .postbody a.new { color: #cc0000; }

/* footnote jump links */
.reflist { font-size: 10px; }
.reflist td { border: none; }

.special_footnote a, .special_footnote a:hover,
.special_ref_up a, .special_ref_up a:hover {
	font-size: 9px;
	color: {vb:stylevar shade_color};
}

a.ref_select {
	color: {vb:stylevar foruminfo_background.backgroundColor};
	background: {vb:stylevar body_color};
}

/* forum (list) links */
.forumbit_post .foruminfo .forumdata .forumtitle a.vw-list-link,
.forumbit_nopost .forumbit_nopost .forumrow .forumtitle a.vw-list-link {
	font-weight: normal;
	font-size: {vb:stylevar mid_fontSize};
}

Which class?

I want to make the link like this:

Code:

(unhighlighted)
color: {vb:stylevar body_color};
text-decoration: none;
border-bottom:  1px dashed {vb:stylevar body_color};

(highlighted or clicked)
color:{vb:stylevar link_color};
text-decoration: none;
border-bottom:  1px dashed {vb:stylevar link_color};

July 9, 2010 6:40 PM
ctrlbrk

Junior Member
It is vw-link class

Code:

.vw-link { color: #26478c; text-decoration: none; border-bottom: 1px dashed; }

If I remember right, it was missing on mine. I had to add it.

Mike
Reply

July 12, 2010 11:10 AM

dvsDave

Regular Member

Does not seem to affect it. It still has the default styling.
This is what I added:

Code:

.vw-links {
       color: {vb:stylevar body_color} !important; 
       text-decoration: none !important; 
       border-bottom: 1px dashed {vb:stylevar body_color} !important; 
}

July 12, 2010 11:55 AM

pegasus

VaultWiki Team

Your class name is plural. The class applied to the link itself is singular. See the post above yours again.

Reply

August 8, 2010 4:50 PM

dvsDave

Regular Member

I updated the class name to singular, but still no dice.

Code:

/* ######## LINKS ######## */

/* autolinks in forum */

.vw-link a{
       color: {vb:stylevar body_color} !important; 
       text-decoration: none !important; 
       border-bottom: 1px dashed {vb:stylevar body_color} !important; 
}

August 9, 2010 1:29 AM

pegasus

VaultWiki Team

.vw-link a is incorrect. The A tag is not inside a vw-link container, it is the vw-link. Just use .vw-link, you don't need to make the selector so specific.

Reply

+ Reply

All times are GMT -4. The time now is 1:09 AM.

This site uses cookies to help personalize content, to tailor your experience, and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Learn more… Accept Remind me later

Welcome to VaultWiki.org, home of the wiki add-on for vBulletin and XenForo!

Issue: Styling the Autolinked word

Issue Tools