[last updated 09-14-2010]
Hi and welcome to the MT layout tutorial. This tutorial is divided into two parts. Part One is the simple layout tutorial, where you just need to upload an image, and change the colours. Part Two is the advanced tutorial, for those who want to do more CSS-customization. Part Three is the CSS for colors.
Before I start though, a note on editing the CSS: instead of editing directly in the box, I'd copy+paste it into a text editor, and copy+paste back into the box when you're ready to test. I think whenever you upload an image into the skinbuilder, the CSS resets, and you don't want to lose your work >__<
If you'd like to learn CSS, Here's a good site to get you started
If you don't want to have to save and tweak all the time, there's a Firefox extension called Firebug that lets you live-edit and preview without having to reload the page and resave your CSS all the time.
Troubleshooting
If the image doesn't seem to update when you re-upload the image. Refresh the page. If that doesn't work, clear your browser cache, and refresh again. (if you use Firefox, do CTRL+SHIFT+R ) If that doesn't work, try uploading the image again. If that still doesn't work, then you might have to just wait a bit for the server to update the file. There's a server delay of about an hour for the image to update due to the server being in different locations.
If you mess up and need to reset your userpage, go to the "Advanced CSS" tab, and delete everything in that box.
If you can't switch to the "Advanced CSS" tab at all, it means you put in something that doesn't belong in CSS code (or you forgot a ; or {} somewhere). In this case, please contact a moderator and get them to reset your CSS
------------------------------------
Part One - Simple
The skinbuilder cuts stuff and puts them in place for you. So all you need to do, is to upload an image, and change some colours.
The easiest way is to upload an image where there's solid colours on both the left and right side. See example. Make sure your image is more or less in the middle. Leave some room on the left, and some room on the right.
What you'll get is that the top of the image becomes your header, and the bottom 160px of the image becomes the footer (this is what the skinbuilder creates for the header). There is a limit to the size of the image, I'm not sure exactly what they are, but if it's smaller than 1000px wide and 800px high, you should be fine =3
Once you have your image. Go to your page, then click the "edit style" button (under your icon/avatar). You'll see a box come up. Click on the "Background" tab, and you'll see a place to upload your image.
When you click "Save", the page will reload with your new image displayed. Then you can move on to changing the colours!
Click "Edit style", and the "Colors" tab, and put the hex codes of the colours in there. If you don't know hex code, click on the box, and a color-picker will show up and help you =3
Click "save", and you're done!
There are only a few fields to customize the colors right now. For more customization, go to Part Three for the CSS codes to change other colors. Sheqel will add more customization areas in the editor soon!
** Trouble-shooting **
If your header image is slightly cut off (For example, like this), don't worry, click on
"Edit style" again, then click the "Advanced CSS" tab, and add this at the end:
Quote: #header h1 {
width: ***px;
}
Where the *** is the width of your image.
-----------------------
Part Two - Advanced
What happens if you want something more complex? For example, you want area under the tabs and your navigation bar to be coloured like in the default skin? It's still do-able, but you need to place things to make sure they repeat properly.
What you need:
* Photoshop, or equivilent image-editing software (PaintShop, GIMP etc)
* example image (PSD or JPG)
* text editor
* patience XD
Download the example image (PSD or JPG, it doesn't matter, it's just going to be a template to tell you what goes where)
You only need one image (no need to create slices like before). The skinbuilder will slice the images for you. The bottom 160px will be used for the footer, and the rest will be used for the header.
The skinbuilder will also cut pieces out of your image to be used for tiling, so you need to make sure things are where they're supposed to be, in order for the tiles to be smooth.
Open the example image, the second layer in the PSD marks the area that needs to be tile-able horizontally. If you don't have the PSD, see what I mean on the jpg
If you follow the placements of the example image, everything should be all good. Again, click "Edit style", then "Background" to upload your image. Once you have that, go to edit the colours.
------------
However, if you want a bigger area on your header, you need to touch the CSS a bit to get the tiled parts where they're supposed to be.
I'll use my page as an example (that I'm testing on botfreya XD). The image part of the header is about 440px tall ( see the original image I used) Here's what it looks like after I upload the image. You'll see that the right side doesn't tile properly. You'll need to use CSS to make it tile better.
After you uploaded the image, go find the sliced background image. It should be located at http://static.minitokyo.net/skins/USERNAME/bg.png (where USERNAME is your username. For example, mine is at http://static.minitokyo.net/skins/MapleRose/bg.png )
You'll see a thin and tall image with random patterns on it. Copy that image (or save it), and open it in an image-editing program. And measure the number of pixels from the top of that image to these places:
A - to the top of the first nav-bar
B - to the top of the first of the tabs
C - to the top of the second nav-bar
D - to the top of the second of the tabs
It's probably confusing to read that XD I don't really know how to explain it... so HERE'S AN IMAGE! (image not to scale)
Remember those pixel values. You'll need them for the following CSS:
Quote:
#nav-bar { background-position: 0 -AAApx; }
#backbone { background-position: 0 -BBBpx; }
#nav-bar ul { background-position: 100% -CCCpx; }
#tabs { background-position: 100% -DDDpx; }
Where the AAA, BBB, CCC, DDD are the respective pixel values. Don't forget the negative sign!
If it doesn't work the first time, try adjusting the numbers a little bit. It takes a bit of patience. Make sure to save your CSS in a text editor, in case things mess up >__<
--------------
Part Three - CSS for colors
These are for more color customizations. You can add them into your "Advanced CSS" field for more customized colours. All the colors are in hexidecimal. Replace "xxxxxx" with the code. Text between /* and */ are comments
Check out this thread for stuff I may not have
included XD
Quote:
/* GENERIC */
/*background color*/
body { background-color: #xxxxxx;}/*background colour of content part, should already be generated */
#content { background-color:#xxxxxx; }/*quote*/
blockquote {
background-color: #xxxxxx; /*quote background */
border-color: #xxxxxx; /*quote border */
}
blockquote p, blockquote .name { color:#xxxxxx; } /*quote text*//*quoted quote (double quote)*/
blockquote blockquote, blockquote blockquote blockquote blockquote {
background:#xxxxxx; border-color: #xxxxxx;
}/*headings*/
#content h1 { color: #xxxxxx; }
#content h2 { color: #xxxxxx; }/*by default, the <b></b> and <i></i> tags are set to normal font style, you'll need to override them*/
b { font-weight: bold; }
i { text-decoration: italic; }/*Odd rows*/
.odd, .odd td { background: #xxxxxx; }/*If you use tables in on your userpage*/
td { background: #xxxxxx; }
/* [note, if you want it to be same color as the page, use "background:none;" instead of "background:#xxxxxx"] *//*Links hover*/
a:hover {color: #xxxxxx;}
/*POSTS*/
/*Background of posts in Guestbook*/
#posts dd { background: #xxxxxx; }/**************
!NOTE! if you want the background on the left column (under the avatars) to be a different colour than the right side (like on the default layout)
You need to first make an image 250px wide (the height doesn't matter), filled with the colour you want your background to be
(for example, like this: http://static.minitokyo.net/posts2.png ), and upload it somewhere.
delete the "#posts dd { background: #xxxxxx; }" line, instead, put */
Quote: #posts { background:url("URL OF THE POST IMAGE") repeat-y #xxxxxx; }
/* where the "#xxxxxx;" is the colour you want the right side (where the post text is) to be. If you want it to be the same colour as the content, replace with "transparent" */
/* change colour of text of post body */
.post-body p {color:#xxxxxx;}/*Border dividing posts from each other*/
#posts dd {border-top:1px dotted #xxxxxx;}
/* [You can also change the size of the border, change the "1px" to a bigger number. Or if you want a solid border, replace "dotted" with "solid"] *//*Background under links in posts*/
#posts dd ul:last-child {background:#xxxxxx;}
/* [or use "background:none;" if you want it the same color as the rest of the post] *//*color small links in posts*/
#posts dd li a { color: #xxxxxx; }/* colour of links at top of post ("edit" "delete" etc) */
#posts dd ul:first-child a { color:#xxxxxx; }/* colour of links at bottom of post ("PM" "gallery" etc) */
#posts dd ul:last-child a { color:#xxxxxx; }/* time stamp on posts */
.post-stamp, .post-stamp * {color:#xxxxxx;}/* background colour of the bar at top of post (area under "edit" "delete" etc) */
#posts dd ul, #description ul:first-child { background: #xxxxxx; }/*comment textarea, "background" is the bg colour, "color" is the text color */
form input[type="text"], form input[type="password"], textarea, select, #login-form input[type="text"], #login-form input[type="password"] {
background:#xxxxxx;
color:#xxxxxx;
}/*FOOTER*/
/*Change footer height*/
#footer, #footer div { height: ***px; }
/* [*** = height of your footer. Max number recommended is 160px, since that's the height of your footer image] *//*footer link colors*/
#partners a { color: #xxxxxx;} /*Links to other sites*/
#copyright, #copyright a { color: #xxxxxx; } /*Links to FAQ etc*//*Sidebar menu*/
#menu a { color:#xxxxxx;} /*Link color*/
#menu a:hover { color:#xxxxxx; } /*Link hover color*//*Navbar and dropdown colors*/
/*top nav bar hover-over background and text colors*/
#nav-bar li:hover, #nav-bar a:hover {
background:#xxxxxx;
color: #xxxxxx;
}/*top dropdown background and text colors when you hover-over*/
#nav-bar li ul li:hover, #nav-bar li ul a:hover, #sections li ul li:hover, #sections li ul a:hover {
background-color: #xxxxx;
color:#xxxxxx;
}/*top dropdown background*/
#nav-bar li ul, #sections li ul, #login-form { background:#xxxxxx;}
/*top dropdown text colors*/
#nav-bar li ul a, #sections li ul a { color:#xxxxxx; }
/*TABS*/
/*link color*/
#tabs a { color:#xxxxxx; }
/*hover-over background and text color*/
#tabs li:hover a {
background:#xxxxxx;
color:#xxxxxx;
}/*Scan link color*/
.scans p a { color:#xxxxxx; }/*Ad toggle tab thingy*/
#ad-toggle {background: #xxxxxx; }/*Featured box on front page background*/
#featured { background: #xxxxxx; }
--------------------
I'm sure I probably forgot something... so if anything is unclear, or if you'd like to know how to change the colour of an area, post in this thread =D
Happy customizing!
