Last updated: September 2009
Updated for all filter changes.
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 me.
Text link:
Image link:
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
Two-Column Right Sidebar Template
Three-Column Two-Sidebar Template
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.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} a.navh, a.navh:link, a.navh:visited {display:block; width:75px; height:25px; background:#60844d; border:1px solid #000000; margin-top:2px; text-align:center; text-decoration:none; font: 12px verdana, arial, geneva, sans-serif; color:#000000; line-height:25px; overflow:hidden; float:left; margin-right: 2px;} a.navh:hover {color:white; background:#000f7e;} a.navh:active {color:white; background:#cc0000;} .clr {clear: both;}Vertical version. Change size and color to suit your taste.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} a.nav, a.nav:link, a.nav:visited {display:block; width:75px; height:25px; background:#60844d; border:1px solid #000000; margin-top:2px; text-align:center; text-decoration:none; font: 12px verdana, arial, geneva, sans-serif; color:#000000; line-height:25px; overflow:hidden;} a.nav:hover {color:white; background:#000f7e;} a.nav:active {color:white; background:#cc0000;} Page 1 Page 2 Page 3 Page 4 Page 5Change 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
Miscellaneous Codes To menu
Hover Image Change
Change height, width and images to suit your taste.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} #a#info {background-image:url(http://images.neopets.com/items/toy_blueusul.gif); width:80px;height:80px;display:block;} a#info:hover {background-image:url(http://images.neopets.com/items/ala_sword_2.gif);} Hover TestingAvatar Block
Change avatar image URL to match your choice.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} #avatarcontainer { width: 260px; height: 150px; text-align: center; vertical-align: middle; position: relative; top: 20px; } .avatar { float: left; padding: 0 18px; } .title {text-align: center; font: 12pt/1.3em verdana, arial, geneva, san-serif; color: black; font-variant: small-caps;}Avatars
Current
Fav
Working
Toward
Most
Recent
Blog Codes To menu
Simple Blog
Change height, width, top and left to suit your taste.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} body {} #container {position: relative; top: 0px; left: 0px; width:100%; height: 200px;} #blog {position: absolute; top:35px; left: 90px; width: 150px; height: 150px;border: 2px dotted red;overflow: auto;}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.
#empty {} #noproblem{ //position:absolute;//display:none;//visibility:none;//opacity:0;//margin:none;//outline:0px;} #blogbkgd1 { background: url(http://i239.photobucket.com/albums/ff190/rita11_11/blogs/harristree.jpg) no-repeat; width: 600px; height: 434px;position: relative; top: 0px; left: 0px; } #blog1 { overflow: auto; width:195px; height: 326px; position: absolute; top: 50px; left: 55px; scroll-bar: #e3e0e0; scrollbar-arrow-color:#000000; scrollbar-track-color:#cde3e8; scrollbar-face-color:#b4d1d8; scrollbar-highlight-color:#fdfdfd; scrollbar-3dlight-color:#a9a9a9; scrollbar-darkshadow-color:#777777; scrollbar-shadow-color:#555555;} .inner { padding: 8px; }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.
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.
More "Reusable" Blog Space with Background Image
This is NOT code for the HTML/CSS newbie. Tackle at your own risk.
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.
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, pound_side_account, for this award! *more blushing*