New header, new colors!

Oct 18, 2008 12:50

It was a long time I wanted to make a Maison Ikkoku header, and now i did it!

The layout is always the same by
, but I re-customize it to fit the header.



HEADER CREDITS
Textures:
° Scrapbook Textures by Sarahsaloser.
° 22 vectorized icon textures by cielo-gris.
° Big textures by elrawien.

Brush: Big Splash PSP Brushes by Sumse.

Font: Chinese takeaway

LAYOUT CREDITS



Texture: Textures number 5 by seriouslywir.


INSERT AN IMAGE NEAR THE SIDEBAR TITLES
I don't know if it works on all layouts because I tried without really knowing what I was doing!
Minty Peach CSS codes are very simply to understand becouse she adds titles like "sidebar", "maincontent"... so you almost know "which codes changes what"...

- So... first of all upload a small image (on photobucket or something similar), mine was 22x18...
- Then go to CSS customize and search something like this:

li.sbartitle (=sidebar titles options)
{
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding-left: 25px;*
padding-bottom: 2px;
[...]

- Now insert or change these:

background-color:; /*no backgound color means it will show the sidebar backround*/
background-image: url('http://yourimage.png'); /*the image you want to insert*/
background-repeat: no-repeat; /*if you want to repeat or no the image*/
background-position: center left; /*position of you image*/
}

If you would more information about backround image and it's position: Css.flepstudio.org/css-background (it's in Italian, but code are the same everywhere :P)

- in the end, if the title goes on the image, you could move the image (backround-position) or move the title (text padding *)


RE-SIZE USERPICS AND FRIENDSUSERPICS
_oluha_ lyout has this option, and I like it a lot!
So I check out this layout (always Minty Peach) and I found the codes that re-size userpics and friends-userpics:

- Search in your layout this part (it's in maincontent):

.userpic {
position: relative;
float: left;
background-color: ;
background-image: url('http://...');
[...]
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
}

- Under these codes you could paste this:

.userpic img, .userpicfriends img {
background-color: #ffffff !important;
width: 50px; /*insert your value*/
height: 50px; /*insert your value*/
padding: 5px;
border: 1px dashed #eeeeee; /*insert your values*/
}

- That's all! :o

resources, layout

Previous post Next post
Up