|
Part 2 Of "Profile Modding For Dummies"
In the last blog, I showed you how to edit text. In this final part of the series, I will show you how to edit links and a couple other things.
MAKE SURE THAT YOU'VE READ THROUGH PARTS 1 & 2 BEFORE READING THIS!!!
If you don't read the first part, you'll have no idea what's going on in this blog.
__________________________________________________ _______________
With this lesson, I'm just going to start with a new code:
|
<style type="text/css"><!-- --></style>
|
Remember though, that all your codes have to be in just one of these.^^^ (you can't have any more than one, or they won't work)
__________________________________________________ _______________
This is going to look a lot like text editing, so if you understand that, you will have absolutely no problem with this.
Here's the code for most of the links on your page: (All posts by, All threads by, mp3 names, group names, contributions, etc...)
|
A {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: underline;}
|
and this looks EXACTLY the same as when you edit text. (except for the starting letter)
This code is for what most of the links on your profile page will look like when you don't click or hover your cursor over them.
__________________________________________________ _______________
Now here's the code for what most of your links will look like when you hover your cursor over them:
|
A:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
Notice how these codes both start with 'A' but the second one has ':hover' right after it.
__________________________________________________ _______________
So the code with just a letter at the beginning is for your links when you don't hover your cursor over them, and the code with the same letter at the beginning but with a ':hover' after, is for your links when you hover your cursor over them.
Here's how it should look so far:
|
<style type="text/css"><!-- A {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: underline;} A:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} --></style>
|
__________________________________________________ _______________
That's all there is to know about link editing. Here's some more codes for diffferent links on your profile page: (I will have two codes under each title because of the 'hover' feature. Make sure to use both codes.)
LINK FOR MENU BAR ON TOP OF PAGE
| .m {color: #COLOR;background: #COLOR} |
| .m:hover {color: #COLOR;background: #COLOR} |
LINK FOR YOUR 'LOCATION'
|
A.dd {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
A.dd:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
LINKS FOR 'MY PROFILE', 'MY MUSIC', AND 'MY BLOGS'
| .w,A.w {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
|
.w,A.w:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
LINKS FOR GEAR INFO PICS
| .g,A.g {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
|
.g,A.g:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
LINKS FOR MP3 BOX
| A.smp {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.smp:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS FOR MENU BAR ON BOTTOM OF PAGE
| .sm2 {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.sm2:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS FOR USERNAMES IN FRIENDS BOX
| .sm3 {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.sm3:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS FOR USERNAMES IN COMMENT BOX
| A.sp {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.sp:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINK FOR THE TOP RIGHT 'MY PROFILE' LINK
| .ma {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none; background: #ffffff} |
| A.ma:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS FOR MP3S, PICTURES, CONTRIBUTIONS, VIEW ALL FRIENDS
| .my {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.my:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS IN CONTACT BOX AND THE 'MORE PICTURES...' LINK
| .cnt {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.cnt:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINKS FOR GEAR PICS, VIEW ALL MP3S, VIEW ALL COMMENTS
| A.me {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
| A.me:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
LINK FOR THE 'READ NEXT' BUTTON
| A.nx {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;} |
A.nx:hover {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
__________________________________________________ _______________
Now these next codes aren't really links or text, but here they are:
PROFILE INDEX TEXT
|
DIV.in_s {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
THE LINES SEPERATING THE VERY TOP LINK AT THE TOP OF THE PAGE
|
TD.m {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
'PROFILE LAST UPDATED' TEXT
|
TD.sts {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
THE NUMBERS IN BRACKETS BESIDE 'GEAR PICS' AND 'REVIEWS'
|
.sm {font: bold 10px Verdana; color: #707070; text-transform: lowercase; letter-spacing: none; text-decoration: none;}
|
__________________________________________________ _______________
Now here's the last, and probably most awesome thing you can do to your profile: Changing what the cursor looks like.
It's not really that hard or confusing. It's similar to link editing because it has a code for when you aren't hovering over a link and a code for when you are hovering over a link.
Here's the two codes:
| body {cursor: crosshair;} |
| a:hover {cursor: crosshair;} |
Here's the link to all the other things you can change your cursor into besides 'crosshair':
Cursor Codes List
__________________________________________________ _______________
And with that, I'm done with my series of blogs on profile modification. If you have any questions about this, just PM me.
\m/[-_-]\m/ |