New Layout Customization Tutorial!

This thread is pinned.

page 1 of 4 1 2 3 4 Next » 93 total items

MapleRose

Retired Moderator

MapleRose

likes rainbows :D

Cancel

[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!

Sinever

Sinever

VK Freak

Cancel

thanks a lot maple-chan for the tutorial xD you're the best!

WATCH OUT! VK FREAK IS HERE! xD MUHAHAHAHAHA!

zaira

zaira

call me tuna!

Cancel

thanks for the tut! gotta fix mine now :D

Signature
	Image
soul-eater-shibusen sword-shana-lily tsubasa clampfans

Yamibou-Eve

Tagger

Yamibou-Eve

brace yourselves

Cancel

Thanks MapleRose for the detailed tutorial! ^______^

Tags don't fix themselves or disappear just bc you removed them >> Report@Tag Administration | Tagging Practices | Tagging Guidelines
my-maidenclamp-a-holictag-liciousSignature Image

Cancel

Thank you so much. ^__________^

THERE ARE SECRETS WHERE FAIRIES DON'T LIVE.
Saltici Comics : Salty: the Misunderstood Spider (updates every Monday)

ArtificialRaindrop

ArtificialRaindrop

We're All Mad Here.

Cancel

Thank you so much, MapleRose! This is extremely helpful! ^_^

Signature ImageYou can't live without the fire, it's the heat that makes you strong ~ Within Temptation, "Iron"
KHDownloads <-- Butterfly Chaser referred!

kayurachan

Retired Moderator

kayurachan

Mado&Fen are my Gods.

Cancel

*has headache while reading*
a-awesome! Now I have to force myself to learn css at last @_@

Signature
	Image
!Death to J-Rock scans! >.<
What is Kayurachan doing? Just see it on my userpage :3
Sheq says: XD one sec, eating an egg XP

Fran

Retired Moderator, Tagger, Linguistics

Fran

better than your faves tbh

Cancel

THANK YOU <3

Signature ImageLatest submission: Trouble Makers
tag-liciousvector-wallers
Lol omg, click on quote in guestbook instead of spamming your own stuff, SMH

sailorchiron

sailorchiron

Memories of Eliteness

Cancel

AWESOME! *offers chocolate cake* Here, you deserve this. =D

Ripping walls? You're headed to Banned-ville.
Signature Image

Tsumasaky

Tsumasaky

Live and Louder

Cancel

There is it!
Thx MapleRose! U r0x!

I will try to make my custom home page!

"Now I have to force myself to learn css at last @_@" [2]
^~^

Signature
	Image
FOLLOW-ME ON TWITTER

Cancel

oh... I have a question... what's #leaderboard? I've been messing around with it but I can't figure out what it does.

THERE ARE SECRETS WHERE FAIRIES DON'T LIVE.
Saltici Comics : Salty: the Misunderstood Spider (updates every Monday)

norine07

norine07

???? ???...

Cancel

thank you! <3

Signature Image

Aiira

Linguistics

Aiira

SOON..

Cancel

I have a question.
the side bar where the avatars are placed for people who signed your guestbook.
how do you change the colour of that part of the layout?
I can't seem to figure it out.
Please help me if you can.
Thank you very much :]

Signature
	Image
CHERISH yesterday
DREAM tomorrow
LIVE today

akeedacrest

akeedacrest

Sunken into real life~

Cancel

same problem with aiiroprincessnoel. I managed to changed it the first time but then it reverted back to blue.. +_+
and my image doesn't seem to upload.. all is black.. help! X3

great tutorial, maplerose-san. :D

Support your kings at Chamber of Kings

trofikabinet

trofikabinet

NOT a douche canoe

Cancel

yaay, the tutorial is out ^^
Thx Maple-san for your hard work :) This is gonna force me to learn CSS... finally xD

You and I...we're not real. We never were.

Gomen

Gomen

I'm HokaHoka

Cancel

Thanks for the tutorial =D
I will try it out^^

Signature Image

motogp

motogp

Snorlax

Cancel

I'll get a small tutorial up myself tommorow. Please wait :)

sailorchiron

sailorchiron

Memories of Eliteness

Cancel

Question: what do we modify to have the Tags Wallpapers Indy Art... a different color? I've gone through everything and can't figure it out.

Ripping walls? You're headed to Banned-ville.
Signature Image

Gomen

Gomen

I'm HokaHoka

Cancel

Ok I'm stupid and I can't make my layout -_-
I tried but I can't....so if someone could help me up and try to help me modify it =D...
Please? mLOLm

Signature Image

longhairgirl

longhairgirl

叫んでやるぜ!!

Cancel

Thank you for clearing things out :D
Still I'm so useless with web design T_T Wish there were a few developped styles already for me to choose (sorry for whining)

SweetMitsuki

SweetMitsuki

mitsuki.niwa

Cancel

I deeply appreciate the tutorial, helped me a lot ^^!
but... I really have a trouble when I tried to covering the links area, I did everything in the tutorial, but I didn't go well
could you help me?

Signature Image
tag-liciouss20-signaturestudiouserpageskindesignshispaniakatekyo-hitman-rebornyaoi-heavenvampire-knightjapanese

Cancel

Thank you very much for this tutorial! It has been very helpful but I have one question. How do you change the colour of the text in the sidebar? I only mean the text were it reads member, pageviews, member since and last online and the numbers beside them. I don't know how to explain it any better so I hope that you can make sense of it ^_^' . Thank you in advance!

merged: 10-27-2009 ~ 06:21pm
Thank you for your answer it helped me a lot ^__^ . But now I have come up with another question and I don't quite know how to explain it again but I hope you'll understand what I mean. When someone writes in your guestbook you can see that in the right side of your page is the avatar, name of the person and the date when it's been sent. So how do I change the background to a different colour than the rest of the content background? Now in my page they're all the same colour. And I'd also like to know that how do you change the colour of the guests name?

Oh,I almost forgot to ask that how can you make the advertisement next to the comment box disappear? Not all the ads but only that one.

  • Oct 25, 2009

Kagally

Kagally

?purple | hibari?

Cancel

are these mean by measure the height of this height?
please------------ please reply me!~

"Nature is the BEST! Why did we need to change everything?"
Signature
	Image
My Latest Submission: [Under da Sunlight]

Tiferet

Tiferet

????

Cancel

Question! How can I change the color of the comment box on my userpage? I can't seem to find the right code X_o

"You only live once, but if you do it right, once is enough." --Mae West
Signature
	Image

page 1 of 4 1 2 3 4 Next » 93 total items

Back to Userpage Customization | Active Threads | Forum Index

Only members can post replies, please register.

This site uses cookies. By continuing to browse the site you are agreeing to our use of cookies. Read more.