Welcome to Solia Online Solia OnlineGamesMy SoliaExploreDonateAuction HouseSolia ForumsInventory

PostPosted on Thu Sep 08, 2011 1:55 pm

  • Offline

Glad I could be of service. ^^

PostPosted on Thu Sep 08, 2011 7:40 pm

  • Offline


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?


PostPosted on Thu Sep 08, 2011 11:21 pm

  • Offline

There's a whole section for the header. ^^ Basically it's...
Code: Select all
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>
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:
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:
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"] {
.fl-block[style*="c96a591d07f3a03413245423b5777612"] {

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

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


PostPosted on Thu Sep 08, 2011 11:45 pm

  • Offline


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.


PostPosted on Fri Sep 09, 2011 2:06 am

  • Offline

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.

PostPosted on Fri Sep 09, 2011 2:38 am

  • Offline

Support wrote:
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.


Thank you so so much!


PostPosted on Fri Sep 09, 2011 8:08 am

  • Offline

You're more than welcome. ^^
I am NOT an official site person. If you have anything directed at mods or administrators take it to them. Thanks. ^^

PostPosted on Tue Sep 20, 2011 3:59 am

  • Offline

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. :lol:
B-1-AAAA-4 • i like it like it like it • JinyoungB1A4

exchange shop - art shop

PostPosted on Sun Oct 09, 2011 6:50 pm

  • Offline

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?! :emb:

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

So have you heard of Sorven Man?
No? Well here:

Comic Archive or on Smack Jeeves

PostPosted on Wed Oct 19, 2011 10:22 pm

  • Offline

Thank you:) I'll see if I can put some of this jargon to good use:)
Please click
+1 experience needed
Thank you!

PostPosted on Fri Oct 21, 2011 3:59 pm

  • Offline

ImageThis 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. >:

PostPosted on Fri Oct 21, 2011 9:58 pm

  • Offline

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. :wink: 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.

Clicks appreciated.
Image Image Image Image

Quest for 2016 :: Catch a Mynx Egg.

PostPosted on Fri Oct 21, 2011 10:33 pm

  • Offline

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

PostPosted on Tue Oct 25, 2011 1:22 pm

  • Offline

this guide is a great help!

“Damaged people are dangerous. They know they can survive.”
Josephine Hart
Moxfox will be
If I mess up your pronouns, please let me know.
Formerly known as Optimus_Prime Smaug

Help out on my Farm?
Q: Elven Weave, La Fee

PostPosted on Thu Oct 27, 2011 7:17 am

  • Offline

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?

:dead: help me?
"Destinies are troublesome things. You feel trapped. Like your whole life has been planned out for you and you've got no control over anything and sometimes you don't even know if what destiny has decided is really the best thing at all."


I love you, clotpole


Return to Rules, Guides and Information

Who is online