NineChime forum
Furry stuff, oekaki stuff, and other stuff.
You are not logged in.
- Index
- » Wacintaki support
- » Tutorial on skinning/editing templates?
Post a reply
Topic review (newest first)
- Rage Inflictor
- 05-25-2009 20:26:12
Code:
/*
/* Links */
a:link {
text-decoration: none;
color: #5AE100;
}
a:visited {
text-decoration: none;
color: #5AE100;
}
a:hover {
text-decoration: line-through;
color: #B4FF3C;
}
a:active {
text-decoration: none;
}This section allows you to customize your links. Edit the colour hex codes to whatever you desire. :] Change a:hover { to get a mouseover effect.
Code:
body {
margin: 0;
padding: 0;
background-color: #000000;
background-image: url("toxic.png");
background-attachment: fixed;
}
hr {To add a background image, change background-image: url("toxic.png"); Make sure to put the right location of your image where it says "toxic.png".
Code:
/* Header */
#banner {
color: ;
background-color: ;
border-width: 0px 0px 0px 0px;
border-color: #C4FE98;
background-image: url("backgroundstar.png");
border-style: solid;
}
.postheader {
/* Header for each post */
padding: 2px;
text-align: left;
color: #C4FE98;
background-color: ;
background-image: url("backgroundstar.png");
font-size: 10pt;
border-width: 1px 1px 1px 1px;
border-color: green;
border-style: solid;
}
.postmain {
/* Container for each post */
vertical-align: top;
padding: 2px;
background-color: ;
background-image: url("backgroundstar.png");
border-width: 0px;
border-color: green;
border-style: solid;
}
.postdata {
/* Picture for each post */
text-align: center;
background-color: ;
background-image: url("backgroundstar.png");
}
.commentmain {
/* Container for each comment */
margin: 0 0 0 10px;
}
.commentheader {
/* Header for each comment */
padding: 1px 0 2px 10px;
text-align: left;
background-color: ;
background-image: url("");
font-size: 10pt;
border-width: 1px;
border-color: green;
border-style: solid;
}
.commentinfo {
/* Inherits from commentheader */
color: #C4FE98;
font-size: 11pt;
}
.commentdata {
/* The actual comments */
margin-bottom: 2px;
padding: 0 10px 0 10px;
text-align: left;
vertical-align: top;
color: #C4FE98;
background-color: ;
background-image: url("backgroundstar.png");
font-size: 10pt;
border-width: 0 0 0 0;
border-color: green;
border-style: solid;
}
#footer {
/* Copyright */
padding: 0px;
text-align: right;
background-color: ;
background-image: url("backgroundstar.png");
font-size: 7pt;
border-width: 1px 1px 1px 1px;
border-color: green;
border-style: solid;
}
.chatinfo {
text-align: center;
background-color: ;
background-image: url("backgroundstar.png");
border-width: 1px 0 1px 0;
}
.pchatdialog {
font-family: "CAC Futura Casual";
font-size: 13pt;
}That is just random examples of adding images to different parts of your oekaki. You can add an image to anything. :] Sorry this is kind of lame, typing with a cast on sucks 
- Waccoon
- 05-04-2009 15:02:06
I don't have a tutorial, but the board is styled almost exclusively with CSS. If you're careful to make all your changes to the bottom 2/3 of the PHP template file, there shouldn't be too many issues.
For more information on how to use CSS to change colors and backgrounds, try visiting W3Schools. That site has a complete, well-organized list of all the CSS properties and how they work.
However, if you don't have a PHP web server set up on your own computer, you'll have to upload templates to your web host via FTP, and that can get tiring while testing. A CSS extension for your web browser, such as EditCSS for Firefox, can make realtime editing of CSS much easier. You can then copy/paste those changes into your PHP template before uploading it to the server.
- Kym
- 05-04-2009 08:05:35
I'm looking to change the oekaki template quite heavily but before I jumped in there, wanted to know if anyone had any suggestions as to how the template system is handled and whether anyone knows any guides/tutorials out there that pertains to skinning the Wacintaki.