NineChime forum

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.

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.

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

Last edited by Rage Inflictor (05-25-2009 20:28:59)

NineChime forum

#1 05-04-2009 08:05:35

Tutorial on skinning/editing templates?

#2 05-04-2009 15:02:06

Re: Tutorial on skinning/editing templates?

#3 05-25-2009 20:26:12

Re: Tutorial on skinning/editing templates?

Code:

Code:

Code:

Board footer