[CSS Help] Fun With Coding :D

Trickster's picture




This be the ze home of Zebbie's guide to the fun side of CSS coding-the place of prettypretty tabs, nifty page effects, cursors, tabs, the best websites for background textures and patterns, and basically anything that will make your page stand out from the usual background and colour changes ?

The beauty of CSS can allow you to do many fabulous and useful things, from making your page look spiffy or making it more accessible and user-friendly, to getting you any Neopet you wish on Neopets ♥ Whilst it can be difficult at first, CSS is both a powerful and useful tool when it comes to web design, and is very easy to get the hang of with practice.

This page, whilst covering some of the basics, is mainly associated with the parts of CSS that are more ‘fun’ and make pages that much more interesting. Sooo, if you’re interested, read on or, indeed, track this page, as I will update it as regularly as possible with new goodies and such that I stumble upon. Suggestions for what I should include, requests for codes, thoughts and ideas are all, of course, most welcome~! ? Or, you can just hang about and enjoy happy little cumulonimbi-coz that’s a completely valid reason, too, tee hee~! :3

...And no, I’m not joking about the Neopets thing, as I’m sure that is probably the most interesting part of all I just said *giggles* Regardless, onwards, to CSSness~! ♥


---


Q: How do I figure out what code will affect which part of the page on this site/how to I learn how to use CSS?
A: I direct you to Unplugged’s delightful eyeburnyness-this is a fabulous page that will show you which part of the TEF Community site is which ♥ The best way to figure out what codes for what is to play about with it yourself-this is how I, and the majority of others, learnt how to use CSS in the first place. Take someone else’s code (ie. Unplugged’s or Ravynn’s lovely examples) and mess around with them and see what you can do.

Some other wonderful places to figure out how to use CSS include Iaurdagnire’s about:blank and CSS facts and tips pages, as well as the Tale of Tales page formatting post. CSS isn’t as scary as it looks-you’ll have the hang of it in no time, tee hee~! :3



Q: My CSS doesn’t work! D: What do I do?
A: A few hints for when this happens that I always find useful *ahem*:

- It’s likely you’ve misplaced a bracket, space, etc, somewhere in your coding. A rogue letter is something I’ve accidentally put in time and time again. Scan through all of your coding first, to make sure this hasn’t happened.

- Next, ensure, in regards to coding for this TEF Community site, that you have all your style sheet coding on ONE SINGLE LINE. Do not let your coding have paragraphs or new lines in it, or it will not work for this site.

If you still have difficulty, let somebody else look at it, or feel free to post it here for me or another to check out-a second set of eyes can pick up some of the most simple things you might have missed. Another tip I have is to sleep on it-likely, when you wake up the next day, you’ll spot the mistake simply because you haven’t seen it for a while :3



Q: How do I make one of those nifty tab thingies you have on your updates page?
A: Easily ♥ Simply insert the following code in between your < style > < /style > tags:

#centeredmenu {float:left;width:100%;background:#fff;border-bottom:4px solid #000;overflow:hidden;position:relative;}#centeredmenu ul {clear:left;float:left;list-style:none;margin:0;padding:0;position:relative;left:50%;text-align:center;}#centeredmenu ul li {display:block;float:left;list-style:none;margin:0;padding:0;position:relative;right:50%;}#centeredmenu ul li a {display:block;margin:0 0 0 1px;padding:3px 10px;background:#ddd;color:#000;text-decoration:none;line-height:1.3em;}#centeredmenu ul li a:hover {background:#369;color:#fff;}#centeredmenu ul li a.active,#centeredmenu ul li a.active:hover {color:#fff;background:#000;font-weight:bold;}

And then, wherever on the page you would like the tabs to appear, insert this (removing the spaces between the words and the < > signs):

< div id="centeredmenu" >
< ul >
< li >< a href="#" >Tab one< /a >< /li >
< li >< a href="#" class="active" >Tab two< /a >< /li >
< li >< a href="#" >Tab three< /a >< /li >
< li >< a href="#" >Tab four< /a >< /li >
< /ul >
< /div >

Modify the links to your liking, change the colours, it’s all relatively easy to manipulate. Also, if you change the size tags, you can adjust the length of the underline, so that it can sit flush up against any divs you might have, which I find is a nice effect.



Q: How do I change the underline hover effects of my links, like on your biography page for Jester?
A: There are a number of different hover effects you can get. Some of my favourites include dotted, dashed, double underlined, and different-coloured hover underlines. To get one of these, paste the following code in between your < style > and < /style > tags, being sure to remove all the spaces except for between a:hover and the { bracket:

a:hover { border-bottom:1px dotted; }

To change the size of the dots/whathaveyou, play about with the px value. To get a different effect, change the word ‘dotted’ to dashed, double, or for a colour, a colour value in the form of ‘solid red’(ie. the word ‘red’ for a red underline, or a hex value, such as #000000 for black, etc). You can change the word solid to one of the other effects, like dotted or dashed, to have two effects at the same time.



Q: Where do you get all your amazing background images?
A: I get pretty much all my background images from a site called Naked and Angry, which can be found here. Whilst they have many designs in their catalogue, I find that the best images for backgrounds are in the user-submitted design section, found here-search random works, simply press submit, but at any rate, always tick all three boxes in the ‘filter patterns’ section on the left when looking for designs-that way, you can experience the gorgeousness of all the designs the site has to offer.

If you’re more into the vintage look that so many people adore, I strongly recommend this site-scroll down, and you’ll have maaany different colours and styles there for the picking ♥



Q: How do I change the opacity of the TEF Community header logo/the user display pictures?
A: Using the following codes, which you place in between the < style > < /style > tags of your stylesheet. For the TEF Community header logo:

#logo{filter:alpha(opacity=40);-moz-opacity:0.40;opacity:0.40}

For the user display pictures:

.picture{filter:alpha(opacity=70);-moz-opacity:0.70;opacity:0.70}

To alter the opacity of either, ensure that all values are equivalent (ie. 70, 0.70 and 0.70) or the code will not work. The opacity value is a number between 0 and 100, with 0 being invisible, and 100 being full strength. Keep the ‘moz-opacity’ value in this code, as it allows the opacity value to also be viewed in Firefox as well as other browsers (because Firefox is icky and likes to be difficult D:)



Q: How do I change my cursor image?
A: This tutorial explains this better than I ever could :3



Q: How do I get rid of that irritating line that shows up at the top of my tables in Firefox?
A: This is something manymany people had difficulty with, until finally it was figured out that adding the following code into your stylesheet would prevent this pesky line from icky-ing up your pretty tables. And so, add the following code into your coding anywhere between the < style > < /style > tags, removing all the spaces except between table and the first { bracket:

table { border-collapse: separate; }


---


More to come soon~! ♥
Trickster's picture

Testness 1~

Testness 1~
Trickster's picture

Testness 2 oh ewwies these

Testness 2 oh ewwies these comments need a new background *goes to change this lalala*

Hey zebbie how do you get

Hey zebbie how do you get just the baground to change?
Unplugged's picture

1 2 3 4 You need to tell me

1 2 3 4
You need to tell me where you get those awesome backgrounds from!
Trickster's picture

@ faunet: Hai Faunie~! :3

@ faunet: Hai Faunie~! :3

Okies sooo, to get the background to change, basically you need to have a stylesheet first up. I would be happy to make you one if you wish, and it will be easy to explain to you how I did it once I know exactly what you're after.

Basically, it really depends on what you mean by 'background'-do you mean a background that would just cover where my happy clouds are on this entry, or one that would span the entire page, or...? Alsoalsoalso, would you like a background image, or a background colour?

My apologies if I don't reply to your next comment until tomorrow sometime, by the way-I have university tomorrow, and it's late so I should be getting to bed, sadly~! I'll get to your question ASAP though :3




Trickster's picture

@ Unplugged: 1, 2, 3, 4,

@ Unplugged: 1, 2, 3, 4, Zebbie needs to rhyme some moar ♥

Zooomgosh, and tell you I shall~! Laughing out loud I get all my backgrounds from this awesomely-named, amazing little site-it has the most gorgeous patterns and user-submitted designs evaaah like, seriously! ♥ I'm sure you'll figure it out, but if you want the best designs, I find if you click on 'designs', then go to the search tool, tick all the boxes and click 'list em', you'll get like a billion nifty results that will prevent you from doing anything else for hours except look at them ♥

I also advise searching for 'squirrel' *giggles* :3
z.m123's picture

Thank's for making this

Thank's for making this topic:)

And by the way would you send me the thingy you have to put in if you want to write in black?
I'm really bad at CSS coding...

Track/
Hraeth's picture

Track attack~

Track attack~
Trickster's picture

@ z.m123: Tee hee, my

@ z.m123: Tee hee, my absolute pleasure~! :3 Thank you for the lovely feedback and track~! ♥

Sure sure I can do that-do you mean like, how to change your font colour to black...? Shocked If so, do the following *ahem*:

[ color=black ] type here [ /color ]

Except without the spaces between the [ ] things and the words (eg. [/]). It'll make you type like this. I hope this is what you meant, if it isn't, just let me know~! Laughing out loud
Trickster's picture

@ Hraeth: Eeep, I fight back

@ Hraeth: Eeep, I fight back with mah army of clouds~! *battle cry*


...Oh wait, tracking is a good thing :3 Tee hee, thankies muchly for the attackness, Hraeth~! ♥
z.m123's picture

It's what I meant, and sorry

It's what I meant, and sorry if I ask for much but can you change the text color AND the text type at the same time?
Just asking ^.^
Trickster's picture

Tee hee, I'm glad I got it

Tee hee, I'm glad I got it right then, yeeey~! :3 Aaand you're not asking much at all, no apologies needed-you can indeed change your text colour and text type at the same time, as I'm assuming text type is just the font you're typing in~? Shocked If so, I believe you use [ font=nameoffontgoeshere ]text here[ /font ]. This means I could type in arial by putting arial where the name of the font goes, so my text would appear like this.

If you were talking about text size, use [ size=fontsizeinnumbers ]text here[ /size ]. For underline/bold/italics, use [ u ]text here[ /u ] or [ b ]text here[ /b ] or [ i ]text here[ /i ] respectively to get this, this or this Laughing out loud

To type with more than one of these things all at the same time, just surround whatever you're writing with more than one of these commands. For example, if I wanted black, bold, arial font writing, I would surround the text like this:

[ font=arial ][ color=black ][ b ]text goes here[ /font ][ /color ][ /b ]

This would make the font appear like this

It doesn't matter what order you put the commands as long as you both open and close them as I've shown you above :3

I hope this helps~! :3 And, in case you're curious about some other types of things you can do with just basic commands like these, check out this fabulous blog
z.m123's picture

Thanks for the help Look at

Thanks for the help Sticking out tongue
Look at my bio (In my siggy) to see what I used the codes to Smiling

he home of prettypretty tabs,

he home of prettypretty tabs, nifty page effects, cursors, tabs, the best websites for background textures and patterns, and basically anything that will make your page stand out from the usual background and colour changes
Hell yeah. 8D Ilu.<333 ;O;

I know I'm always having trouble with figuring out how to do background images/textures, the banner at the top anddd how to change the colour of texts/the left hand side..Options? IDK WHAT YOU CALL THEM LOL.

You're so kind by making this threeead. ;O; <333

Thanks Zebbie but I think Ill

Thanks Zebbie but I think Ill stick with regular pages.Css is just....well my enemy so yeah.
But thanks for the offer and the help.
Trickster's picture

@ z.m123: Tee hee, you're

@ z.m123: Tee hee, you're welcome~! :3 I will totally check that out when I get home today and see what you did with iiit-I'd look now but I'm in a computer lab lesson at uni, so I'm a little stuck for time Sticking out tongue Look forward to seeing it, eee thankies~! Laughing out loud

@ Pinkpaws40: *Giggles* Oh, wai awesome, ilu too-glad it will be useful, tee hee~! ^3^

...Gawds I love that emote ♥

Buuut, yes :3 Tee hee, options seems like the best word to use-I know what you mean, at any rate~! I can give you any help with that that you need-actually, you hath inspired me, I might make a template that people can use to change each thing, if that makes sense Laughing out loud Either way, can totally explain anything you need to know with those kinds of things, they're probably the easiest for me to code and teach-or, I can just make you a layout if you wish~? Aaand naaaw, wai thankyew, I'm so glad you think I'm nice for making this threeeead ♥ It's so fun that this is useful to people plus yanno, I get to look at happeh clouds, so it's all good :3

Thankies for ze lovely comment Pinkyyy~! ♥

@ faunet: Eee that's totally fine, I completely understand! Sticking out tongue It is a bit tricky to get used to, I agree~!

My pleasure though, if you need help anytime just ask :3 If you change your mind I can make you a layout if you wish, too. Best of luck either way~! ♥
Trickster's picture

Bumpitying this, so that I

Bumpitying this, so that I can get an idea of what you guize want help with/want to see in my first update of this post :3
Trickster's picture

Hayhay guuuize, quick

Hayhay guuuize, quick question-are the collapsing headings working okies for everyone~? Shocked When you click 'heading goes here', you should be bumped up to the top of the page-scroll down and have a look under the heading you just clicked, do you see text that says 'text goes here'? This was a very difficult piece of code to write without incorporating javascript, so any feedback you have on whether or not this works for you would be awesome~! :3 If this feature doesn't work for everyone, I'll just go back to using plain text ♥
Unplugged's picture

Doesn't work for me. I have

Doesn't work for me. I have to hold my mouse on the "Header goes here" and the "Text goes here" overlaps the Headertext. :/
(I use Firefox)
z.m123's picture

I think it works good, and

I think it works good, and its funny to click! XD
Trickster's picture

Aaaw bum, looks like plain

Aaaw bum, looks like plain text it is until I can figure out how to make it more compatible, then~! Sticking out tongue Thankies muchly for ze feedback Unplugged, that helps me a lot, eee! ♥

Also, mind if I link your lovely tutorials on this page when I get it up and running? :3 Also out of curiosity, which browser did you use whilst viewing the collapsing headings-was it firefox or...? Coz I haven't tested it for firefox yet :3
z.m123's picture

I have explorer

I have explorer
Unplugged's picture

Answered, and you don't have

Answered, and you don't have to ask for linking. Sticking out tongue
z.m123's picture

Yeah same

Yeah same Eye
Trickster's picture

@ z.m123: Eee, thankies very

@ z.m123: Eee, thankies very muchly for ze feedback~! Laughing out loud *Giggles* They are so fun to click right, I was like WEEE *clickclickclick* when I first got them to work. At least I know it is working perfectly in IE then, your input is very much appreciated, and now I can go perve on your Kiowa's bio so fear my tracklazor, muhahaha ♥

@ Unplugged: *Giggles* You totally ninja'd me on that one, thankies muchly for the feedback yet again~! Laughing out loud It must be firefox then-it works in IE, Opera, Google Chrome, Flock, etc etc, but I couldn't get it to work for me in firefox, so good to know it wasn't just my firefox it was hating. That was exactly the same issue I had, so yup, must be the browser. More coding, here I come *giggles* Thankies again, and tee hee, I thought I'd check even so, but naaw good to know, thankiiiies~! ♥
Trickster's picture

Bumpness :3

Bumpness :3
z.m123's picture

Zebbie can I ask you for

Zebbie can I ask you for something?

Tarabetha just mayde this AWSOME drawing of my deer,
How do I make it show up?
Trickster's picture

Pffft no you can't ask me

Pffft no you can't ask me something. Course you can ♥ Let us see...

1) Terabetha is awesomesauce ♥
2) Use the following code:
< img src=IMAGELINKGOESHERE >

Just take out the spaces between the words and the < and > signs :3 Hope that helps~!
Unplugged's picture

Aahhh, thanks so much for the

Aahhh, thanks so much for the vintage background page! ♥

Just one thing: In that opacity code you can remove the ".mplayer" part, it doesn't do anything. Laughing out loud

Also, I never knew that "border-collapse:seperate" would remove the white line. I usually just do it by using "border="hidden"" in the HTML. xD So thanks for this, too~
Trickster's picture

Ooooh, mah pleasure~! :3 Glad

Ooooh, mah pleasure~! :3 Glad you like the vintageness, they are quite pretty, it's just a shame I'm a sucker for cute little clouds and such or I'd totally use them~! *giggles*

And oooh, truly? Shocked Thankies so much for this! Whilst I knew the opacity codes, I wasn't entirely sure which part governed the actual display picture it made opaque-the header logo transparency was easy to figure out on my own, but for the mplayer bit I thought it changed the comment logos, and I originally got that code from your layout as you may have guessed from the fact that I didn't edit that bit out, so thankies for correcting me on this~! :3 And thankies for the original code! I was actually going to ask if you wanted credit for that, so yah, do you want it? Laughing out loud

Aaand oooh, I'm glad that you know that now, tee hee~! I didn't know til the other day, when I found that 'border=hidden' didn't work for Opera and then stopped working for Firefox when I got it working for Opera, so I went experimenting to try to find a new solution, and that's what I found-it worked well, so wee~! :3 Mah pleasure, thankies so much for the feedback and all your help, I truly appreciate it-you're teaching me so much, it's so nifty! ♥
Trickster's picture

Bumpness :3

Bumpness :3
z.m123's picture

Sorry that I didnt't

Sorry that I didnt't respond...
Thanks alot for the coding tips (again) Zebbie Smiling
Take a look at my bio now and please tell me what you think about it, I need critics you now Cool

And MORE questions: how do you make that mp3/music thingy show up?
Trickster's picture

Whooamygosh, how did I miss

Whooamygosh, how did I miss this post~? D: I'm so sorry for the late reply, I didn't see that you'd made this comment til just now! Sticking out tongue

Soooo, no problemos of course! ♥ And tee hee, it's mah absolute pleasure, honestly-just glad it has all helped! :3 I will go have a looksee right away, I'm sure it looks epic, eee!

Aaand, you mean a mixpod player~? Shocked Basically, go to mixpod.com, register and make your playlist, then follow the easy step-by-step instructions they give you. Once at the end, it will give you a code to post to make your player show up-copy and paste this onto the page you want it to be on, and be sure that the input format is in bbcode so that it will show up ♥ That should help! Laughing out loud Any other questions, you know just to ask!
z.m123's picture

I got three words: SEE MY

I got three words:
SEE MY BIOOOOOO
pleeaaase?!? and tell me what you think about the mixpod and the pic's ^.^
Trickster's picture

Tee hee I love eeet, and

Tee hee Laughing out loud I love eeet, and I've told you what I thought about the others, so well done~! ♥ Nicely put together!

Late reply ish laaate~~~
z.m123's picture

Thanx Zeb' You're awesome...

Thanx Zeb'
You're awesome... Tee hee ~<3
Trickster's picture

Naaw, mah pleasure, Z~!

Naaw, mah pleasure, Z~! ♥ Glad I could help! Aaaw, and you're far too wonderful! Laughing out loud Thankyew so muchly, eee~! Truly thankiiiiees, I'm so glad you think that, tee hee~! ♥ :3
z.m123's picture

I don't need so many

I don't need so many thankieees...!
kaitlyn's picture

Tracking. ;o

Tracking. ;o

*book marks page and tests it

*book marks page and tests it out*

So very helpful
Katara00176's picture

So lovely

So lovely instructive....!
*that sound like a teacher... x.x*
well, i only have two question... how you can change the size of the letter? and, how you add a scroll box to add text?
i know you can do like this and it's very fun!
thank you! ?

Just follow me!
z.m123's picture

To change the size of a

To change the size of a letter write [=NUMBERGOESHERE]TEXTGOESHERE[/]

This is 15
Flyra's picture

EDIT: AH NVM. I found out

EDIT: AH NVM. I found out what was wrong xD For some reason, I had the code for the tab twice in my mess of coding. Deleting one of them made me getting rid of every problem that occured, eehe~! *blush*

Hey there Zebbie! :3
I got a question to ask you about your tab thingy CSS. o^o
How do I make this ugly white background disappear, maybe even make it transparent as on your Updates?
clicky for screenshot
I have already tried removing or changing the highlighted part in this part of the coding:
#centeredmenu {float:left;width:100%;background:#fff; [...]
..which looks like it is the accurate one for the white background. But it would always remain white like in the screenshot...

And how do I make the box following glued directly to the tab bar, as also seen in your Updates?
Sorry about my noobish questions. I'm totally a beginner with CSS. ;D
Still, I'd be very grateful for some answers~<3


Oh and yes. You're so amazing for having made this thread. All those codes. I've just started trying to get the hang of them, but with this post, it's being made so much easier! Thank you dearly, hun~ <3
f l y r a b l o g avatar by tinkee, sig by Quamar
Freyja's picture

Your lovely tabs don't work

Your lovely tabs don't work for me :c
They come up as wierd bullet points

/track

/track Smiling
Solaya's picture

~ Track Thank you very very

~ Track
Thank you very very very much for all this tips for the CSS ! <3
I've a question... Have you a code for do tabs as you do, but who change just the message of the post and not the link of the page, please ? I search it for a long time, it can be very awesome *o*

Thank you ~<3

Avatar by Awentia, signature by Wildflowerdeer
yqwndw's picture

Track. o: Stupid question

Track. o:

Stupid question timey~ when you find the background you like how do you put it into the code for it to show up?
Hey contact me if you need me,

Looking back I was a bit immature on here. Sorry, maybe I'll try to be active again.
Halafax's picture

I also have the same question

I also have the same question as yqwndw. If you find an image that you would like to use for your background, like your adorable clouds, how would you go about coding that? Because my CSS script calls for html color codes and the background would be an image not a color code... ._. *confuzzled*

Thank you for all of your very wonderfully helpful tutorials and such so far!

...this is also a ninja track :0
Skitties's picture

Tracking this, definitely.

Tracking this, definitely. Maybe I can finally learn CSS now!~ :3

Signature by Roo ♥
Skitties's picture

Maybe you can answer my

Maybe you can answer my question... I've been adding css to Naminé and Kiki's bios. On Nami's it worked fine, and then I went to do Kiki's and I have no idea what happened. The code for both is identical except for the colors... or at least it should be. Somehow I managed to turn the font color in the comments on Kiki's bio black... and I want the background for the comments to be black. I'd just make the background for the comments white, except then nobody would be able to read her yellow (or lime green) font. Dx Do you know how I could change the font color for the whole page? The blog entry itself and the comments. The only reason the text in the entry itself is white is because I went through and changed the color of each paragraph... I'm seriously confused. So... here's Kiki's bio and... yeah. I have no idea what I'm doing.

Edit - And then I decided to change some colors in Nami's bio and the same thing happened... Dx


...never mind, I figured it out...

Signature by Roo ♥