| Avin ~ παρυηzεΙ ~ Slay | ||||
|---|---|---|---|---|
|
My Blogs:
| |||
| ||||
Now for the most part, we use links like this: [[Page name here]]
Well what you're actually writing, without knowing it, is this: <a href="Page_Name_Here">Page name here</a>
See the above <a></a> isn't all that important until you get to styling all the links you want to style! So in css you have the four following attributes to anchor or <a> tag:
- a:link - a normal, unvisited link
- a:visited - a link the user has visited
- a:hover - a link when the user mouses over it
- a:active - a link the moment it is clicked
a:link[]
Want users to know which pages they have and haven't been to on your wiki? Well, using this css you can make sure that users finds new pages, and can tell which pages they've already been to.
That being said, a:link is for unvisited links on a page.
/* unvisited link */
a:link {
color: #FF0000;
}
a:visited[]
Do you think you've already clicked a page, but want a user to be sure whether or not they've clicked it? If that's the case, then the a:visited styling is for you!
This styling will tell users that they've already clicked on a link, and to do this, it shows up as a different color from a:link. The best part, is that the computer and browser know what pages you've been to and it will tell you whether you've been to the page or not with a:link and a:visited!
/* visited link */
a:visited {
color: #00FF00;
}
a:hover[]
Want a user to be sure that they're clicking an actual link and not just text? a:hover makes it so that when the cursor (the thing that moves on the screen when you move the mouse or move your finger on the slidy thingy on the laptop) moves over a link, the link changes colors, or it gets a background, or whatever else you style it to do!
/* mouse over link */
a:hover {
color: #FF00FF;
}
a:active[]
So, what happens when a user clicks on a link? Does it change colors, does it jump, move around, or change colors? Well with an a:active line in the css page of your wiki, you can make it so that links that have just been clicked on, change color!
/* selected link */
a:active {
color: #0000FF;
}
Order[]
There are two, possibly three rules that should always be followed when using these styles in the .css pages of your wiki. They are as follows:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
Wikia Links[]
So, now you may be wondering, how does <a> apply to users who can't edit the MediaWiki:Wikia.css page? Well this is where [[Page Links]] are for you!
Using Them[]
Most of you already know how to use a wikia link, so we'll skip how to write it, instead I'm going to show you how to change it.
Using wikia links or bracket links is pretty simple, what we'll do though is add a | or pipe after our desired page: [[Page link here|I want the link to say this]]. Now instead of the link saying "Page link here" it says "I want the link to say this". This helps us greatly, because now, we can use font, text, background stylings and more.
To do that, we would write something like this [[Page link here|<span style="color:#000000; font-weight:bold; text-decoration:none;">I like links, and I cannot lie!</span>]]
Try not to use <div>tags, because they mess up the line height of the text. I used <span> because it is an inline element that doesn't create a new line for the content in it. c:
Going back to CSS stylings[]
So, just so you guys all know, every styling that applies to text, font, backgrounds, borders and all, can be done with the a:link, a:visited, a:hover, and a:active in the .css page!
Happy coding guys!