freaxy's guide to CUSTOM SECTIONS [small CSS3 update]

Was this helpful?

Yes!	40.2%	[ 406 ]
o.O what?!	25.7%	[ 260 ]
ooh, poll!	34.1%	[ 345 ]
Total Votes:			[ 1011 ]

[freaxy]

Alright, so just recently I've realized I've been getting a decent sized number of messages regarding custom sections; either they aren't working the way they want, or whatever someone told them wasn't 100% correct.
So...I've decided that I'd start off by quoting something I replied to one of my recent PMs regarding how to work custom sections. I'm not familiar with V2, so this is strictly oldschool.

DO NOT PM ME ON CUSTOM SECTION HELP
if you need help, post it here and it'll get answered
help won't be given to those with disabled/private profiles

IMPORTANT!!!

key points for the main about coding: no 'position:absolute;', must use margins(margin-left, margin-top) and not regular positioning(left, top).

key points for the custom section: about section should have '[*list=1]custom section content[/list*]', coding must have 'position:absolute;', and use regular positioning(left, top), then if there's more than 1 custom section any before the last one must not have scroll settings.

example:

about-

"about me" section
[list=1]this is my custom section[/list]

theme-

#about {
margin-left:??px; margin-top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

#about ol {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

Alright now, for the vast majority of you, this is enough to either satisfy you, confuse the crap out of you, or get you going in the right direction. I hope that helps answer many questions.




ALSO!!! and I can't stress this enough...I do NOT want this thread turning into a general help thread, so do not come in asking how to put freakin media/music/playlist/pictures/etc on your profile, or anything you can find in the general FAQs. This strictly has to do with coding oldschool custom sections.


Thank you, and practice clean coding.

freaxy

[freaxy]

disclaimer: not for the weak of mind. This guide has become even easier with new CSS3 coding!

...also, I'm not the greatest teacher in the world, but I'll tell you straight out how to get the job done the best I know (which seems to be pretty successful).


Alright, for starters, I'll be going over all the possible components for custom sections.
If you didn't already know, the most commonly used is the ordered list(ol - list=1).
We can also use the unordered list(ul - list)


now for some guides:



about-

main about me section
[list=1]custom section (1)[/list]
[list=1]custom section (2)[/list]
[list=1]custom section (3)[/list]

theme-

#about {
margin-left:??px;
margin-top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

#about ol:nth-of-type(1) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
}

#about ol:nth-of-type(2) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
}

#about ol:nth-of-type(3) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
}

Due to CSS3, this section is now as simple as adding overflow attributes to your multiple sections code.

#about {
margin-left:??px;
margin-top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

#about ol:nth-of-type(1) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

#about ol:nth-of-type(2) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

#about ol:nth-of-type(3) {
position:absolute;
left:??px; top:??px;
height:??px; width:??px;
overflow:hidden;
overflow-y:auto;
}

__________________________


Well, that is all for now. I will be getting to more as time goes by, so stay tuned, figuratively speaking.

[freaxy]

[url=http://tinyurl.com/4j6xgc][IMG]http://tinyurl.com/cu6qox[/IMG][/url]

Useful links and Affiliates:
Section for affiliates and guides worthy of the PD

[Eddefred]

Aren't there already many guides that cover this topic?

[xXraveXx]

Yet another one doesn't hurt now does it? >>;

Anyway, this is exactly what I was looking for, needed some clarification on some stuff. Its cleared up now. Thank you! =]

[Shrine]

Ooh, very nice! Thank you fr34x0r, this thread looks promising. Drop-down menus, eh? Sounds good; I can't wait to see more. heart

[freaxy]

you're very welcome!

it may take some time, as the advanced coding isn't easy(at all), to get more up...I may do one type at a time when I find the chance to.

@ eddefred: I'm sure there's individual threads where people have asked how to make them, and maybe a thread or two that's probably lost on how to make them, but if I remember any of them they're really brief and not very specific. oh well though, not like this'll harm anything...if anything, it'll teach people some more coding to come up with more profile ideas. -caughradiocaugh-

[Mournos]

Eddefred

Aren't there already many guides that cover this topic?

» The ones I know dont explain half what was said here.

You could also make a thread just for advanced codes ! *ish hungry to learn about them*

g a a r a i t s u k e

[Deadly Sakuya]

Since your so good at this help me!!! >__< I've put the code in my theme and about thing but nothing is appearing in my profile...

~Deadly Sakuya

[Mournos]

Deadly Sakuya

Since your so good at this help me!!! >__< I've put the code in my theme and about thing but nothing is appearing in my profile...

~Deadly Sakuya

»
I took a look at you code. You cant use

#about {position: absolute;}

Perhaps thats the problem.

g a a r a i t s u k e

[Deadly Sakuya]

Then what should i use? D:

[freaxy]

Deadly Sakuya

Since your so good at this help me!!! >__< I've put the code in my theme and about thing but nothing is appearing in my profile...

~Deadly Sakuya

remove position absolute from your about section then change the positioning to margins like specified. you will probably have to reposition a little.

also, make sure in your about section to include the list coding

Quote:

Then what should i use? D:

no position: code

[Mournos]

» It says in the first post!

Just delete position:absolute and position your section using margin-left & margin-top.

g a a r a i t s u k e

[Deadly Sakuya]

Ekus Krash

» It says in the first post!

Just delete position:absolute and position your section using margin-left & margin-top.

g a a r a i t s u k e

Sorry.....

Thanks, Its worked. biggrin *hugz*