[CSS Help] Fun With Coding :D

May 10, 2010 - 3:02pm — Trickster

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~! ♥

Miscellaneous

zebbie's blog
Login to post comments

May 10, 2010 - 3:08pm — Trickster

Testness 1~

—

The Endless Forest

[CSS Help] Fun With Coding :D