Skem9 .^. Forum .^. Skem9 Profile Codes .^.

34/f

Posted at 05/22/08, 5:44pm

Posted By:
to make a section scroll add height:###px; overflow:auto; inbetween the { } symbols of the area you

want to have scroll. Change the ## signs to desired height.

[girllove] Thank you so much sweetie. [yay]

User Picture..

1,833 Years in Rehab

40/f

Posted at 05/23/08, 7:04pm

I had a question asked to me about layouts looking the same in "IE and FF"...can't really remember what to change up in the coding? Thanks [smile]

User Picture..

592 Days till Recovery

16/m

Posted at 05/23/08, 7:09pm

You mean the * html thing?

#mainContents{background:black;}
* html #mainContents{background:white;}

That will give #mainContents a black background in Firefox, and a white background in Internet Explorer.
The * html section has to come AFTER the normal section so that in IE it'll override the default code, but Firefox won't read it anyways.

That's just an example, it can be applied with about anything.

32,474 ~ Offical Skem9 Ninja

40/f

Posted at 05/23/08, 7:28pm

Yes I am pretty sure Brandon, she asked "how do I make a layout look right in IE since I use FF to make the layouts?" So I pondered over it and completely forgot how to adjust the coding for that. Does that make sense? [lol] thanks Brandon [smile]

User Picture..

592 Days till Recovery

40/f

Posted at 05/23/08, 7:28pm

btw, cool siggy [cool]

User Picture..

592 Days till Recovery

40/f

Posted at 05/23/08, 7:30pm

someone had told me before about adding "transparent" as the backround to get that "blue" look out of FF, does that apply to IE also?

User Picture..

592 Days till Recovery

40/f

Posted at 05/23/08, 7:31pm

okay that siggy is just really wild, changes each time!!! how'd you do that???

User Picture..

592 Days till Recovery

16/m

Posted at 05/23/08, 7:47pm

Posted By: btw, cool siggy

Thanks :)

Posted By: someone had told me before about adding "transparent" as the backround to get that "blue" look out of FF, does that apply to IE also?

Background for what? If it's for the body just add a color and remove the url() part, anything else and transparent will suffice.

Posted By: okay that siggy is just really wild, changes each time!!! how'd you do that???

It's magic 0_o

32,474 ~ Offical Skem9 Ninja

40/f

Posted at 05/23/08, 7:55pm

oh the bg for a skem9 layout, sorry i should've mentioned that...but thanks for helping me out Brandon, appreciate it [happy] ...still lovin that siggy... [lol]

User Picture..

592 Days till Recovery

36/f

Posted at 06/04/08, 6:25am

i had a question on the buttons in skem9 profile layout how big the size the buttona have to be ? because last couple times i had 2 people make buttons for me this last time size was 200x100 Sargent /Michelle did for my buttons on my last laout i did i had to have KittyJo help me recheck the code for me the button size she must have resized it thanks for the info Huggs CathyKat

User Picture..

30 Bottles of Beer on the Wall

16/m

Posted at 06/04/08, 1:15pm

The buttons can be any size. Just change the height/width in the code according to the size of the image.

32,474 ~ Offical Skem9 Ninja

36/f

Posted at 06/04/08, 4:33pm

ty so much for the info Brandon :-)

User Picture..

30 Bottles of Beer on the Wall

42/f

Posted at 06/04/08, 11:21pm

does anyone have any codes they want to share? i will have to gather the little i know and post later on
be nice if we had all the codes we had before the server change :( there was alot of good codes and tips

User Picture.. Thanks Moppy

9,236 ~ Offical Skem9 Addict

16/m

Posted at 06/05/08, 12:30am edited

I had a list of selectors on the first page, but fileden deleted it. I'll re-do it tonight, hopefully.

Scrolling things

Pretty much anything on Skem9 profiles can scroll, since it's, for the most part, made up of DIVs.
To make something scroll is just 2 or 3 properties:

Code:#mainContents{overflow: auto; height: 300px; width: 620px;}

That makes the main section of your profile scroll once the content exceeds 300px in height, or 620px(default) in width.
#mainContents can be almost anything.

Scrolling profile

You've seen the profiles that are just a big box that scrolls, right?

Code:#contents{height:550px; width:780px; overflow:auto;}

For the height and width I recommend leaving it at 550px, 780px is just the default width. I say leave it at 550px because anything beyond that would make it difficult for people in smaller resolutions to navigate. The average amount of height inside the browser for a 1024x768 resolution is 550px, 1024x768 is currently the most common screen resolution, but there are some people still using 640px resolution, so it's something to consider.

Moving/positioning things

Typically when someone tries to move something they use things like margin-left, or margin-top, which is bad. Browsers like Internet Explorer double margins, and then you'll have to post here for someone to explain to you why it doesn't work.

margin is okay for spacing things, that's what it's supposed to be used for, but for actually positioning things you use position, top, and left.
position, top, and left work as a team, position is the team leader, top and left won't work without it, though position is only needed if you use either top or left, and neither of the two are necessary, though.

Anyways, to position something you use something like this:

Code:#contents{position:relative; top:600px; left:780px;}

That's just a dummy code, I don't really see a use for it, other than to joke around.
What it does is move the whole profile down a page-length, and left 780px, so the user would probably have to scroll in order to see the profile.

Centered Friends/Comments

It's noted, so I won't explain it, I've bored you enough, huh?

Code:

.7B{stretch the friends and Users Images link}

.UProSide, .MSContacts{width:780px !important;}



.7B{move the friends table to the center}

table#Friends{position:relative; left:30%}



.7B{hide the contact table images}

.MSContacts img, .sideHead, .MSContacts .images b{display:none !important}



.7B{stretch the comments}

.Comments{width:780px;}



.7B{commentsPeps always needs to be 60px less than Comments}

.commentsPeps{width:720px;}



.7B{and commentMess always needs to be 70px less than commentsPeps}

.commentMess{width:650px !important;}

Hiding things

This one is simple, display:none.

Code:#mainContents{display: none;}

That hides your main profile box. Replace #mainContents with the selector for whatever you want to hide.

If you want to keep the space where whatever you hid was then use visibility:hidden;

Code:#mainContents{visibility: hidden;}

The section will be hidden, but the space will remain.

Repetition

Doing something like the code below is a pain in the neck, aside from the fact that it will render slower.

Code:.class{display:none;}

.class2{display:none;}

.class3{display:none;}

.class4{display:none;}

.class5{display:none;}

.class6{display:none;}

Ever seen a profile that looked normal for a second, and then suddenly had a layout? That means they were using a lot of bad code - the browser tries to interpret what the CSS means, but it struggles from bad syntax, and occasionally gives up.

This is the right way to use the code above:

Code:.class, .class2, .class3, .class4, .class5, .class6{display:none}

This can be applied to any code, but display:none is where it's misused most.

I'll write more later.

32,474 ~ Offical Skem9 Ninja

16/m

Posted at 06/05/08, 12:33am edited

Nobody quote ⇑that⇑, that's the hugest post ever.

32,474 ~ Offical Skem9 Ninja

42/f

Posted at 06/05/08, 10:32pm

wow brandon thanks for the cool codes you just posted
i'm going to try a few of them later :)

User Picture.. Thanks Moppy

9,236 ~ Offical Skem9 Addict

16/m

Posted at 06/05/08, 11:27pm edited

Here's the list I was supposed to do last night, but forgot. -_-

It's tabbed and separated according to what part of the profile it's referring to.

32,474 ~ Offical Skem9 Ninja

jackie's skem profile test

42/f

Posted at 06/06/08, 8:08am

thats awsome brandon i bookmarked the link thanks so much

9 Cherry Poppers

jackie's skem profile test

42/f

Posted at 06/06/08, 8:08am

oops i forgot i'm on my tester lol

9 Cherry Poppers

32/f

Posted at 06/11/08, 3:13am

thanks for this brandon. i know that took alot of time to write up...so thanks once again.

[happy] [yay]

"Laugh as much as you breathe and love as long as you live."

193 Cracked Out Posts

34/f

Posted at 06/20/08, 10:54pm

Does anyone have any codes to move that contact buttons? Right now with my coding they are lined diagonally ... If I were to align them either side by side or in order 'top to bottom' what part of this code do I change..... ((Thanks for any and all help))

a.add2buds {background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday1.png) center top no-repeat;height:35px;width:125px;display:block;}
a.blockbud {background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday2.png) center top no-repeat;height:35px;width:125px;display:block;
position:relative;top:10px;left:30px;}
a.messagebud {background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday3.png) center top no-repeat;height:35px;width:125px;display:block;
position:relative;top:5px;left:65px;}

User Picture..

1,833 Years in Rehab

16/m

Posted at 06/20/08, 10:59pm

a.add2buds {
background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday1.png) center top no-repeat;
height:35px;
width:125px;
display:block;
position:relative;
top:100px;
left:100px;
}
a.blockbud {
background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday2.png) center top no-repeat;
height:35px;
width:125px;
display:block;
position:relative;
top:100px;
left:100px;
}
a.messagebud {
background:transparent url(http://i288.photobucket.com/albums/ll191/kjz-cre8inz/btn-bday3.png) center top no-repeat;
height:35px;
width:125px;
display:block;
position:relative;
top:100px;
left:100px;
}