Codes and Things! A CSS guide U/C

Glad I could be of service. ^^

♥▬▬▬ ABAEZE IS MY RAD BFF ▬▬▬ ♥

I couldn't find it here, but what is the header/bar of a module defined as?

Also, how would you change the images for contacts?



♥▬▬▬ AND IT'S THE BEST ▬▬▬ ♥

There's a whole section for the header. ^^ Basically it's...

Code: Select all

    #profile-header

and what you want to do with it after that. ^^
I'm not sure what you mean by changing the images for contacts though.... Do you mean the order of them or the actual images? If it's the second one the best I could suggest is making a custom block with the images you want for friends while linking to their profile like the friends list currently does... If it's the order then this is what GIO has said on them in the past. *Looked it up for you.*

Spoiler: show

Well, it is still possible but requires a lot of work and knowledge. Basically, there are two ways. Basically, as of now, we must either use relative positions or abusive use of floats.

I suggest: use of floats. Why? It's easier and more consistent.
Downsides: You can only arrange the friends on a row~

Explanation. basically, this is the easiest way to do it and although we still have some limits, we can work it out and get a quite close result of an "arranged" friends section. Since there are no IDs as of now (which I'm gonna suggest in quite a bit, Sorry T!) we have no choice but to use attribute selectors since these elements do have a unique attribute, the style one. If we look at our source, each friend has its container, called .fl-block. Practically, this is what this element looks like in the source:
<div style="background-image: url('http://static.soliaonline.com/a/efc74e2506d317364e44e95ae50d5c03.png');" class="fl-block">
><div class="nametag">
>><a href="http://soliaonline.com/profile/53253/">Blightmare</a>
></div>
</div>
So, if you see closely (open your profile's source if you want) the style attribute contains style information in which the friend's avatar's image is. Since this is inside of our element as an attribute we are gonna sue this to our favor. Practically, what we want is what I have in red. The filename without the file extension, because everything else is not unique and is repeated in all the other friend containers. In my case, the file name is efc74e2506d317364e44e95ae50d5c03.png but since I don't want the extension (to make the code shorter) I can just use efc74e2506d317364e44e95ae50d5c03. Either way works anyways. Then we are gonna use the element attribute selector and in our case we need the following one:
element[attribute*='value']
In other words, we first need to define the element, which is .flblock. Next, we open up the brackets "[" "]". Inside these, we first need to define the attribute, which is the style attribute since it contains the unique value. Next we use the asterisk. Why? This means that whatever value we state is anywhere at all inside the attribute stated. This makes our code shorter and straight to the point. Next we define our value, which like we said a little ago, in my case is efc74e2506d317364e44e95ae50d5c03. All around, selector shall look like this or among these lines:
.fl-block[style*='efc74e2506d317364e44e95ae50d5c03']
So now we have officially called a specific element. Nice right? We're not done yet. Now, we just assign a right or left value. if you want it on the right use float:right and if you want it on the left use float:left. let me tell you that this is kinda tricky and you might want to mess with all the friends in the specific row. If for example, I wanted my friend on the far right of that row, my code would look somewhat like the following:
.fl-block[style*='efc74e2506d317364e44e95ae50d5c03']{ float:right; }
Practically, to show you how powerful it can be, I can switch the last friend on a row as the first friend, like this:

Code: Select all

.fl-block[style*='efc74e2506d317364e44e95ae50d5c03']{ float:left; }
.fl-block[style*='c96a591d07f3a03413245423b5777612']{ float:right; }
.fl-block[style*='e94b42913c013d9957edd78a2ebdf72d']{ float:left; }
.fl-block[style*='e5740c89dcb7382a717ba7fa44fd03dc']{ float:right; }

You can try it in your profile (as I tested/coded it for you since I was lazy).

Why using floats is not that great: it has limitations and you can't really completely arrange friends, but it is an obvious advance which is pretty easy and pretty cross-browser safety, as any browser that cannot render the code will just display the friends in Solia's original arrangement.

----------------
You can also use position:relative
This is the one that is most likely used. We need to select the friend blocks like I explained earlier and then just place them around with position:relative.

Downside: A lot of work since if you move a friend, you'll also have to move all the other friends.

Upsides: It is way more flexible as you can arrange any friend inside the module.

I'm not really going to go way too into this explanation as this is basic stuff. If I wanted to position your first friend "17th" with your last friend "Griko" my could would look somewhat like this:

Code: Select all

.fl-block[style*="e94b42913c013d9957edd78a2ebdf72d"] {
left:-324px;
position:relative;
}
.fl-block[style*="c96a591d07f3a03413245423b5777612"] {
left:324px;
position:relative;
}

Now if I wanted to switch up "17th" with "Nemesis" my could would look somewhat like this:

Code: Select all

.fl-block[style*='4e2349397fd7f5fdcbae2eca8bb53103']{
position:relative;
left:-216px;
top:-133px;
}
.fl-block[style*='c96a591d07f3a03413245423b5777612']{
position:relative;
left:216px;
top:133px;
}

Practically, as I said, this is so much work, but if you want total customization, it's the way to go until Turgon makes a more advanced friends list. Anyhow, hope this helped! <3

-Gio

♥▬▬▬ ABAEZE IS MY RAD BFF ▬▬▬ ♥

Oh, thanks a bunch!
I'll have to take some time to run through that.


Though I did mean by header, the part that says like "Text module" and such.




♥▬▬▬ AND IT'S THE BEST ▬▬▬ ♥

Hm... I don't think any other guides did that particular thing... so I looked it up through the page source. That would be....

Code: Select all

.column_list .handle

At least that effects all of the module headers... I think if you want to effect an individual one you might want to replace the .column_list with a panel ID or a node.... but I don't know if that would work.

Hm... I don't think any other guides did that particular thing... so I looked it up through the page source. That would be....

Code: Select all

.column_list .handle

At least that effects all of the module headers... I think if you want to effect an individual one you might want to replace the .column_list with a panel ID or a node.... but I don't know if that would work.

♥▬▬▬ ABAEZE IS MY RAD BFF ▬▬▬ ♥

Thank you so so much!






♥▬▬▬ AND IT'S THE BEST ▬▬▬ ♥

You're more than welcome. ^^

Jiri approves! /two thumbs up
I was gonna do this myself, as well as a new Profile Spotlight thread, but I was afraid someone already called dibs on them both.. OTL

But if you'd like to ask for specific codes, it's better to ask Radio more than anyone.

I want to Reconcile the violence in your heart.

I want to Recognize your beauty's not just a mask.

Thanks for this. And wow a link to my auction?!

I want to Exorcise the demons from your past
I want to Satisfy the undisclosed desires in your heart.

Thank you:) I'll see if I can put some of this jargon to good use:)

This is a great guide, thank you so much! :D
I'm a bit confused though. How do I tell what the "id" or "class" is of specific module? :L Like let's say I have a specific module I want to move.. how do I do that?>< I kind of understood the repositioning coding you posted, but I'm still confused. >:

Depending on the browser you use, looking for an addon like Firebug will come in VERY handy with locating the appropriate classes and ids that you will need to modify your profile. Then you can just right click on the area of the page you want to know about, and a window will popup and display the code and any CSS currently applied to it.

ooh that's a huge help! Thank you so much! <3

❝ⓄⒽ ✩☆✩ ⒸⒶⓃⒶⒹⒶ❞

┏━━━━━━━━━━━━━━━┓
⇢this guide is a great help!

┗━━━━━━━━━━━━━━━┛

I have a question :)) how do you change your background as a picture you like? am i supposed to put the link before the code in the CSS box or just place the link of the picture inside the CSS box?

help me?