Team 10 Layout -- Beginnings
Thursdays are such productive days for me. It's too bad I don't use them for better things. :X Homework, scans I promised, various things I said I'd get done for my comms, lol wut?
Preview: ky01_team10a
Fandom: Naruto
Characters: Nara Shikamaru, Yamanaka Ino, Akimichi Chouji, (and Asuma on the FO banner and icons)
Compatibility: Works with all account types, with or without ads,1 with or without the navigation strip.
Probably won't work for communities (if you want it for a community, talk to me).
Making This Your Layout
In ten excessively difficult steps, as is the way of S2. Good luck!
[1] First, save the images. They are:
1. THE HEADER
2. THE BACKGROUND
[2] Upload the two images to your own photo-hosting site. There are plenty of free ones to use, such as tinypic, photobucket, and imageshack. This will give you new URLs to the images. Do not hotlink the images.
[3] From the LJ menu bar, Journal > Edit Journal Style. On the Basics tab (you're there first by default), select S2 under Style System. Save Changes.
[4] Select the "Look and Feel" tab. Under "Layout & Language" select Generator from the first selection scrolly thing. Save Changes.
[5] Select the "Custom Options" tab. Under the "Presentation" category (you're there by default) make sure these match your settings:
(Note: Not all settings are listed here, since not all of them matter.)
Content area in pixels: 600pxAlignment of the content area: CenterMargin size on either the left or right side of the content area: 0Margin size on the top of the content area: 0Size of borders around all boxes: 0Style of borders around all boxes: InvisibleShow the top box's header bar: NoShow the title in the top box's header bar: NoShow the navigation links in the top box's header bar: NoMake journal content transparent...: NoDisable customized comment pages for your journal: Yes (recommended but not necessary)Display link list: NoIf you have an external web counter, you can enter the HTML for it here: Copy and paste the following, and replace THE HEADER with the new link to your header image:
Save changes.
[6] Select the "Colors" category (beneath the Custom Options tab). Make these your custom colors:
Entry background: #95a3a6Entry text color: #344143Color of borders around all boxes: --Link color: #5b696bVisited link color: #5b696bActive link color: #00ffffPage background color...: #344143Background color for the bar above entries: #95a3a6Text color for the bar above entries: #344143Background color for the bar below entries: #95a3a6Text color for the bar below entries: #344143Alternating background color for comment bars (one): --Text color on alternating comment bars (one): --Alternating background color for comment bars (two): --Text color on alternating comment bars (two): --Background bar color for screened comments: --Text color on background bar for screened comments: --Background color of navigation strip: #344143Text color of navigation strip: #95a3a6Border color of navigation strip: #95a3a6Link color of navigation strip: #95a3a6
Save changes.
(The 'Fonts' category can be left as default, so moving on...)
[7] Go to the 'Images' category (beneath the Custom Options tab). Fill it in:
Background image URL: [Put in the URL of the BACKGROUND IMAGE]Background image repeat: Repeat down onlyBackground image position: CenterBackground image scrolling: ScrollURL to an image...: --
[8] Go to the Text category (beneath the Custom Options tab). Clear everything from the the first 15 text areas.
So everything between and including "The title of your journal..." to "The URL of the custom link" should be blank.
Leave everything after that as default.
Save changes.
[9] Go to the Custom CSS category (beneath the Custom Options tab).
Use layout's stylesheet(s): YesCustom external stylesheet URL: --Custom stylesheet: Copy and paste the following:
body {margin-top: 0px;}
table#topbox {border: 0px;}
table#topbox tr td {padding: 0px; background: transparent;}
table#topbox tr td table tr td.shadowed {padding: 0px;}
table#topbox tr td table tr td.shadowed table {border-collapse: collapse;}
table#topbox tr td table tr td.shadowed table tr td table tr td {padding: 0px;}
table#topbox tr td table tr td.shadowed table tr td table tr td img {visibility: hidden; width: 0px; height: 0px;}
table.box {background: transparent;}
table.linkies {border: 1px solid #344143; width: 600px; background: transparent;}
a.linkies {color: #D9D0D0;}
Save changes.
[10] This is the most important step. If you don't do it, hundreds of guilt ninjas will attack you in your sleep and drive you to spend thousands of dollars on shrinks. From the navigation menu, go to Profile > Edit Profile.
Under the Bio section, somewhere in there, put the following (or something similar):
Layout by kylara.
Save changes.
CONGRATULATIONS, your layout should now work.
(Let me know if it doesn't; this being my first freely distributed layout it's very possible I made mistakes.)
You can also pick up a matching icon or matching Friends Only banner.
Please don't hotlink and please do credit. <3
[ Credits ]
Image from the chapter 330 cover of the Naruto manga by Masashi Kishimoto, published by Shounen Jump.
Texture credits to 1greeneye.net and Missm.
Made in Photoshop 7.0 by Kylara.
All coding by Kylara.
[ Notes ]
Good code is hard to find; if you want to use/manipulate/rewrite/whatever any piece of the code or structure, go right ahead. Please credit for whatever it is though, of course.
If you want to use the layout images but code a different style, go right ahead too. Please credit for the images.
Please do not edit the images themselves. I'm usually more than happy to make adjustments for you. <3
1 Plus users, please note: If you use this layout, make sure your ad settings have Ad Layout set to "Horizontal Placement".]
Preview: ky01_team10a
Fandom: Naruto
Characters: Nara Shikamaru, Yamanaka Ino, Akimichi Chouji, (and Asuma on the FO banner and icons)
Compatibility: Works with all account types, with or without ads,1 with or without the navigation strip.
Probably won't work for communities (if you want it for a community, talk to me).
Making This Your Layout
In ten excessively difficult steps, as is the way of S2. Good luck!
[1] First, save the images. They are:
1. THE HEADER
2. THE BACKGROUND
[2] Upload the two images to your own photo-hosting site. There are plenty of free ones to use, such as tinypic, photobucket, and imageshack. This will give you new URLs to the images. Do not hotlink the images.
[3] From the LJ menu bar, Journal > Edit Journal Style. On the Basics tab (you're there first by default), select S2 under Style System. Save Changes.
[4] Select the "Look and Feel" tab. Under "Layout & Language" select Generator from the first selection scrolly thing. Save Changes.
[5] Select the "Custom Options" tab. Under the "Presentation" category (you're there by default) make sure these match your settings:
(Note: Not all settings are listed here, since not all of them matter.)
Content area in pixels: 600pxAlignment of the content area: CenterMargin size on either the left or right side of the content area: 0Margin size on the top of the content area: 0Size of borders around all boxes: 0Style of borders around all boxes: InvisibleShow the top box's header bar: NoShow the title in the top box's header bar: NoShow the navigation links in the top box's header bar: NoMake journal content transparent...: NoDisable customized comment pages for your journal: Yes (recommended but not necessary)Display link list: NoIf you have an external web counter, you can enter the HTML for it here: Copy and paste the following, and replace THE HEADER with the new link to your header image:
| Recent Entries | Profile | Tags | Calendar | Friends |
Save changes.
[6] Select the "Colors" category (beneath the Custom Options tab). Make these your custom colors:
Entry background: #95a3a6Entry text color: #344143Color of borders around all boxes: --Link color: #5b696bVisited link color: #5b696bActive link color: #00ffffPage background color...: #344143Background color for the bar above entries: #95a3a6Text color for the bar above entries: #344143Background color for the bar below entries: #95a3a6Text color for the bar below entries: #344143Alternating background color for comment bars (one): --Text color on alternating comment bars (one): --Alternating background color for comment bars (two): --Text color on alternating comment bars (two): --Background bar color for screened comments: --Text color on background bar for screened comments: --Background color of navigation strip: #344143Text color of navigation strip: #95a3a6Border color of navigation strip: #95a3a6Link color of navigation strip: #95a3a6
Save changes.
(The 'Fonts' category can be left as default, so moving on...)
[7] Go to the 'Images' category (beneath the Custom Options tab). Fill it in:
Background image URL: [Put in the URL of the BACKGROUND IMAGE]Background image repeat: Repeat down onlyBackground image position: CenterBackground image scrolling: ScrollURL to an image...: --
[8] Go to the Text category (beneath the Custom Options tab). Clear everything from the the first 15 text areas.
So everything between and including "The title of your journal..." to "The URL of the custom link" should be blank.
Leave everything after that as default.
Save changes.
[9] Go to the Custom CSS category (beneath the Custom Options tab).
Use layout's stylesheet(s): YesCustom external stylesheet URL: --Custom stylesheet: Copy and paste the following:
body {margin-top: 0px;}
table#topbox {border: 0px;}
table#topbox tr td {padding: 0px; background: transparent;}
table#topbox tr td table tr td.shadowed {padding: 0px;}
table#topbox tr td table tr td.shadowed table {border-collapse: collapse;}
table#topbox tr td table tr td.shadowed table tr td table tr td {padding: 0px;}
table#topbox tr td table tr td.shadowed table tr td table tr td img {visibility: hidden; width: 0px; height: 0px;}
table.box {background: transparent;}
table.linkies {border: 1px solid #344143; width: 600px; background: transparent;}
a.linkies {color: #D9D0D0;}
Save changes.
[10] This is the most important step. If you don't do it, hundreds of guilt ninjas will attack you in your sleep and drive you to spend thousands of dollars on shrinks. From the navigation menu, go to Profile > Edit Profile.
Under the Bio section, somewhere in there, put the following (or something similar):
Layout by kylara.
Save changes.
CONGRATULATIONS, your layout should now work.
(Let me know if it doesn't; this being my first freely distributed layout it's very possible I made mistakes.)
You can also pick up a matching icon or matching Friends Only banner.
Please don't hotlink and please do credit. <3
[ Credits ]
Image from the chapter 330 cover of the Naruto manga by Masashi Kishimoto, published by Shounen Jump.
Texture credits to 1greeneye.net and Missm.
Made in Photoshop 7.0 by Kylara.
All coding by Kylara.
[ Notes ]
Good code is hard to find; if you want to use/manipulate/rewrite/whatever any piece of the code or structure, go right ahead. Please credit for whatever it is though, of course.
If you want to use the layout images but code a different style, go right ahead too. Please credit for the images.
Please do not edit the images themselves. I'm usually more than happy to make adjustments for you. <3
1 Plus users, please note: If you use this layout, make sure your ad settings have Ad Layout set to "Horizontal Placement".]