@Kathleen:
If you want to change the styling of the friend's list section on your profile, it's possible to obtain all the information on CSS tag hierarchy by right-clicking on the page and inspecting the html. However to an untrained eye it can look like a bunch of mess. Difficult to make meaning from what you can see.
The first question usually is: "How to target the intended parts of the page to make changes?"
An answer to this takes the form of CSS styling classes below where you can copy/paste bits into your <style></style> when needed. Text between a slash and asterisk /*like this*/ is merely a comment and has no function on the code.
div.profile {
/*your ENTIRE profile between the top and bottom navigation bars*/
/*a very powerful styling class*/
/*mentioned only because the classes below MIGHT need to have...*/
/*... the word div.profile added to the very front to make it work*/
}
div.friends {
/*the entire friends section*/
}
div.friends div.heading {
/*the heading for just the friends section*/
}
div.friends div.inner {
/*the entire content for the friends section*/
}
div.friends div.inner p b {
/*the friend counter text*/
}
div.friends div.inner p b span.count {
/*the friend number*/
}
div.friends div.inner div.friends-grid {
/*the area where the profiles will be displayed*/
}
div.friends div.inner div.friends-grid div.person {
/*an individually listed friend profile*/
}
div.friends div.inner div.friends-grid div.person a:nth-child(1) {
/*clickable link area for friend profile text*/
}
div.friends div.inner div.friends-grid div.person a:nth-child(1) p {
/*text for name of friend*/
}
div.friends div.inner div.friends-grid div.person a:nth-child(2) {
/*clickable link area for friend profile image*/
}
div.friends div.inner div.friends-grid div.person a:nth-child(2) img {
/*the actual image of the friend*/
}
Note well: It is in your interest to NEVER use !important to force a style to work. !important should only be used as an absolute last option for which you will likely never need to use. If you ever use a style and it doesn't work problems can include:
* there is another class styling which is 'more specific' (and as such is given higher priority),
* you may be trying an experimental style that doesn't work well with your browser,
* you may be using a style in a wrong way,
* you may be using a style in a way that works elsewhere in testing but the tag you're using it with isn't appropriate,
* you may be using a style in a way that works elsewhere in testing and you're using it on a tag that should work but a property is being inherited from some tag higher up (stylings such as 'overflow:hidden' or 'display:block'),
* you might have filled the styling editing textbox with too many characters and all your changes have been reverted -- thereby undoing all your work when you clicked 'save' (such a number of characters is very large but it still is a finite)
* ...
Here's a fun piece of code using class targeting with some advanced css:
/* BEGIN replace friend counter with text */
div.profile div.friends div.inner p b span.count {
visibility: hidden;
}
div.profile div.friends div.inner p b span.count:before {
visibility: visible;
content: ' very';
}
div.profile div.friends div.inner p b span.count:after {
visibility: visible;
content: 'awesome ';
}
/* END replace friend counter with text */
also...
/* BEGIN change the background color of the different friend profiles*/
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+1) {
background: red;
}
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+2) {
background: orange;
}
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+3) {
background: yellow;
}
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+4) {
background: green;
}
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+5) {
background: blue;
}
div.profile div.friends div.inner div.friends-grid div.person:nth-child(6n+0) {
background: purple;
}
/* END change the background color of the different friend profiles*/
These examples are untested, yet there is faith they will work as intended.
Forum:
Report Topic
Permalink
