Welcome, I see you stumbled onto Fist of Clouds! My name is Liz, and I'm the proud owner of this site. It is a CSS guide, with some premades to offer, too. Feel free to look around, and be welcome to use any content you may like.

Why Fist of Clouds, you ask?
Well, imagine being punched by a cloud. Would it hurt? Not at all. Hence the "dreaming never hurts" slogan. Life is all about dreams, without them we wouldn't dream of what we have and we wouldn't have what we dream about. I just thought it was cool at the time.


It takes a lot of time and dedication to break down codes and arrange them to make it easy for everyone to understand. If you make your own layout following guidelines explained here, I would really appreciate if you give me credit, in any way you want to, but please do so.

Also please, please, do NOT remove credits from any layouts you may use. You're free to edit colors or tear them apart however you may, but please leave the link.

Thanks for your comprehension.



15/02/08: Just did some small retouches.
And OMG! I'm back! (sort of). I hadn't logged in in such a long time. Everything was so hectic with university+work+moving countries. Jeez, life is so hard sometimes... But anyways, from now on, on my free time I'll be updating the site with new premade stuff and fixing some codes. Some of them have changed in all the time I've been missing. Well, farewell folks. Hope you have been enjoying Fist of Clouds!































Feel free to use any of these to link back!



~ Listers ~




~ Affiliates ~



Site started on 2012/07/28











css basics

A brief intro on CSS. First of all, this CSS help guide introduced here doesn't cover all aspects of CSS3, only the ones you need to know to work on Neopets. And even so, there might be things I don't cover, mainly because of the CSS3 knowledge required to correctly use certain codes. I will also try to be as clear as possible while explaining codes deemed to be explained.

Peeking into source codes

If you have ever looked at a site and wondered "how in earth did they do that?", just right click the page and select 'View Source' for IE or 'View Page Source' for Firefox and Chrome. I do not encourage the use of this tip as a way to steal someone else's work. Use it to check out how they made something work or use the structure as guide to build your own. But be wise and don't get yourself in trouble for stealing.

What is CSS? // Basic Rules

The abbreviation CSS stands for Cascading Style Sheets. It is used for describing the look and format of a file written in markup language (HTML). It has an English syntax to specify style properties, which makes it really easy to understand.

Your style tags wrap a code that is divided in blocks, which are addressed as declaration-block. This declaration- block is followed by a list of declarations, and each declaration consists of a property, a colon (:), a value, and a semi-colon (;). A semi-colon must be inserted to separate each declaration. Brackets { and } must enclose all declarations. An example would be:

Those style tags are wrapping a font class declaration-block. In order to use that font class you must include the HTML tags outside of the style tags (on your page content). Example:


It would look like this: Your text here

id and class selectors

Whoa, font class? What do you mean by 'class'?

If you're new to CSS you probably wondered what 'class' meant there. Well, CSS allows you to use two selectors: id and class.

The id selector is used to specify a style for a single, unique element, and it uses the id attribute of a pound sign (#). Whereas the class selector is used to specify a style for a group of elements, which, unlike id selector, is most often used on several elements, like on the example above: a font. Oh, and it uses the class attribute of a dot (.).

Tip: Id selectors are used more frequently for DIV boxes and class selectors are more commonly used to give style to headers and fonts.

Dimensions

Pretty basic - if you can't guess how to change dimensions before reading below, you probably shouldn't be experimenting with coding.



That's correct! Width and height properties define dimensions.

basic tags

Bold
Italic
Striked
Line
break
Paragraph

positioning

Static Position Fixed Position Relative Position
Elements are positioned static by default. Static positioned elements are always positioned according to the normal flow of the page. Fixed elements will "float". They are relatively positioned to the browser outline. Like the menu you see on the bottom of this page. Positioned relatively to its normal position.
Absolute Position Overlapping Elements z-index property
Absolutely positioned elements are removed from normal flow. They position relatively to the first parent element that is not static. If absolutely positioned, an element can overlap another using the z-index property. Specifies stack order of elements. An element with z-index:-100 will be bottom-most, while z-index:100 will be top-most.


Easy peasy. Example: if you want to position a DIV so it fits your awesome banner image, you make it absolutely positioned. If you want it to be on top of your banner image, you make your banner z-index:-100 and your DIV z- index:100.



Neo-filter note: Position property has to be bypassed, so rather than putting it inbetween style tags, it goes in the HMTL tags, as shown above.

styling your css

Background

Backgrounds have 5 CSS properties: background-color, background-image, background-repeat, background-attachment and background-position. All of this properties have their values, even though it's easier to just go with the shorthand code. Also, the background goes in the 'body' declaration-block. Take a look:


That would make your background black.

All other background properties are, say, to attach a background to a fixed position or to make it scroll or static. For example, the background used here is 500x500 pixels in size, and with the 'repeat-x' value, I made it repeat horizontally, with 'position' set to 'bottom left', it sticks there, and with 'attachment' set to fixed it stays where it is positioned; it doesn't scroll with the page. Like this:


That inside the box is a shorthand code.
Order for shorthand is: color, image, repeat, attachment and position.



background-repeat values background-position values background-attachment values
repeat-x

repeat-y

repeat

no-repeat
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
scroll

fixed

text properties

Text has quite a few properties to be used in CSS. These are: color, alignment, decoration, transformation, direction, letter spacing, line height, word spacing and indentation. There is a few that are not commonly used so I won't go over them.

Text Color: This property is used to set the color of the text (duh). You can set the color by either a hexadecimal value ('#ff0000'), a RGB value ('rgb(255, 0, 0)'), or a color name ('red'). All those different values mean red in their own language. Though, almost always we use hex codes for CSS, so here's the deal:

Change text color of entire page


Change text color of a header

Alignment: Basically, it means whether you want your text to be centered, to the left, to the right or justified.


This text is centered.


This text is to the right.


This text is to the left.


This text is justified. This text is justified. This text is justified. This text is justified.

Transformation & Spacing: Tranformation bears the values uppercase and lowercase, while spacing values work with pixels. Example of both:


i am lowercase and have a letter spacing of 4 pixels.


i am uppercase and have a letter spacing of 2 pixels.





Text decoration: text-decoration: none; is what you would normally input in a hyperlink declaration-block. Because nobody likes the silly underline regular links have, right? But then again, an overline would be cool, so let's check out our decoration options.

none overline underline line-through blink
I'm neutral I have a roof! I have a floor. I was a cool idea. I blink!
Blink declaration only works in Firefox.

font properties

Fonts have 4 properties to play with: font family, font style, font size and font weight. Font size is managed with pixels. Here's how:


I look like this.

The following table will show you the values you can input on each.

font-family font-style font-weight
Family refers to the font you will use.
Ex: verdana, calibri, georgia,
times new roman, etc.
italic
bold
oblique
lighter
normal
bold
bolder

hyperlinks

Links can be styled with any CSS property. Ex: color, font-family, background, text-decoration, etc. They have 4 states, and they are: a:link, a:active, a:visited and a:hover.

a:link normal unvisited link
a:hover a link on mouse over
a:active a link the moment it is clicked on
a:visited an already visited link


A hyperlink styling example would be:



See how i did not input a font property on the 'a:hover' block? It is because the style sheet automatically assumes it's the same font face and size. It's kind of neat because it saves you space.

To use a link you must specify the 'h r e f' (grr, filters disallow it so I have to add spaces) value in the 'a' tags. 'h r e f' is the property that will direct whatever text you input between tags to the value you tell it to. Still not sure? Look:


Result: Neopets

Box Navigation: Okay. This is a little tricky but easy nonetheless.
Box navigation refers to the style of navigation you see on many premade layouts, and it looks like this:



It is quite simple to get it done so here's the breakdown:

First you have to define your "nav" DIV box. Is it going to have a fixed position? Will it float? Is it inside another div? The example below shows a navigation DIV that would be inside another DIV, because it has no position properties.



Next up is your hyperlinks:



That would be the basics to the links. You can add whatever more you want: borders, make it uppercase or lowercase, you get what I say. The important thing is the "display: block" property: it is what will make your links into boxes.



Finish up with your mouse over properties. Notice how I only input text color and background - as I said before, the style sheet automatically applies the style set on the active link (saves you space, yay!).

Here's how to use it:



box model // divs

You're probably wondering "what is a box model?" - Well, here's this to answer your question:



But what is that?

It's quite simple actually. The term "box model" is used in CSS to address design and layout, essentially being a box that wraps around our elements, consisting of margin, border, padding and our actual content.

margin border padding content
clears a transparent area around the border customisable border that goes around the padding clears an area around the contents, affected by content background content of the box


All values for this properties are expressed in pixels, points or ems. But just stick to pixels.



this is how i look

If you do your math right, the DIV above is 73 pixels wide instead of 65. When designing a layout, you have to keep in mind that outer values affect the size of the box.

Border Properties: Borders, borders, borders. You can make your border thick or thin, pink or green, dotted or ridged. You pick!

border: none border: solid border: dashed
border: dotted border: double border: ridge
border: groove border: inset border: outset


div boxes

A DIV box is a customisable section of an HTML page. Some of its properties were explained on the "Box Model" section. It can be as wide and tall as you want, and you can position it either in the flow of the page, or make it have a fixed position. For example, this white container boxes are DIVs going with page flow, and what gives the navigation menu its position is a DIV which position is fixed.

A DIV box can have pretty much any of the properties we have covered on this guide: a background, margin, border and padding, change the color of the text inside it, width, height, and all that nifty stuff.



Hello, I am a customised DIV box


Hello, I am a customised DIV box

Center a DIV box: To center a DIV box when used in text flow, DIV tags must have a 'margin: 0 auto', or 'margin: 20 auto', or whatever margin you want it to have, but the word auto must be included. It would look like this:

Side by Side DIVs: To put 2 DIVs side by side, 'float: left' or 'float: right' must be included in its properties.

Oh my god, it is 2 DIVs side by side! I didn't think this was possible! Awesome! Come on, you know you want to try me. Because I'm just a-ma-zing!
Oh my god, it is 2 DIVs side by side! I didn't think this was possible! Awesome! Come on, you know you want to try me. Because I'm just a-ma-zing!


text area




A text area is a little HTML box that encloses text. As you can see it can be used to enclose codes, too. Below is an example of textarea customisation:



To include one in your contents just do this:


Change those parenthesis for tags.
I can't do it like that because filter blocks it.


misc: hover effects

Non-link text hover effect: First up, specify a font class.



Now you specify what hovering over that font class will do by adding a ':hover' right next to its name:



Hover over me!

Image hover effect: First, you need your normal image and your on-mouse-over image. Make sure you know their links and dimensions.




Now, you need to make your code look like this:



You can change the 'roll' name to whatever you like - mine is there for educational purposes. Also, the width and height in the code has to be the same width and height of the image you will use.


How to use it? Here:

Background hover

Isn't it neat? The code contained in the following text area is the same one i used. It can be used for DIVs, tables, and whatever has a background really.


The following codes are to remove parts of Neopets lookups, shops and petpages, like the annoying Nickelodeon white bar on top of the screen or those blinking adverts that distract your view from a nice design.

Enjoy yourself while removing all of them.

lookup removal codes

All the following codes go inbetween style tags.

Removes header
Removes footer
Removes ad banners
Removes clock
Removes user info
Removes collections
Removes shop module
Removes pets module
Removes neohome module
Removes habitarium module
Removes trophies module
Removes welcome, NP amount and logout

shop removal codes

All the following codes go inbetween style tags.

Removes Nickelodeon bar
Removes sidebar
Removes header
Removes footer
Removes advertising
Removes divider on top of items

petpage removal codes

All the following codes go inbetween style tags.

Removes green banner
Removes copyright



Petpages | | Lookups

Simple Square






Simple Anchored





Lovely Banners




Simple Retro







Halloween







All Fist of Clouds contents belong to me, Liz.
Please do not reproduce any of it in any way, nor use it without crediting me.

Place holders, 'new' and bullets by Foomanshu.
Dividers, 'best viewed in' and envelope by The Lunch Box.

NEOPETS, characters, logos, names and all related indicia are trademarks of
Neopets, Inc., © 1999-2015 | Used With Permission.













Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2017.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions