I got some code from OggieDoggie_!
Last updated: October 2011
Added tips for creating the "reusable" blog.

Welcome to OggieDoggie's code templates. These plain jane, unadorned, code-only table and div code templates are ready to add to your design. Make just a few modifications to percentages and they're working for you and ready to customize to fit your vision. The buttons below can be customized to your heart's content by changing the images, the height and width, the fonts and font size. There are also some miscellaneous codes that include Hover Image Changes and Reusable Blog Space--great for the guild layouts.

All of this is very generic code so there is no need to credit me, but a link back to this page would be appreciated. If there are other kinds of templates you'd like to see, please neomail rita1111.

Text link:
Image link: I got some code from OggieDoggie_!

Multi-column Table Templates :|: Multi-column Div Templates :|: CSS Buttons :|: Miscellaneous Code :|: Blogs

Multi-column Table Templates To menu

Two-Column Left Sidebar Table Template (adjust percentages to suit your taste)

Column One Column Two

Two-Column Right Sidebar Table Template (adjust percentages to suit your taste)

Column One Column Two

Three-Column Table Template (adjust percentages to suit your taste)

Column One Column Two Column Three

Multi-Column Table Template (Adjust td widths to suit. Add as many td tags as you need.)

Column One Column Two Column Three Column Four Column Five Column Six

Multi-column Div Templates To menu

Two-Column Left Sidebar Template

Column One
Column Two

Two-Column Right Sidebar Template

Column One
Column Two

Three-Column Two-Sidebar Template

Column One
Column Two
Column Three

CSS Buttons To menu

These are nice CSS hover buttons in two styles: horizontal and vertical. Change size and color to suit your taste.

Horizontal version. Change size and color to suit your taste.

Page 1 Page 2 Page 3 Page 4 Page 5

Vertical version. Change size and color to suit your taste.

Page 1 Page 2 Page 3 Page 4 Page 5

Change height, width, font and font size, background-color and color and images to suit your taste. NOTE: with CSS buttons, be sure to include the cursor change so visitors will recognize the button is a link.


Button Label
Button Label
Button Label

Button Label

Button Label

Miscellaneous Codes To menu

Hover Image Change

Change height, width and images to suit your taste.

Hover Testing


Opacity Hover Testing

This code no longer works on any Neopets' pages except for guilds. Sure wish I understood TNT's reasoning.


Avatar Block

Change avatar image URL to match your choice.

Avatars


Current
Fav

Working
Toward

Most
Recent

Fixed Position Sidebar Menu

This CSS page code will create a left content area with a right-side fixed-position menu. In other words, the menu will stay in the same position on the page while the user scrolls down your content. (This is whole-page code and the visual demo below has been altered so it will work on this page without breaking it. The attached code will work as expected.

A Faerieland Bedtime Story

As evening fell on Neopia Central, it was time for Kora the Poogle's nightly bedtime story. Her mother Eppa knew an endless supply of bedtime stories, for she'd loved them since her youth. Of all the stories Eppa knew, Kora's favourites were the ones about the faeries. "Mum, mum!" Kora pleaded, "Please tell me a faerie story...

Which of the faeries would you like to hear about tonight, darling?" Eppa asked.

Oh let me see," Kora mused. "As you know, my favourite is the Space Faerie. But you told me a story about her for bedtime last night. Hmmm... I think I'm in the mood to root for the bad guy. How about a story about a dark faerie? Why yes, I think that a story about a dark faerie would suit me nicely.

Okay dear, I think that can be arranged." Eppa thought for a moment, then began: "Alright, well our story this evening begins, not in Faerieland, but rather on Mystery Island, with a Kougra named Raitorn. Having graduated first in his class at the Training School, Raitorn soon began a great career as a Battledome combatant...

But mum," Kora interrupted, "Why haven't I heard of him?

Well you see honey," Eppa explained, "this story takes place a long, long time ago, far before your time. This story is actually an old legend, which has been passed down for many generations.

Oh, I see," Kora said.

Link 1
Link 2
Link 3
Link 4

Blog Codes To menu

Simple Blog

Change height, width, top and left to suit your taste.

Content here

Content here

Content here

Content here

Content here

Content here

Content here

Simple Blog with Background Image

Change height, width, top and left to suit your image.

Your text goes here.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis aliquet tempor lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum sodales tempor neque. Integer nec elit et metus hendrerit adipiscing. Aenean a magna. Quisque condimentum nulla in nisl. Ut sodales, purus non rhoncus posuere, ligula erat pharetra tortor, quis porta mauris mi et purus. Aenean eu sem sit amet lectus dapibus elementum. Suspendisse tincidunt euismod enim. Vestibulum lorem leo, ullamcorper eget, gravida in, volutpat ac, dolor. Maecenas velit lectus, ultrices sed, gravida ac, egestas quis, arcu. Sed tortor neque, sodales ut, commodo viverra, ultrices et, odio. Nullam orci dolor, accumsan vel, interdum ut, dignissim a, lorem.

Some "Reusable" Blog Space

This is NOT code for the HTML/CSS newbie. Tackle at your own risk.

Some tips regarding creating "reusable" blogs:

  1. Create a container for ALL your content. (Let's call this blogcontainer.) Relatively position this container on the page: position: relative;. Reasoning: Using position: relative; ensures the page is displayed correctly and that the TNT code following your code (the copyright info) will remain at the bottom of the page where it's supposed to be.
  2. From now on, all positioning INSIDE the blogcontainer will be absolutely positioned and based on the edges of your container.
  3. Put your page header divs and page navigation divs INSIDE the blogcontainer created above. Absolutely position these elements.
  4. Create another container div for the actual content of the "pages." (Let's call this container mycontent.) The height and width of mycontent MUST be smaller than that of blogcontainer, and must take into account the other elements displayed above, below and/or to the sides of mycontent.
  5. Mycontent is the div on which you apply overflow: hidden; to hide all the extra "pages" you don't want seen until the link is clicked upon.
  6. Inside the mycontent div is where you place all the sections of the "pages" you have to display, so create a separate div for each section, let's call it section. In your styles, add overflow: auto; to the class defining section.
  7. To this point you have the following layout:
    • div id="blogcontainer
    • div id="pageheader" /div
    • div id="nav" /div
    • div id="mycontent
    • div class="section" /div
    • div class="section" /div
    • div class="section" /div
    • /div (this closes the mycontent div)
    • /div (this closes the blogcontainer div)
  8. This is the bare bones of a "reusable" (non-full-page) blog. It can be customized in many different ways, putting your nav at the top, to either side or the bottom.
  9. If you want, you can place any image either as a body background, or as a background to blogcontainer or mycontent

Welcome

Click on the links to the left and watch the content in here change.





Chitchat

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

Links

This could be the links info

My Account
Pet Central
Explore
Games

Guild News

This, of course, is all about guild news.



More "Reusable" Blog Space with Background Image

This is NOT code for the HTML/CSS newbie. Tackle at your own risk.

Welcome

Click on the links to the left and watch the content in here change.


Chitchat

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

This is a bunch of text just saying anything you need it to say. It could be links, guild chat, guild news, about me info or anything you want to say.

Links

This could be the links info

My Account
Pet Central
Explore
Games

Guild News

This, of course, is all about guild news.

Full-page "Reusable" Blog Space

This is NOT code for the HTML/CSS newbie. Tackle at your own risk.

PLEASE read the usage notes in the code below.


Thank you, LawDuckie, for this accolade.  You have me blushing!
Thank you, Lawduckie, for this accolade. You have me blushing. :)


Thank you, pound_side_account, for this award! *more blushing*




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