![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Right. So you want to use one of those shiny layouts one can find in all those layout-communities everywhere on LJ? Good idea! But… it is all code, and you don’t get the layout-makers instructions. Fear not. Here is KSena’s first HOW TO-post on how to add a costumized layout, filled with screenshots to make it easy.
Most coders have very good instructions with there layouts, but if your totally new it might still be hard. What I write here, I figured out on my own. If a layout-maker sees this and want to add something, please do so in the comments. Also if you think something is missing, let me know and I’ll add it.
So why do I put down time on this? Because I want my friends to have fun with there LJ’s. ;-) Also, most layouts work with free accounts as well. Just ask the layout-maker of the layout you want.
Right then.
Here we go.
The start.
I am going to use![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
gawariels layout Never Forget as an example. I did this with permission. (Yes, I asked. :-) )
Say you surfed in, saw this and wanted to use it.
Then you must start with opening the costumize-page. You find that HERE: (See the red arrow.)
Now you need to know what style your layout is. You can see that in the description of the layout. In this case, it is Smooth Sailing. (See red arrow.)
Do a search for all the Smooth Sailing theme’s with the help of the search box. If you have a free account, or a plus account, you can click the little box Only Show Theme’s available to me. (See red arrow.)
You can pick any of the onces that show up. Doesn’t matter what colours and what not, since we are to change that, right? ;-) (See red arrow 1) When you have done so, click Costumize. (See Red arrow 2.)
That should take you to a page looking like this:
With me so far? Exellent! Now we are going to do something else.
Step 2.
Back to the site with the layout. Scrolling down a bit we see something called Images and Code. There we have the code for the layout. Copy or cut the entire thing! (See red arrow.)
Great! Now open Notepad or something similar, and paste the code into a new document. Should look like this (if you use Word). (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.)
An extra note is in order here! As you can see,gawariel has made some extra notes in her code at the top. UNDER NO CIRCUMSTANCES TOUCH THESE NOTES!!! This goes on any layout you use with notes like these. It is the mark of the layoutmaker, showing it was she/he who made the job. No touchy!
Right. Onwards.
Step 3.
To this layout there are several different headers one can use. Headers are always fun to add, and in some you can add any header you want. We are, of course going to use one of the headersgawariel made for this layout. You can see them here. Download one that you like.
IMPORTANT! If you are making your own header to a layout, first ask the layoutmaker if that is OK, AND check in the description of the layout what size the header should be, or ask the layoutmaker if it is not in the description.
Still with me? Exellent!
Now we need to upload the header to the net. If you have a paid account, I suggest you do so to Scrapbook, or if you have a free account or a plus account (or simply prefer to use something else) I suggest Photobucket. They are both very, VERY easy to use.
If you have problems with uploading the image, feel free to ask in the comments and I’ll try to walk you through that as well. (I might even make a How To post about that to, who knows… I’ll link to it here if so.)
So, you got your header uploaded! Good. One step forward. Keep it open in a seperat window (I am using Firefox, though).
Step 4.
Now we go back to the Notepad doc where you have your code. (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.) All layoutmakers mark the place where the header is supposed to be differently. Make sure to read the description of the layout carefully.
gawariel is giving us a peace of code, and telling us where to put it. At the bottom.
Scroll down to the bottom of your code.
She sure is telling us load and clear, isn’t she? Not all layoutmakers do though, but they are telling you what to look for in the code to be able to add your header. If you have problems with this ask the maker, or check there FAQ’s. (Most layoutmakers have great FAQ’s.) You could ask me to in comments, or the maker herself/himself.
The bottom of your code should now look like this:
Great! We have added code! Now what? Well, we add to address to the header. Copy the address to your header, and add it where it says URL TO YOUR IMAGE. (In some layouts it might say URL TO YOUR HEADER or some such. All layoutmakers phrase it differently.)
Your code should now look like this (but with the address to your header, of course.):
Good work! We are now done coding.gawariel is a friendly layoutmaker. We only need to upload the header. Some layoutmakers wants you to upload every singly images used in the layout. That can at times be A LOT of images… If that is the case just rinse and repeat until you have uploaded all the images needed. Also, where to add the other images should be stated clearly either in the layout-description or in the code itself. Otherwise, ask the layout-maker.
Step 5.
Now. Go back to the Costumize-page.
gawariel also has some additional things that need doing here. All the things can be found in the right side menu. Most layoutmakers have things that need doing here, before we continue. As I have said all the time, read the directions to the layout carefully!
On this layout we need to change things under Display, Entry Text and Menu. Only change the things that the particular layout you are using asks you to change. (At some you can change more things, but for a beginner it might be a good idea to only change what is needed.) Read the directions!!! I can not stress this enough.
Also, to be kind to the layoutmaker, add a link to there community or journal in your links-list. To find your links-list, check the right hand menu here and click Links, that will take you to your links-list where you can update it.
After each change you have made, press Save Changes.
All done with your changes? Grand!
Nearly done!
Now is the next part.
We are now going to add the code to the layout. Check the right side menu and click on Custom CSS.
Now we get to a place like this.
And now it is, again, IMPORTANT that you read the description of the layout you are to use. Near every layout have different settings on these.
On this layout you are going to do this:
Use layout's stylesheet(s): Put to No.
Use layout's stylesheet(s) when including custom external stylesheet: Put to No.
Custom external stylesheet URL: Leave empty.
All layouts have different settings, as I said, so read the description of the layout your using, to get it right. If these are not set right, the layout won’t work. So, if the layout looks wonky, check these settings before asking maker, friend or whoever. :-)
Now, go to the Notepad-doc. Copy EVERYTHING! (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.)
Paste it into the big square by Custom stylesheet.
It should now look like this, with the settings and your code:
Right then. Click Save Changes.
And…. Guess what? Your nearly done! You got yourself a brandspanking new layout. :-D Good work!
Only one thing left, really. And that is to give credit to the layoutmaker. :-) So, go to your profile and write something like…
Layout made by XXXX.
Or however you wanna phrase it. I always do like this:
How you phrase it is up to you. But do give credit!!!
And… YOUR DONE! :-D Congratulations!
Tips on where to ask for help if needed…
Friends always work, of course.
The layoutmaker herself/himself is of course the best source, but the popular once might be flooded with questions and not have time to answer them all. Also they usually point you to there FAQs. FAQs are great to check, but can be a bit hard to understand at times. A good place to start though.
Still lost? Fear not.
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif)
everything_lj is a community where no question is to stupid. Just follow there posting-guide-lines and you’ll get great answers from friendly people. :-) I have been rescued plenty times here.
idiots_and_lj is also a great place to ask questions should you have them. No question to stupid or idiotic, everything is welcome here as well.
Where to find layouts?
These are just the communities where I find my layouts that I use. There are probably TONS more out there! Most of the layoutmakers also add a note if the layout works on free accounts, Plus accounts and Paid accounts.
I’ll of course add to this list when I find more.
btvsats_layouts
cartonage
da_les
freelayouts
gawariel_design
ideatreestudio
kain_layouts
knotloved
layouts_for_fun
lookitslayouts
minty_peach
nameless_layout
paiduserlayouts
premade_ljs
refuted
spiralbound_lj
tears_of_ruby
mintyapple
Most importantly…. HAVE FUN! And explore! :-D
Most coders have very good instructions with there layouts, but if your totally new it might still be hard. What I write here, I figured out on my own. If a layout-maker sees this and want to add something, please do so in the comments. Also if you think something is missing, let me know and I’ll add it.
So why do I put down time on this? Because I want my friends to have fun with there LJ’s. ;-) Also, most layouts work with free accounts as well. Just ask the layout-maker of the layout you want.
Right then.
Here we go.
The start.
I am going to use
gawariels layout Never Forget as an example. I did this with permission. (Yes, I asked. :-) )Say you surfed in, saw this and wanted to use it.
Then you must start with opening the costumize-page. You find that HERE: (See the red arrow.)
Now you need to know what style your layout is. You can see that in the description of the layout. In this case, it is Smooth Sailing. (See red arrow.)
Do a search for all the Smooth Sailing theme’s with the help of the search box. If you have a free account, or a plus account, you can click the little box Only Show Theme’s available to me. (See red arrow.)
You can pick any of the onces that show up. Doesn’t matter what colours and what not, since we are to change that, right? ;-) (See red arrow 1) When you have done so, click Costumize. (See Red arrow 2.)
That should take you to a page looking like this:
With me so far? Exellent! Now we are going to do something else.
Step 2.
Back to the site with the layout. Scrolling down a bit we see something called Images and Code. There we have the code for the layout. Copy or cut the entire thing! (See red arrow.)
Great! Now open Notepad or something similar, and paste the code into a new document. Should look like this (if you use Word). (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.)
An extra note is in order here! As you can see,
gawariel has made some extra notes in her code at the top. UNDER NO CIRCUMSTANCES TOUCH THESE NOTES!!! This goes on any layout you use with notes like these. It is the mark of the layoutmaker, showing it was she/he who made the job. No touchy!Right. Onwards.
Step 3.
To this layout there are several different headers one can use. Headers are always fun to add, and in some you can add any header you want. We are, of course going to use one of the headers
gawariel made for this layout. You can see them here. Download one that you like.IMPORTANT! If you are making your own header to a layout, first ask the layoutmaker if that is OK, AND check in the description of the layout what size the header should be, or ask the layoutmaker if it is not in the description.
Still with me? Exellent!
Now we need to upload the header to the net. If you have a paid account, I suggest you do so to Scrapbook, or if you have a free account or a plus account (or simply prefer to use something else) I suggest Photobucket. They are both very, VERY easy to use.
If you have problems with uploading the image, feel free to ask in the comments and I’ll try to walk you through that as well. (I might even make a How To post about that to, who knows… I’ll link to it here if so.)
So, you got your header uploaded! Good. One step forward. Keep it open in a seperat window (I am using Firefox, though).
Step 4.
Now we go back to the Notepad doc where you have your code. (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.) All layoutmakers mark the place where the header is supposed to be differently. Make sure to read the description of the layout carefully.
gawariel is giving us a peace of code, and telling us where to put it. At the bottom. Scroll down to the bottom of your code.
She sure is telling us load and clear, isn’t she? Not all layoutmakers do though, but they are telling you what to look for in the code to be able to add your header. If you have problems with this ask the maker, or check there FAQ’s. (Most layoutmakers have great FAQ’s.) You could ask me to in comments, or the maker herself/himself.
The bottom of your code should now look like this:
Great! We have added code! Now what? Well, we add to address to the header. Copy the address to your header, and add it where it says URL TO YOUR IMAGE. (In some layouts it might say URL TO YOUR HEADER or some such. All layoutmakers phrase it differently.)
Your code should now look like this (but with the address to your header, of course.):
Good work! We are now done coding.
gawariel is a friendly layoutmaker. We only need to upload the header. Some layoutmakers wants you to upload every singly images used in the layout. That can at times be A LOT of images… If that is the case just rinse and repeat until you have uploaded all the images needed. Also, where to add the other images should be stated clearly either in the layout-description or in the code itself. Otherwise, ask the layout-maker. Step 5.
Now. Go back to the Costumize-page.
gawariel also has some additional things that need doing here. All the things can be found in the right side menu. Most layoutmakers have things that need doing here, before we continue. As I have said all the time, read the directions to the layout carefully! On this layout we need to change things under Display, Entry Text and Menu. Only change the things that the particular layout you are using asks you to change. (At some you can change more things, but for a beginner it might be a good idea to only change what is needed.) Read the directions!!! I can not stress this enough.
Also, to be kind to the layoutmaker, add a link to there community or journal in your links-list. To find your links-list, check the right hand menu here and click Links, that will take you to your links-list where you can update it.
After each change you have made, press Save Changes.
All done with your changes? Grand!
Nearly done!
Now is the next part.
We are now going to add the code to the layout. Check the right side menu and click on Custom CSS.
Now we get to a place like this.
And now it is, again, IMPORTANT that you read the description of the layout you are to use. Near every layout have different settings on these.
On this layout you are going to do this:
Use layout's stylesheet(s): Put to No.
Use layout's stylesheet(s) when including custom external stylesheet: Put to No.
Custom external stylesheet URL: Leave empty.
All layouts have different settings, as I said, so read the description of the layout your using, to get it right. If these are not set right, the layout won’t work. So, if the layout looks wonky, check these settings before asking maker, friend or whoever. :-)
Now, go to the Notepad-doc. Copy EVERYTHING! (I just found out using Word is NOT recommended, since it can screw up the code. Use Notepad instead.)
Paste it into the big square by Custom stylesheet.
It should now look like this, with the settings and your code:
Right then. Click Save Changes.
And…. Guess what? Your nearly done! You got yourself a brandspanking new layout. :-D Good work!
Only one thing left, really. And that is to give credit to the layoutmaker. :-) So, go to your profile and write something like…
Layout made by XXXX.
Or however you wanna phrase it. I always do like this:
How you phrase it is up to you. But do give credit!!!
And… YOUR DONE! :-D Congratulations!
Tips on where to ask for help if needed…
Friends always work, of course.
The layoutmaker herself/himself is of course the best source, but the popular once might be flooded with questions and not have time to answer them all. Also they usually point you to there FAQs. FAQs are great to check, but can be a bit hard to understand at times. A good place to start though.
Still lost? Fear not.
everything_lj is a community where no question is to stupid. Just follow there posting-guide-lines and you’ll get great answers from friendly people. :-) I have been rescued plenty times here. idiots_and_lj is also a great place to ask questions should you have them. No question to stupid or idiotic, everything is welcome here as well. Where to find layouts?
These are just the communities where I find my layouts that I use. There are probably TONS more out there! Most of the layoutmakers also add a note if the layout works on free accounts, Plus accounts and Paid accounts.
I’ll of course add to this list when I find more.
btvsats_layoutscartonageda_lesfreelayoutsgawariel_designideatreestudiokain_layoutsknotlovedlayouts_for_funlookitslayoutsminty_peachnameless_layoutpaiduserlayoutspremade_ljsrefutedspiralbound_ljtears_of_rubymintyappleMost importantly…. HAVE FUN! And explore! :-D
Tags:
(no subject)
Date: 2008-03-14 03:12 pm (UTC)- In your first step you say 'Then you must start with opening the costumize-page. You find that here: (See the red arrow.)' and then show a screenshot.
- When copying the code, you say people can paste it in 'Word or Notes'. I strongly recommend against using Word when handling any code. Stick with Notepad and the like. Why you ask?
That's all. Apart from these two notes, I think the tutorial is very educational and clear! Also, thank you for the bucket-loads off compliments you added AND to stress the importance of credit!I just want to mention that the front page doesn't look the same for everyone. I for example am stuck in the past and still use the old sheme[see (http://pics.livejournal.com/gawariel/pic/000c8rkf)]. If you go to your viewing options (http://www.livejournal.com/manage/settings/) you can see all the different shemes.
So, perhaps you can also immediatly provide a link to the customize page (you spelled customize wrong a couple of times, btw), because that's a link that isn't connected with your username: here (http://www.livejournal.com/customize/)
Well, in Word there is a risk that linebreaks (enter) will get added, which can screw up the code. Usually, Firefox ignores the linebreaks, but IE does not.
To give an example, not too long ago someone came to me saying that the images of their layout showed up fine in FF, but not in IE. When looking at that persons code, I saw that the text-editor she had used had added a linebreak in the middle of her image-urls. FF still read the urls as such, but IE did not, hence the layout mix-up.
Is it okay if I add a link to this tut to the Never Forget layout?
ETA: I didn't realize that I forgot to style the look of the links on the comment pages. I fixed that now in the code at
(no subject)
Date: 2008-03-19 10:23 am (UTC)(no subject)
Date: 2008-03-20 12:29 am (UTC)Do you have vista or a program that lets you use a skins on windows?
And I too like gawariel am stuff in the past using an old scheme. I was upset when I couldn't switch to it in the viewing options anymore. But LJlogin (http://ljlogin.e-space.gweep.net/) lets me use it so its all good.
(no subject)
Date: 2008-03-20 07:43 am (UTC)I didn't actually think about the different scheme's, but I know have added a link to the costumize site, for easy finding. Should I add a link to more things, you think? Any ideas to improve this "How To" is welcome! And if you wanna use it, go ahead and do so. It should (I hope) work with more peoples work. :-)