S1 style layout tutorial (or something like that)
I know i neglect this way too much. But sometimes my inspiration goes away...and never comes back >_>;;
Anyway i have a Kana layout to post someday soon, and some layouts that are yet to be coded, so expect some updates soon ne :3
Also, as i promised...like...months ago lol, i am here to write a tutorial about S1 style layouts. Ok so maybe this tutorial turns out in crap and you can't get a thing, but i will try it.
I won't write how to make the layout in photoshop (the graphics), maybe some other time, but since i think you can figure that out just by seeing an example, i will just jump to the coding~!
Tutorial for S1 style layouts.
These overrides WON'T work with SPONSORED + accounts.Only for basic and paid accounts.
As far as i know, this will work for Mozilla, Firefox, Internet Explorer and Opera (maybe other browsers too)
---------------------------------------------------
If you find this tutorial helpful, please COMMENT on this entry. I don't need any credit, all i ask is that you say you are using it, if it helped you, and all that jazz because, i don't make things for nothing right?RIGHT?Right. Let's go.
I will use colours with this tutorial. In my opinion, tutorials which have no colours to define the overrides different parts, are usually the ones that make you get lost. Let's see what can i do...
Overrides
---------------------------------------------------
FRIENDS_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=FRIENDS_WEBSITE
GLOBAL_HEAD<=
<=GLOBAL_HEAD
CALENDAR_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=CALENDAR_WEBSITE
LASTN_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=LASTN_WEBSITE
---------------------------------------------------
Explanations
Please read carefully the overrides.
This color overrides, are your livejournal views overrides.
# LASTN - your recent entries page
# FRIENDS - your friends page
# CALENDAR - your calendar page
We need to put the same overrides on each of the three pages if we want the layout to be the same in all our journal.
Put your header image url where it says "HEADER IMAGE HERE".
Also, that's where your sidebar content will be placed. I wrote indications for you to notice where everything must be placed, like i typed Starts the SIDEBAR overrides where the sidebar stuff must be placed.
The title of the different sections of your sidebar is written into the "p class" thingies.
This color overrides, are your header positioning. Don't touch them, there is no need to do it.If you do it you will most likely screw everything up.
This color overrides, customize your sidebar looks, as i wrote in the overrides.
top:429px; →This moves your sidebar up or down.Higher number, the sidebar goes down.
left: 0%; →If you want the sidebar to be on the left, then the number must be "0", if you want to push it to the right then change the margin left numbers←
margin-left: -45px; →Higher number, the sidebar goes to the right. Negative numbers push it to the left.
width: 106px; →The width of your sidebar.
height: auto; → If you want it to automatically stretch down as you type, let this in auto.
visibility: visible; → For the sidebar to show up.
z-index:2;
font-size:9pt; →The font size of your sidebar.
text-align:left; → Aligns the text on your sidebar.
color: #C8B690; →The color of the text on your sidebar.
This color overrides, are your background image and it's placement.
background-color:#D9C8A3; → Self explanatory.
background-image: url(BACKGROUND IMAGE HERE); →You must place your background image url there.
background-attachment: scroll; →Don't touch. This makes the background scroll with the main layout. If it didn't, then everything would move down except for the background image...and we don't want that, right? Right.
background-repeat: repeat-y; → Makes the background repeat down. If it was "x" it would repeat to the right, not down.So don't touch this neither XD.
background-position: top left; → This makes your background start from the top left. Don't touch this neither~
margin-top: 455px; →THIS IS NOT the margin of the background, but the TOP MARGIN of your ENTRIES.Higher number, the entries will go down.
overflow-x: hidden; → Don't touch this.This makes the horizontal scrollbar disappear so the layout won't scroll horizontally.
This color overrides, make the username links of the people that post on your friendslist other color. If you want them red, then you would put the hexadecimal code for red on it. If you want the hover other color, then you would put another color. If you delete all of that, they will appear black.
This color overrides, are your entries. I will explain the things you can change only.
width: 295px; →Your entries width.
left: 420px; →Don't touch this.
margin-left: 100px; →Your entries margin.Higher number, the entries will go to the right.
margin-right: 100%; → Don't touch this.
z-index: 4; → Don't touch this.
body, table, td, font, div, p
font-family: Arial, Times new roman, Palatino Linotype;
font-size: 9pt;
letter-spacing: 0pt;
color: #FDFAE5;
↑↑↑↑This changes how your entries font looks like.
.caption
color: #AA9D77;
font-size: 13pt;
font-family: Tahoma, Palatino Linotype, Century Gothic;
font-weight: normal;
letter-spacing: 0pt;
text-transform: none;
↑↑↑↑This changes how the TITLE of your entries looks like.
.index
color: #AA9D77;
font-size: 15pt;
font-family: arial , Palatino Linotype, Century Gothic;
font-weight: normal;
letter-spacing: 0pt;
text-transform: none;
↑↑↑↑This changes how the DATE AND TIME of your entries looks like.
For CSS help to customize the fonts and all the cool stuff you can do, go HERE.
This color overrides, change how your links and your "comment" links look like. You can customize them with the help of the link above. Hover is when you put your mouse over the link.
I think that's all you needed to know about the overrides. now all you need to do is practice. The first layout you make might not look good, who knows, but then again all you need is practice. You need to literally STUDY the overrides. Once you have made many layouts, you already know where to put everything and what does all of that coding mean.
DON'T.BE.AFRAID. of all of those overrides. I was at first, then i gave up on making layouts, but then i kept trying it and i learned, searched for tutorials and tips...and so on.
If you have any doubts, feel free to ask me. But first make sure you have read everything carefully and you have read my FAQ.
For more tutorials and tips you can always go HERE.There you have everything you need to know.
Also remember that you need to list a website on your userinfo for any layout to work.
Good luck with your layouts~!!
Anyway i have a Kana layout to post someday soon, and some layouts that are yet to be coded, so expect some updates soon ne :3
Also, as i promised...like...months ago lol, i am here to write a tutorial about S1 style layouts. Ok so maybe this tutorial turns out in crap and you can't get a thing, but i will try it.
I won't write how to make the layout in photoshop (the graphics), maybe some other time, but since i think you can figure that out just by seeing an example, i will just jump to the coding~!
Tutorial for S1 style layouts.
These overrides WON'T work with SPONSORED + accounts.Only for basic and paid accounts.
As far as i know, this will work for Mozilla, Firefox, Internet Explorer and Opera (maybe other browsers too)
---------------------------------------------------
If you find this tutorial helpful, please COMMENT on this entry. I don't need any credit, all i ask is that you say you are using it, if it helped you, and all that jazz because, i don't make things for nothing right?RIGHT?Right. Let's go.
I will use colours with this tutorial. In my opinion, tutorials which have no colours to define the overrides different parts, are usually the ones that make you get lost. Let's see what can i do...
Overrides
---------------------------------------------------
FRIENDS_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=FRIENDS_WEBSITE
GLOBAL_HEAD<=
<=GLOBAL_HEAD
CALENDAR_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=CALENDAR_WEBSITE
LASTN_WEBSITE<=
Navigation
Entries
Profile
Friends
About
Keep adding text to your sidebar if you wish.
<=LASTN_WEBSITE
---------------------------------------------------
Explanations
Please read carefully the overrides.
This color overrides, are your livejournal views overrides.
# LASTN - your recent entries page
# FRIENDS - your friends page
# CALENDAR - your calendar page
We need to put the same overrides on each of the three pages if we want the layout to be the same in all our journal.
Put your header image url where it says "HEADER IMAGE HERE".
Also, that's where your sidebar content will be placed. I wrote indications for you to notice where everything must be placed, like i typed Starts the SIDEBAR overrides where the sidebar stuff must be placed.
The title of the different sections of your sidebar is written into the "p class" thingies.
This color overrides, are your header positioning. Don't touch them, there is no need to do it.If you do it you will most likely screw everything up.
This color overrides, customize your sidebar looks, as i wrote in the overrides.
top:429px; →This moves your sidebar up or down.Higher number, the sidebar goes down.
left: 0%; →If you want the sidebar to be on the left, then the number must be "0", if you want to push it to the right then change the margin left numbers←
margin-left: -45px; →Higher number, the sidebar goes to the right. Negative numbers push it to the left.
width: 106px; →The width of your sidebar.
height: auto; → If you want it to automatically stretch down as you type, let this in auto.
visibility: visible; → For the sidebar to show up.
z-index:2;
font-size:9pt; →The font size of your sidebar.
text-align:left; → Aligns the text on your sidebar.
color: #C8B690; →The color of the text on your sidebar.
This color overrides, are your background image and it's placement.
background-color:#D9C8A3; → Self explanatory.
background-image: url(BACKGROUND IMAGE HERE); →You must place your background image url there.
background-attachment: scroll; →Don't touch. This makes the background scroll with the main layout. If it didn't, then everything would move down except for the background image...and we don't want that, right? Right.
background-repeat: repeat-y; → Makes the background repeat down. If it was "x" it would repeat to the right, not down.So don't touch this neither XD.
background-position: top left; → This makes your background start from the top left. Don't touch this neither~
margin-top: 455px; →THIS IS NOT the margin of the background, but the TOP MARGIN of your ENTRIES.Higher number, the entries will go down.
overflow-x: hidden; → Don't touch this.This makes the horizontal scrollbar disappear so the layout won't scroll horizontally.
This color overrides, make the username links of the people that post on your friendslist other color. If you want them red, then you would put the hexadecimal code for red on it. If you want the hover other color, then you would put another color. If you delete all of that, they will appear black.
This color overrides, are your entries. I will explain the things you can change only.
width: 295px; →Your entries width.
left: 420px; →Don't touch this.
margin-left: 100px; →Your entries margin.Higher number, the entries will go to the right.
margin-right: 100%; → Don't touch this.
z-index: 4; → Don't touch this.
body, table, td, font, div, p
font-family: Arial, Times new roman, Palatino Linotype;
font-size: 9pt;
letter-spacing: 0pt;
color: #FDFAE5;
↑↑↑↑This changes how your entries font looks like.
.caption
color: #AA9D77;
font-size: 13pt;
font-family: Tahoma, Palatino Linotype, Century Gothic;
font-weight: normal;
letter-spacing: 0pt;
text-transform: none;
↑↑↑↑This changes how the TITLE of your entries looks like.
.index
color: #AA9D77;
font-size: 15pt;
font-family: arial , Palatino Linotype, Century Gothic;
font-weight: normal;
letter-spacing: 0pt;
text-transform: none;
↑↑↑↑This changes how the DATE AND TIME of your entries looks like.
For CSS help to customize the fonts and all the cool stuff you can do, go HERE.
This color overrides, change how your links and your "comment" links look like. You can customize them with the help of the link above. Hover is when you put your mouse over the link.
I think that's all you needed to know about the overrides. now all you need to do is practice. The first layout you make might not look good, who knows, but then again all you need is practice. You need to literally STUDY the overrides. Once you have made many layouts, you already know where to put everything and what does all of that coding mean.
DON'T.BE.AFRAID. of all of those overrides. I was at first, then i gave up on making layouts, but then i kept trying it and i learned, searched for tutorials and tips...and so on.
If you have any doubts, feel free to ask me. But first make sure you have read everything carefully and you have read my FAQ.
For more tutorials and tips you can always go HERE.There you have everything you need to know.
Also remember that you need to list a website on your userinfo for any layout to work.
Good luck with your layouts~!!