CSS Bases


Yup, I have re-done my CSS page! I now make CSS bases, which are layouts that you can edit it any way you want and change colors.

To view my old CSS page, click here!

These CSS codes were purely made by me; yes, that means made by me from scratch, and not redistributed by anyone else's. I learned how to make CSS layouts with the tutorials of a huge variety of websites.

These layouts were made and tested on IE (Internet Explorer), so I don't know if they work on FF (FireFox) or not, which they will, I think. ;)

And, before you start browsing, please be sure to read the rules and always comply with it! If not, you'll be happy to know you'll get put on the Wall Of Shame as soon as possible!

Rules

Never remove credit, claim, edit without credit, and/or accuse me of anything regarding my layouts!

A visible credit with a proper, working link back to this page is REQUIRED for anyone who uses any of my CSS!

You may edit as long as you keep the credit on, and following the rule above!

As long as you follow my rules, feel free to use my CSS anytime!

Updates

October 27th, 2007: Added anozer link back button for meh. It's quite cute in mah opinion. XD

October 22nd, 2007: Yay! Found the secret of an extra nav box! O_o o_O In other words, added another PetPage Layout base! Oh boy, I better start working in another media! XD

October 21st, 2007: Erm... yeah... a few things have changed. =D First of all, I added a new Nav section to make things easier to navigate, and an Other Links section! Secondly, I added a Link Back Buttons page for myself! ^_^ Thirdly, I organized a few things! Yay!

October 19, 2007: Created another PetPage base with... sub-headers! ^_^ Trying not to say 'add' anymore because I've said it too much! DX

October 14, 2007: Added another tutorial! =)

October 13, 2007: ZONGLZASYCSCASXFGS. Please excuse my tweested tiongerue. I have added another PetPage Liyut Stoole... but sometingies meesing... anyway, I've also added some eggs! Yay! Great, now I have to start working on those hideous creatures for the eggs -- did I say that out loud? '^_^ Oh, I meant to start drawing the cute things that will hatch!

October 9, 2007: Finally opened up the FAQ part of my page! My, so many questions already! XD

October 8, 2007: Added a few more tutorials, and a new userlookup base, one that I'm quite fond of! ^_^

October 7, 2007: Added another style to the Guild Layout bases!

October 6, 2007: Weee, changed page! @_@

Navigation

Other Links

Zomg. EGGS!!

Oh my... yes, it's true! I now have my own EGGS!! They are simply some simple, cute eggs that you can place anywhere as long as you link back! They all say the time that they hatch. On that day... oooh... the eggs will hatch, and you will see what the egg you picked out turned into! O_O

These were drawn by me, so they are strictly copyrighted to me. Stealing will cause me to report you to Neopets. Not only that, but you will be breaking the law. It is strictly prohibited that you steal copyrighted artwork!!

As long as you follow the rules, feel free to use and place them anywhere, and silently wait for them to break open... =D

Ze Eggs









The CSS

I'm Beautifying...

PetPage Layout Bases
Style One

CSS Layout by huynguyen10.

Style Two

Style Three

Style Four

Style Five

Style Six

CSS by Tran.

Without sub-headers

CSS by Tran.

Style Eight

Without the extra box

Userlookup Bases

Style One
Best viewed in 1280 x 1024. Works with any pets/shop/homes.

Shop/Gallery Layout Bases

These are some bases that can be used in both Shop and Gallery. There will be some layouts that are for Shops only and for Gallery only, but that'll be in the future. =)

Style One

Guild Layout Bases

Thanks so much Addie (queen_of_sneezle) ! Thanks for testing out my shop/gallery layouts on her guild. Turns out it will work quite fine, but with a few changes. ^_^ Again, thanks!

Style One

Style Two

Need Help?

This section will help you edit these bases if you're confused, or have no idea how to. ;D These will help you a bit, to increase your understanding of the codes!

Editing Colors
So you choose a layout, paste it somewhere, click on OK or Edit, then look at it. You don't like the sample colors. You want to change it, but have no clue how. Well, it's pretty simple! =)

You may see the word color in the code, followed by a color word or a hex color code. Just erase it and fill it in with your desired color!

For example, there may be a code like font color: green. Highlight the green, hit backspace, then type or paste another color, such as purple or #FFFF77. Easy!

Hex Color Codes?
You may be wondering what that is. Well, of course there are simple word forms of colors like burlywood and crimson, but those are not all the colors of the world. There is a color code called hex. There are charts in a lot of websites, such as neopetsguide.com, i-petz.com, and a whole lot more.

Hex color code charts are just a portion of the whole thing. They help you get the code that's that color. All hex color codes must have a # in front, followed by 6 numbers or letters, like #FFFFFF (white) and #590349 (a shade of purple) or #FFCF77 (a shade of orange).

You can make up some on your own, any random number or letter, and then test it. Or you could just go to any site that has a chart. Good luck finding your color! ^_^

Headers
My favorite part of coding! Headers! Headers are an easy and fancy way to make a type of text, headers like on a newspaper. They all start out from scratch, then you can edit and redistribute from your own coding, for a shortcut. ;)

The code is between style tags . The code between is usually h1. h1 means header 1. If you want to create more then one, you can start adding h2, h3, h4, etc.

Now for the designing part! Start out with your text. font-family is the code for which you want your font to be. Georgia, century gothic, arial, tahoma, whatever. Next is font-size. Choose your font size, and add pt after it. Now for color! fon-color: black or something. Backgrounds are simple! background-color: yellow or green or anything else. You can add font-weight:bold if you'd like.

This is optional. Your border-right, border-left, border-top and border-bottom. These are some additions that you can add to your headers. The border-styles are groove, dotted, dashed, solid, ridge, and some others. Those are just some that I use sometimes. I mostly use the general ones: dashed, solid, and dotted.

Alright, if you're still alive from the previous information, you can start using this code. I have a sample header code for you that you can start editing from here if you've just skipped that few minute lesson previously. XD

The text-align means where you want your text to be aligned. Center, justify, left, or right. The letter-spacing is letter spacing, and the text-transform means how you want your text to look. It's optional. So if you make it lowercase like it is, if you type HEADER HERE like so, it will be viewed as lowercase, caps or no caps. Same for if you make it uppercase/capital.

Hope this helped you know more about headers! Have fun editing! B)

Editing Bold, Italics, Underline, & Main Text
This is very easy to do! Extremely simple. You may see the code b {code code code} u {code code code} or i {code code code} on some of the bases. Especially the font,p,body,td {code code code}. What does that mean?

b is bold, i is italics, u is underline, and font,p,body,td is the main text. What ever code is between the {}, you just simply edit or add. As in the previous lessons, font-family is the font type, font-weight is the boldness, font-size is the size, and font color is the color.

There are some fun additions to editing these. For the bold, you could add background-color: red or any color. It means that the text now has a background when you use bold. It's pretty cool.

For the underline, you could do border-bottom: 1px orange dashed or any other color and border style. It means that whenever you use the underline code, there'll be a 1 pixel sized orange dash line under the text that's in the underline code! Awesome, huh? ;)

You can use any of these sample fun additions for any type of text, underline, bold, italics, or main text! Just have fun with it, and you'll have a nice result. *_*

Hover & Link Design
Designing your links and hovers should be unique. Pretty. a: link {code code} is the attributes of your link. a:visited {code} is how you see it once someone has clicked on a link, or has already visited it. a:hover {code} is what the link changes to when your mouse touches it, not click, just a touch.

I usually put a: link and a: visited together. a:link, a:visited {code code}. I don't want the link to turn to some other color once I visit it. I want the colors to stay the same.

For hovering... ^_^ ... there are a variety of designs and styles for it. For instance, you could make the link underlined if you hover it. It can have a background, a different cursor, a border top or bottom, a different color, capitalization, lowercase, a square, anything!

For the cool boxes, here is the code for it. Just edit the box settings, such as border-width, color, style, and font color, whatever.

Here is the code for a:link, a:visited for you to edit:

You should know by now what font color, weight, size, borders, backgrounds, all of that if you've read the previous tutorials. If not, please do. I don't want to repeat it all over again. x3

Cursors
Loveleh cursors!! {33 Easy. Cursors are... cursors! XD If you just hate the regular arrow cursor and the pointer cursor when you hover over a link like me, but don't know how to change it, never fear! I'll help you! Pretty easy process!

There are 20 cursors that I know of. Here are the names:

Here's the code for it:

Change it however you want! If you want to know how to change cursor when you hover over a link, read the Hover & Link Design tutorial! =D

Basic Codes For Neopets Layout
Here are some basic codes for removing or adding things when starting your own layout, or editing one of mines. ;D

Remove header and footer.

Remove left sidebar of NeoFriends and Pet Stats.

Remove top and bottom ads (for non-premium users) .

Converting Textboxes To Blogs
SUPER UBER OMG!! I just discovered this! Very very simple! Just edit an existing textbox code, and you'll get a blog made completely out of HTML/CSS, no images!

Here's a sample code for a regular textbox:

Now, see the size? Width and height? 70 pixels by 70 pixels, right? Let's make that larger... I'd say at least 190.

Now, if you use Internet Explorer, and would like to add a custom scrollbar color, use this code and then edit it if you wish:

Now, for making your blog to your own taste! The border says 1 pixel solid black. That means the border around your blog is a black solid, 1 pixel in width. Change it to whatever, like 10px dashed sienna.

See the background:white? That means, obviously, the background of your blog is white. Once again, change it to however you want, like yellow or orange!

Font-family, color, size, you should know. The padding means how much you want your text to go away from the borders of your blog.

Have fun designing your new textbox-converted blog! ^_^ Once you're done, use this code to finally test it out! Remember to erase the quotes and spaces between the word textarea!

Tags, Brackets & Braces
o_O What do those mean?!? You shall learn of them and their importance soon, young coder.

Let's begin with tags. Tags are those 'carrots'. They are mainly used for HTML, but also required to begin CSS. In this example, the word style is inside the tags.

Remember that you must ALWAYS have a slash after the first tag, like the second style inside the tags. The slash stand for 'end'. In this case, the first style tag starts CSS, and the second one ends CSS. Simple enough, right?

Another example is font color=orange. The code will be in the tags. Then, you must put /font between the tags when you want the orange text to stop. Yes, the code is that the text color will be orange. If you want to stop it and turn it into a different color or back to default black, then you'll end it with /font.

Okay... so you don't always have to have the slash. But only for purposes of dividing paragraphs and sentences. If you finish a paragraph and want to start a new one, type in p bewteen tags. I use it quite frequently. It makes everything so much neater. It skips about 1 line, or 2 Enter spaces. If you only want 1 Enter space, type in br between tags.

Now for brackets! In Neopets, we only use brackets for making our neoHTML and Siggy, and for bold, italics, underline, and 'quote' when posting on a topic. Yep, brackets are these: [ ].

Like tags, you must always have a slash after a bracket, except, once again like tags, [p] and [br] when designing your neoHTML and Siggy. Example: [font color=red]Lalala[/font].

And... last but not least, braces!! Braces are only used for CSS. Like said before, you start CSS with style between tags, then type in what you want to edit, such as a:hover, then use braces {} to type in what you want its color, font-family, etc to be.

Unlike brackets and tags, you do not put a slash behind a brace to end something. Instead, you put this ; , but it's only used for the second brace, not the first like tags and brackets. { ;}

So, tags, brackets and braces are very important, for they start, end, and design your HTML and CSS. Now you know what they are, what they're used for, and how to use them! ^_^

Wall Of Shame

Dun dun dun. :K Once you get glued here, you can never escape... unless I accidentally delete this page or delete this part which will hopefully never happen. XD

If you are on here, be VERY ashamed. you have gone against my rules. I was very generous enough to make you these layouts, and I don't want to see them STOLEN! *cries* Don't do this to me!

Of course, to break my rules and get on here you must've 'forgotten' my rules, skipped them (-_-), or purposely went against them. If you see anyone stealing my layouts, contact me immediatly! You'll be on my official helper list which will reveal itself when someone actually helps me. =)

The Offenders

None! Let this pride and joy continue for the rest of my life! =)

Link Meh

Here are a few link back buttons if you wish to link back to me. Thanks for using and introducing my CSS page! ^____^



Erm...

Well, not exactly frequently asked questions... more of questions I've encountered... QIE! I've also added some other stuff that aren't exactly questions but I find them amusing in a way. =3 Please read this section before neomailing me anyway!

Why have you decided to make bases now?
Well, I just very recently found out that I am only changing COLORS of my CSS. That's a waste of my time and eyesight. You can edit it. I don't have to. I decided to still make CSS, but not in different colors. Just new styles.

I wanna request a layout!
No. Haven't you read my welcoming message? I only take it from my FRIENDS. And my only friends are those that I am friends with in real life, in school! It's very rare I have a friend on the Internet.

Let me be your friend.
No. This is the reason why I closed NeoFriend requests. Tons of random people kept giving me requests and mailing me stupid stuff like Hi! or telling me about them.

Can I use a layout for a different catagory then what it was placed in?
Yes, of course you can! My guild layouts will work well for a petpage layout. My shop/gallery layouts work well for a guild layout, and vice versa. I don't recommend using one of my petpage layouts for a userlookup, though.

You're mean.
Good for you.

Teach me CSS!
No, I simply don't have the time. I do, however, have some small, simple CSS tutorials in the Need Help? section that may help you a bit.

Well... at least teach me HTML!
No. Once again, feel free to read my mini guides for editing codes and such. You can go to Neo's HTML guide, CSSHelp, neo-reality.org, tons of resources.

I don't like your CSS.
Oh well. Find another page you like.

What does CSS stand for?
Cascading Style Sheets.

Oh my gosh, Tran. You like edit everyday. How do are you able to do that??
=) Well, I only edit/create/add when I feel like it. I have plenty of time in my days. Home from school, finishing up homework (yuck) , finishing up chores, eating, everyday things. But I don't really have any hobbies except for coding. On some days I go swimming, and I'm having a thought to go to a kickball team. ^_^ So, yeah, a lot of time.

Are you really 20 years old????
Uh, no way! Much younger, at least 6 years younger, as a matter of fact. ;D

Then why'd you make your account to be 20 years old?
I didn't. This account used to be my big brother's. For some reason I don't know, he made it 20 years old when he made it, which was about 3 years ago. Then I inherited it. XD

I like you. You're so goofy, creepy, nice, serious, smiling all at the same time!
Why thank you! *_* I never knew I was adored and loved that much! x3 I am uber hyper most of the time, serious about 25% of the time, an ebil person 2% of the time. =D

Hi.
Hi! ^_^

Why do you have to be so serious about those eggs?
Because I want to. Because it's important. BECAUSE THEY'RE MY BABIES AND NO ONE ELSE'S!!!!!! D=

Hi Tran. I love your PetPage CSS. Am I aloud to take one or two styles of them, change it around a bit, then create some more after it, and then remove the credit? I have done some work editing it.
... absolutely not! No way. Never. Stop. Yes, I know I make bases, but these bases are for YOUR OWN PERSONAL USE ONLY. You may not under any circumstances reproduce a layout of mine and create more from it. Furthermore, my credit must ALWAYS stay visible and must ALWAYS have a link back to this page! Thank you for asking me before continuing even more. Please remove my layouts from your page. No matter how much you edit my bases, you must always credit! Only credit yourself if you started from PURE SCRATCH as I have done!

Any Questions? Comments? Saw a somebody go against my rules? Neomail huynguyen10. Available everyday, usually, and online at least 2 times a day. Do not contact after 8:00 PM (US).

Tran's CSS started on September 7th, 2007.




NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® 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