▬▬ The CSS Blog ▬▬▬▬▬

Ipsum

About

Welcome, allarice, to Ipsum! Ipsum is a new CSS blog, updated (frequently) by the wonderful staff. Named after the dummy text of the printing industry, we aim to be a resource for all things code-related.

Ipsum is a...

...collection of snippets of code and how-tos for some nifty CSS tricks seen around the site. I can't claim that this is in any way, shape, or form a tutorial, although I've attempted to list some good ones under the tutorials section of this page. Instead, it's more like a toolbox that will hopefully help make your layouts even more fantastic than they already are.

Ipsum is for...

...the moderately experienced CSS/HTML user. As previously established, this is an assortment of separate topics in no particular order. Some basic knowledge of divs, lists, and styling properties are necessary to understand all articles. If this isn't the case, I recommend looking at some step-by-step how-tos; CSS/HTML is fairly easy to learn.

╰- Enjoy the site! -╯

Blog

Dec. 31, 2012

Almost 2013 (which is absolutely crazy - 2012 blazed by and the world didn't end), so I decided to update with an article on fixed headers and footers because they're so lovely. They can contain: updates, navigation menus, credits, notices, and anything else you can think of...dead useful.

The code is quite simple.

And, of course, a run-down of the code:

Display: block forces the element to use the full space allotted. Width: 100% causes the header or footer to span the full width of the page; height: 50px can be adjusted as necessary to create a footer of the correct height. Bottom: 0px forces a footer to the bottom of the page; for headers, replace "bottom" with "top." Left: 0px sticks the header/footer to the left of the page. Position: fixed, in the HTML below as "position" is disallowed in styling, is what causes the element to remain in place as the view scrolls.

A brief note: Footers may not appear to display properly (especially in the case of being partially cut off by the bottom edge of the browser) in the preview, but will display correctly in the actual page.

Oct. 12, 2012

Gosh it's been a while! So, on the subject of saving petpages. There's always that annoying time when you just can't find the "Save Changes" button. Well, your work coding hasn't gone to waste, because even though you can't see and/or click on it, there are some back doors through which to get there. I've listed a few ways to do this below - pick your favorite!
  1. The standard method is just to keep hitting "tab on your keyboard until that silly "Save Changes" button is selected. If it's visible, it will be highlighted with blue around the border; if it's not, tabbing down to the last link that's boxed and then one more should get you to it. This method works 100% of the time, but can prove a bit annoying if you have a number of links, anchors, etc. on your page.
  2. There is also the possibility of zooming out through judicious use of Ctrl - until the button becomes visible. Often, this is because your layout doesn't quite take up 100% of the page, and the centered "Save Changes" button will eventually escape from behind it.
  3. The temporary browser block is another popular technique. Disable the CSS for the page through your browser. For Firefox, this can be done View » Page Style » No Style (if you don't have the menu containing "View," go to Firefox » Options » Menu Bar first). For Internet Explorer, View » Style » No Style. To restore after scrolling to the bottom and saving your page, revert to "Basic Page Style" (or some variation).

Aug. 31, 2012

Since I completed (the gist of) Panoramic and had it up, I've received a few neomails asking me how I approach the designing process and actually create my layouts. When I read this, I realized that while my very first article was a list of "do-not"s, I have yet to write anything on the "do"s. So much for being a glass-half-full person.

The first thing I'd like to say is that I'm not an authority on any of this. I'm a self-taught high school student who learned everything she knows about web design through Neopets. That said, in my opinion, there are only two rules when approaching a new layout. Everything else tends to fade into irrelevance. Follow these, and you'll end up with not guaranteed brilliance but guaranteed sufficiency. The two rules are: 1) Be simple, and 2) Be neat.

My layouts usually start with some kind of vague image in my head, or a blurry idea on what I want to do. Many times, it's as simple as, will this page be anchored? Very occasionally, I can sketch the layout out down to the minute details if given a piece of paper. To form this idea, I start by cataloguing every piece of information that I do know about the layout. What is this layout for? How much information will be on this page? How much text? How many images? What kind of theme should it fit into? What kind of impression do I want to leave any viewers?

To start, I usually open up Photoshop, because chances are there will be some kind of image involved. I do want to make one thing clear: in the end, graphics skill has much less of an impact on the appearance of a layout than you might think. I'm not a skilled graphic designer by any means. My graphics are mediocre by Neopets standards and downright dismal by real life comparisons. But things even out, and my products look somewhat professional anyway. This can probably be somewhat attributed to current trends; the preference for many right now is the ultra-sleek, modernistic look that doesn't take much to create. In other words, much of the time, Photoshop isn't used for anything except maybe a 150x150 logo consisting of a dot and four letters or a banner that's just a Neopets background with some DeviantArt texture slapped on. Some sort of image, however, it essential to a nice layout; pure text can lead to a less finished feel.

Graphics and code follow the same rules. Be simple; in other words, don't try too hard. If you're making a character page, chances are you don't need roll-overs. Don't go overboard on the colors; when in doubt, grayscale never goes wrong. If you want bright colors, balance it out with neutrals. Never add more textboxes than you need, never use thick borders on top of patterned backgrounds and bright text, and don't try to use fancy tricks when they aren't necessary. Empty space is good. And, unless you're extremely sure of yourself, stick with the time-honored components of a page: the navigation bar, the page title and banner, the text, and maybe a sidebar. Finally, petpage layouts are not guild layouts. Most of your screen should be text, not images.

On neatness, it's quite simple. You don't have to be the most amazing X or the most wonderful Y who's ever lived. Just make sure all your images are high quality, without too many extraneous patterns, and not cutouts with a thin line of sky still attached. Your elements should be lined up down to the pixel. In my experience, I find that things that are aligned in a generally rectangular way look the best. Using cool fonts? Pick something that fits, and doesn't resemble Comic Sans. Your margins should be properly sized to maximize space-usage, and your brightlines sharp. Hope this was helpful!

Neomail Alle with any questions.

Aug. 28, 2012

Finally, a compatibility article! This one is as old as the hills, but it's certainly useful. Have you ever had that problem where your divs line up perfectly in every browser but Internet Explorer? Well, it's now solved. This trick is commonly known as the box model hack.

The key to this is that in many versions of IE, the values margin and padding are included in width and height. As you can probably imagine, this throws many layouts completely out of whack in IE. (Note: While I admit to being too lazy to do this 99% of the time and accept some ugliness, it is quick and clean a solution.)

For example:

In IE, the width of the div box displays as just that: 400px. In all other browsers, the width would display as 400+50+50+50+50, or 600px. If there was a sidebar, for example, and no absolute positioning, this could severely affect a layout.

Luckily, the fix is quick and easy. The only thing that needs to be done is the separation of the code into two divs, one for width, one for other specifications, so that IE can no longer mix them up.

And the markup:

And that should fix everything!

Neomail Alle with any questions.

Aug. 22, 2012

Note: In Chrome and IE, after the first time the animation is played, the final frame of the animation will be used upon hover.

Remember that tutorial using transitions to create a fade in, fade out on guild layouts? Well, this very brief article demonstrates how to create the fade in effect on petpages. An example of this would be the navigation links at the top of this page. Unfortunately, thanks to Neopets filters, there is no way to do this using pure CSS. The good side is creating the same effect is extremely easy with any sort of image editing program. I'll be demonstrating on Photoshop, but the free GIMP can do this just as well.

Open up the program, and create a new blank file. Something to keep in mind is that frames and animation take a long time to load. In light of this, I would make the file 5px by 5px, purely in interest of a smaller file size. Create two layers and fill the bottom layer with the color you want to start in, and the top layer with the color you want to end in.

Now, if your animation window isn't open, go to Window » Animation. Duplicate by clicking the square to the left of the trashcan icon at the bottom of the animation window as many times as necessary. I recommend 7 frames in order to create a smooth and fast-loading animation. On the first frame, drag the opacity level of the top layer down to 5%. On the next, 15%. Then 25%, 40%, 65%, 85%, 100%, in that order. Make sure to change the "Forever" in the bottom left corner to "Once" so your animation doesn't keep repeating.

If your animation window looks like Figure Two, File » Save for Web & Devices is where to go. Leave all default settings in place (check to make sure the format is a GIF), then save and upload the image.

Now, to add to your CSS code:

And that's all! A combination of images and CSS can do some pretty cool things, especially when it comes to mimicking code otherwise blocked by Neo.

Neomail Alle with any questions.

Aug. 20, 2012

You've probably seen - at some point or another - the protected petpage. If not, then you should - a very basic example I put together in the last ten minutes minutes can be found here. Check it out!

Psst, the keyword is "CSSBLOG" for those who want to know.

What are these petpages for? Well, one function can be to cement the cliquishness of your guild/secret organization so that no one can see your pages. Or at least, no one who's not willing to put in a modicum of effort, because as with all interactive Neopets coding that's not really interactive in the true sense of the word, there're ways around it. It's often used in Harry Potter guilds to recreate the common room atmosphere of the books by requiring a secret phrase to enter. Whatever the purpose, it's still pretty cool. And even better, it's compatible with all browsers.

How it works
The protected petpage is very similar to your normal anchored page, with a key difference: the anchoring occurs on a much larger scale. The entire page is now like your anchored box, and each piece of it a section. This will probably make more sense with the code.

And the styling:

First, before I forget or get lazy, the line by line. Mandatory in this layout is the .sf, td that makes the Neopets header and copyright go away. Otherwise, it screws with any hope of things lining up right. The body is typical, but with no padding, again so that the #blocker will take up the entire page. Overflow is hidden in order to eliminate the scrolling that takes viewers past the #blocker. The #blocker itself is also fairly simple; like the body, the margin and padding are set to 0px, and the width and height expand or shrink to fit the full size of whatever screen the page's being viewed in. A solid background helps hide whatever might be behind it. And finally, the #content div contains the meat of the page, with similar settings and similar reasons as above.

A few things to keep in mind about this sort of layout:

  1. The "Save Changes" button will not show up. You'll have to tab down to it.
  2. Don't try to add more anchors within the mini-"page" unless you're 100% sure of what you're doing. Trust me, it can mess up the whole layout and making it work is the most frustrating thing ever. Other than that, the #content div functions pretty much as its own page - absolute positioning, floats, etc. all work within it.
  3. On some browsers, the preview might look a little off; this will only happen with the preview. The page itself works fine.
  4. The body and div padding, width, margins, height, and display are all edit-at-your-own-risk.

That's all - feel free to edit (actually, please do; the template creates unbearably ugly pages right now because it's the bare minimum).

Neomail Alle with any questions.

Aug. 19, 2012

Let's talk borders. I know, a fairly simple concept, right? Unfortunately, when many people use borders, it doesn't end up looking the way they'd like it to. Often, borders make things look noobish, unprofessional, and very sloppy. That is why I've decided to address this problem, and hopefully help you from making an ill-looking bordered div ever again.

First thing is first; the types of borders. There are many different types of borders that are available for your use; but, this doesn't mean that you should use them. Below are the listed types of borders, in order of popularity. There are three main types that are used frequently, and a few more obscure borders that people may not know about.

Solid: A solid border is the most commonly used border. It's not hard to go wrong with a solid border, but it can also help clean up your page. Just a simple detail like this may change the whole look of your page. The weight of it is the key to how it will look. Usually, less weight will look better.

1px border example 5px border example 10px border Example



Dashed: Dashed borders are next. While it can add a lot to your page, it can also make it look very dumb, to put it frankly. Be careful when using dashed, that you get the sizing and coloring correct, otherwise it may just look tacky.

1px border example 5px border example 10px border Example



Dotted: As you can tell, dotted borders are similar to dashed, though they can make quite the difference in your page. Like dashed borders, they can be tacky and gross-looking, so be cautious when using a dotted border.

1px border example 5px border example 10px border Example



Double: While it's hard to tell here, double borders are just two solid borders together. They can be impactful, but also overwhelming. They aren't used often in professional pages, merely because of the look they portray.

1px border example 5px border example 10px border Example



Groove: Quite an uncommon border selection, it is a type of 3D border. Like most 3D borders, the effect all depends on the color.

1px border example 5px border example 10px border Example



Ridge: Very similar to the Groove style, Ridge bordering is a 3D border that depends on the color and width for the effect it will give.

1px border example 5px border example 10px border Example



Inset: Inset is another 3D border that I don't fancy too much. It can give a nice effect sometimes, but will more likely just look weird. However, it is fresh, something new to look at.

1px border example 5px border example 10px border Example



Outset: The exact same as Inset, only opposite.

1px border example 5px border example 10px border Example



Styling

The CSS for a border usually follows the template below:

Next is the question, how do you style these many types of borders? Styling is key when creating a decent-looking layout.

There are three main things to think about when styling: Weight, color, and type. All three are extremely important, and depend on what kind of border you're using. Another important aspect is where to put the border, but that's easier to figure out, so we'll be skipping over it.

Weight: Weight is probably the most important thing to think about when creating a border. It is essential that the border is not too thick, because this tends to look absolutely horrible! The thinner, the better. Most of the time, between 1px and 3px will look good for a div border. Below a title, or of the equivalent, usually looks good according to the size of the text. Mess around until the weight of the border fits the size of the object it is around.

Color: I'm sure everyone has heard this. Color reflects different moods. Colors have their own personalities and greatly effect the mood of your layout. Usually, the color of a border should be somewhat muted. It shouldn't be loud, and it shouldn't make a statement. Borders are just the decoration on the cake; it's not the icing, it's not the sprinkles, it's just the decoration. It should add something, but it shouldn't be the main focus, nor should it compete with the main focus. Borders will rarely be their own color, but more like a variation of the color that it's surrounding. For instance, if you have a plain white div, the color of the border should be #e2e2e2 or something like that. I've also realized that a plain black border, at 1px in weight, usually looks pretty good. So, when in doubt, see what black looks like with the object it's surrounding!

Type: The type of border that you use is essential. If I were you, I'd stick with one of the main three; solid, dashed, or dotted. Solid is the most common, and the one I'd suggest for you to use most frequently. As previously stated, you can go horribly wrong with dashed or dotted, mainly because they are loud and expressive, and take away from the cleanness of the layout you're trying to create.

Neomail Elisha with any questions.

Aug. 18, 2012

Note: If you are using IE... What were you thinking? Go get Chrome, Safari, or FF, and come back. IE doesn't seem to like opacity filters. ;) Also, this technique does not work for petpages, but does work for guilds. An short petpage specific can now be found here.

In this article, I am aiming to help people understand how to create divs which will fade into colour when they are hovered over; using opacity filters! This technique is becoming increasingly popular in guild layouts especially. It can add a touch of professionalism to any layout. c: A demonstration can be found here.

You will need a little CSS knowledge prior to reading this, especially if you want to manipulate it and make it your own. I am going to provide two codes that you are welcome to take and experiment with - one for floating links, but we will start with text boxes.

This code can be used to create a div in which you can type, the kind you see on the front of guild layouts, which contain important updates and council chats. This code is special because it will appear faded and washed out, until it is hovered over, then it will fade into its actual colours.

You need to add the following code between the style tags.

Change the numbers beside 'left' and 'top' to position your box wherever you see fit on your layout. Change the numbers beside 'width' and 'height' to change the size of the box.

Feel free to edit the colours, font, size, borders - I don't want to go too indepth about those, because it's not the focus of the article, but it's not hard to figure out.

You need to add another thing to your style tags, before the hovering effect will work! Here is the code.

Wait! You're not done yet.

For your div to show up on the layout, we need to add something outside the style tags:

That wasn't so hard, right? You now have a nice little div, which floats in when you hover. (: Try it out!

Creating 'floaty links' which will fade in to any colour you choose, is quite similiar. These links don't have to be inside a text box, they will float anywhere you position them on your layout, and are a nice touch, even without the opacity filters. Here is a code to help you get started, to go between the style tags.

Once again, here is where you can edit the positioning. Don't forget to add this code between your style tags too - for the hovering effect to work.

Now, add this code if you would like to edit the font and colour of your links!

Whatever colour you set link 'a' to, it will show up as a faded version and looks better on dark backgrounds. It is recommended to keep it set to #000000 as it only shows as a light faded grey. Whatever colour you set the link a hover to, it will fade into. The default code I have provided fades into a bright red.

Now, here is the code to display the link. It should go outside of the style tags.

If you would like multiple floaty links, it is easy. Simply copy multiple versions of the code between your style tags, but change the 'linka' to 'linkb'. You can change it to whatever you like, but whatever you change it to is now the div id. You will have to paste another version of the code above too, but make sure you change the div id to match whatever you decided. Linkb and so forth is recommended, for the sake of your brain not exploding with me being responsible.

Anyway, that is everything. (: If you have any questions, or have run into any problems using this method, or want to shower me with love (don't lie, you totally do),

Neomail Zephyr with any questions.

Aug. 17, 2012

I've decided to leap right in, so the first real CSS feature on this site will be on the drop-down navigation menu. There are, actually, a number of ways to accomplish this; to start off, I'll be showing the cleanest but also the most limited way to create such a menu. It would be a good idea to note that this method is not IE-compatible but compatible with all other browsers.






This type of drop down navigation is extremely simple. It's essentially just a div containing the main link and its sub-links that expands to its automatic height upon hover. However, in exchange for simplicity, there are limitations upon this kind of drop-down navigation:

  1. Getting it to display in-line becomes tricky. There are two ways I know of to do this: absolute positioning, where you simply fix divs like "#link1" in place, and relative positioning, where you float items to the left and right. I would recommend using absolute positioning unless you're 100% sure of what you're doing.
  2. It limits your options as far as where you want the drop to be/what it can look like.
  3. This technique is only really useful for this specific purpose.

The HTML looks like this:

And the CSS like this:

The #navwrap div is the container holding the entire menu. While it's not completely necessary, I generally find it cleaner and helpful in the long run to have a parent element to help with styling later on. Beneath it rests the #link1 and #link2 divs. Obviously, there can be as many as necessary. The divs are set at a fixed height and width with any overflow hidden in order to hide the sub-links. However, for this to work, the display might be set to "block," making the next bit of absolute positioning necessary to display the links in a line. Finally, we have the #link1:hover and #link2:hover, which cause the box to expand to its full height upon hover.

Style as necessary. The above is a template - trust me, it'll look much better once some fonts and colors are added. Hope this was helpful!

Neomail Alle with any questions.

Aug. 15, 2012

As you may have inferred from the caps lock, I've compiled a list of items that make me want to tear my hair out 99% of the time. And if I were you, I wouldn't chance not being in the 1% that can make some of the less egregious offenses below work. These are my top five DO-NOTs of Petpage Design.

  1. Neon text, neon blocks, and anything neon – especially on black, it can be tolerable on a white background – makes the reader's head spin. Avoid harsh colors as a rule, and if necessary to use, choose your colors with care. Remember the key to your page is the content, and if that's totally off-putting to read, your site is totally off-putting as well.
  2. No white space means no ability to make sense of your site. I don't want to look at something where every inch of my 798x1024 pixel screen is covered with graphics, text, and whatever else. There needs to be empty space in a nice neutral color somewhere, preferably between all columns, paragraphs, lines, etc. Less is more; the space will pull your layout together.
  3. Unreadable text such as tiny text, light on light, crazy fonts. Your font sizes should never get smaller than 11px verdana or arial. If they do, they become a nightmare for anyone trying to read. The same goes for yellow text on a white background, brown text on a black background, and an entire paragraph in Vivaldi. Do. Not. Do. It.
  4. Navigation menus that aren't accessible sans scrolling no matter what part of a page I'm on are links that aren't achieving their purpose. Navigation means easy access to the important parts of the site. If that access isn't easy, it isn't good navigation. On a long, scrolling page, the navigation should always be fixed; on one that doesn't scroll, the menu should be at the top.
  5. Blurry graphics. You can never go wrong with clean, correctly-sized, saved-in-the-right-format pictures. If they're blurry, it reeks of unprofessionalism and, well, lack of skill. It's better to just go with a plain CSS layout otherwise.

    Neomail Alle with any questions.

Tutorials

One of the shortcomings of a site full of stand-alone, somewhat advanced coding tricks like Ipsum is that there's no step-by-step building of knowledge. So, to make up for this, I've put together a list of my favorite tutorials (disclaimer: Ipsum does not claim ownership of or affiliation with any of these sites) for anyone who's interested in taking a look.

For those new to css...
VISIT» Spud's CSSish is a must. This is by far the best guide through the basics that I've seen. It walks through not only the many stylistic components of CSS, but also a brief introduction to CSS itself, fancy jargon included.

VISIT» Thinkup's Neopets Code Reference is fantastic for looking up code. It's an extremely comprehensive list with just about every piece of CSS that will ever be seen anywhere. If you're ever wondering what a specific property does, this is the place to go.

Nifty Things

VISIT» Dark's CSS|Guide, although that might be a misnomer. It's more of a collection of everything Neopets-related - removal codes, filter tricks, etc. - that you're likely to be interested in. A resource to keep in mind while coding that userlookup or gallery.

Staff

The Ipsum staff regularly write articles for the site. Because they specialize in different things, you can tell who wrote what by the contact listed at the bottom of every article. We're more than happy to answer questions, but are busy people too - who are always willing to take any offered cookies. Nom.

Alle (allarice)

Alle is a high school student living on the east coast, making her time zone NST+3. She loves everything HTML/CSS, is somewhat interested in graphics, and developed a deep all-encompassing hatred of Java after a year of computer science. Ick. Since you're probably wondering about her qualifications (and sanity) at this point, you can see some of Alle's layout work here, there, somewhere, and everywhere.

Elisha (thebeast0_0)

Hellooooo! My name is Elisha, your typical 15-year-old Neopets-addicted incredibly beautiful girl. While I do enjoy logging onto Neopets each and every day, there are many other things in life that completely hold my love. Music, being one of them. I play seven different instruments and love them all. I live three hours ahead of NST (Yep, I tend to get ahead in life. *chuckles*). The proof that I am, indeed, a CSS'er, can be found here: Bam, Kapow, Woopwoop.

Zephyr (teatimesuffering)

Hello, my name is Zephyr, or just Zeph if you like. I don't have too much to say here, I don't like to talk about myself too much. I'm about to start studying games development. Yes, you know. Video games. I like to think I can make okay graphics, and I enjoy writing quite a lot more than the average person. I also deeply love cardistry, card flourishing, and 'magic tricks'. I'm still yet to meet another card flourisher on neo, though. b: Anyway, some examples, if you're interested: time for tea.

Apply

Ipsum is currently on the lookout for staff. To keep this brief, we're generally looking for experienced coders who would be willing to write an article per week. If you're interested, contact Alle for more information.

Sitely

Link Back

While not required, a link back to Ipsum would be an awesome way to show appreciation (or just be awesome). Click on the buttons to see who made them!

Affiliated With

Contact to become affiliated.

Neopets coding tips, tricks, articles from doubleSTANDARD
Listed At

Credits

Because Ipsum didn't make everything, much as we wished we did. Thanks to NeoMallers for the counter and pianite's amazing skills for the like button. And button credits, from left to right, go to myself, Hungry, and Seasonal.




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-2014.
® 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