Custom Header/Layout Tutorial
Hello everyone! So, I’ve written a tutorial about this in the past, but it’s a bit outdated in a few spots. So I thought I would write a new one!
This is a tutorial on how to add a header to your journal and/or upload a custom layout.
By no means am I a layout expert and Im not skilled enough to write a layout code on my own, but I’ve gotten pretty good at altering pre-existing codes to my liking.
There are many ways to add a header to your layout. It varies depending on what sort of layout you have. Im going to show you two ways of doing it.
Step 1: On the top toolbar of livejournal, go to “Journal” and click on “Journal Style”
Step 2: Enter "flexible squares" into the search box.
Step 3: Choose a layout whose colors you like and hit "Apply Theme"
(Note: If you choose a theme that is not “flexible squares” this bit of coding will likely not work for you)
Step 4: Go to the top right corner of the page and hit "Customize your theme"
Step 5: On the tab on the left select "Custom CSS"
Step 6: In the Custom Style Sheet box, copy and paste the following code:
.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
width: 123px;
height: 123px;
background-repeat: no-repeat;
background-image: url(PLACE IMAGE URL HERE);
}
Step 7: Insert the image url of the header where it says "PLACE IMAGE URL HERE". Also, where it says "123" you want replace that with the height and width dimensions of the image you want to use. My headers are usually 800 px wide and 400 px tall. (Or 700px X 300 px if your using one of my old headers)
Step 8: At the bottom of the page, hit save! And you're done.
While, my first method there is fine, its not my favorite to use. If you want to put a header on your journal, one of the easiest and best ways to do it, is to find a nice custom layout that already has pre-existing header built into it and then to swap out that header for one of your choosing.
First off, you need to find a custom layout you want to use. There are all sorts of people around LJ who make layouts. Im sure if you search around a bit, you can probably find someone your partial to.
Here are a few communities that I like that offer custom layouts:
Note: Some of these communities require membership to see the entries. However, they are all well worth becoming a member for.
freelayouts
A basic collective community of many of the biggest layout makes.
gawariel_design
Very pretty and unique layouts. However, there are not very many layouts you can put your own header in.
premade_ljs
There are some very lovely layouts located here and some are customizable.
abellalayouts: There are lots of pretty layout here. Some have headers in them that you can replace, but not all of them.
spiralbound_lj There are some really adorable layouts here. Some have built in headers.
thefulcrum
Cute layouts here. Not many with exchangeable headers, but there are some.
scholarslayouts
Probably the best place to go if you want to put in your own header. The layouts are super simple but really pretty. Almost all the layouts I use come from here. =D
Also...here are all the header's I've made
Now another thing to talk about before we get started. When picking out a custom layout to use, make sure it’s an S2 layout. (Often a maker will specify that it’s S2). A lot of the makers I listed above still have their really old layouts still posted and many of those are S1 layouts. S1 was the old system LJ used for coding, before they changed over to S2. Although, sometimes very pretty, most S1 layouts do not work anymore. This tutorial will not work for S1 layouts, so just make sure it’s an S2 layout. If the layout was made within the last 5 years, chances are, its an S2 layout. If its older than 5 years, you better double check to see what kind of layout it is.
Okay, So now that we have found a nice custom layout we like, we’re going to alter the header in it and then upload the layout to our journal. If it doesn’t have a header in it, or you’re happy with the header that already exists in it….please skip to step 7.
Step 1: Find the CSS code the layout maker provides and copy it.
As an example, Im going to use this layout by scholarslayouts. I love her layouts. Nearly all of mine come from her. I highly recommend using one of her layouts because they are not only pretty but also really simple to alter to your liking.
(Please click on my screen caps to see them bigger)
Step 2: Open up any word processor you like and paste the CSS code you just copied.
Step 3: Find the bit of code that looks like this:
(Various layouts will have slightly different coding….but it should be fairly similar to this)
.headerimage {
position: relative;
width: 800px;
height:405px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/header.png");
background-repeat: no-repeat;
}
Step 4: See that url? This URL,
http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/header.png
That is the header URL. Copy and paste it into an internet browser. This does two things:
1.) Confirms you have the right URL (Which is always useful to know)
2.) And will tell you the dimensions of the pic. (As I will show in step 5)
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Bonus Step 4: (This is totally optional)
If a layout has a background built into as well (such as the one im using as an example) you can also change it to a background of your choosing if you want. Using a similar process to the one Im describing for headers, find the bit of code that looks similar to this:
body {
background-color: #413e41;
text-align: center;
color: #4e3200;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin: 20px 0 20px 0;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/background.png);
background-repeat:repeat;
}
And swap out that URL for the URL of the background you want to use.
(The dimensions of the two backgrounds do not need to match)
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Step 5:
(Note: This step is slightly different in different internet browsers. But it should be a pretty similar process to this. Here Im using firefox)
Right Click on the image and go to “View Image Info.” At the bottom there, it will tell you what the dimensions of the pic are.
It’s often important that the header you want to use has the same dimensions as the one you are replacing. You can usually get away with using a header that has a different height, but often if the width dimension is different, you will throw the lining of the layout off. If you are using one of my headers, Ill happily resize it to any dimension you need. All you have to do is ask.
Step 6: Now that we know our headers have at least the same width dimension, take the URL we found in steps 3 & 4 and change it the URL of the header (or background) you wish to use in its place.
If using one of my headers, please please please upload the image to your own server. I have a limited amount of bandwidth on mine and if everyone starts hotlinking my headers Im going to go over my limit really easily.
Step 7: Now that we have our CSS code all to our liking, go to the LJ toolbar and click on “Journal” and then “Journal Style”
Step: 8
Enter the type of layout you have into the search box. (Makers usually specify what sort of layout it is)
In my example, Im using a flexible squares layout. So Im going to search for “flexible squares.” Choose any of the layouts that pop up (It makes no difference on which one you choose as long as it’s the right type of layout) and hit “ apply theme.”
Step 9: Go to the bottom of the page and choose whatever sidebar setting you want and hit “apply layout”
Step 10: Go back up the top right of the page and hit “Customize your theme”
Step 11: On the left side of the page, click the tab that says “Custom CSS”
Step 11: Paste your CSS code into the box labeled “Custom Style Sheet” and make sure the 3 options above it are set to “no” (Unless the layout maker says otherwise).
Step 12: Go to the bottom of the page and hit “Save Changes” and Wah-la! You’re done!
Remember, even if you’ve made a lot of alterations to a layout, it’s still polite to credit the orginal layout maker somewhere on your profile.
Please let me know if you have any questions! Ill do my best to answer them!
This is a tutorial on how to add a header to your journal and/or upload a custom layout.
By no means am I a layout expert and Im not skilled enough to write a layout code on my own, but I’ve gotten pretty good at altering pre-existing codes to my liking.
There are many ways to add a header to your layout. It varies depending on what sort of layout you have. Im going to show you two ways of doing it.
Step 1: On the top toolbar of livejournal, go to “Journal” and click on “Journal Style”
Step 2: Enter "flexible squares" into the search box.
Step 3: Choose a layout whose colors you like and hit "Apply Theme"
(Note: If you choose a theme that is not “flexible squares” this bit of coding will likely not work for you)
Step 4: Go to the top right corner of the page and hit "Customize your theme"
Step 5: On the tab on the left select "Custom CSS"
Step 6: In the Custom Style Sheet box, copy and paste the following code:
.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
width: 123px;
height: 123px;
background-repeat: no-repeat;
background-image: url(PLACE IMAGE URL HERE);
}
Step 7: Insert the image url of the header where it says "PLACE IMAGE URL HERE". Also, where it says "123" you want replace that with the height and width dimensions of the image you want to use. My headers are usually 800 px wide and 400 px tall. (Or 700px X 300 px if your using one of my old headers)
Step 8: At the bottom of the page, hit save! And you're done.
While, my first method there is fine, its not my favorite to use. If you want to put a header on your journal, one of the easiest and best ways to do it, is to find a nice custom layout that already has pre-existing header built into it and then to swap out that header for one of your choosing.
First off, you need to find a custom layout you want to use. There are all sorts of people around LJ who make layouts. Im sure if you search around a bit, you can probably find someone your partial to.
Here are a few communities that I like that offer custom layouts:
Note: Some of these communities require membership to see the entries. However, they are all well worth becoming a member for.
freelayouts
A basic collective community of many of the biggest layout makes.
gawariel_design
Very pretty and unique layouts. However, there are not very many layouts you can put your own header in.
premade_ljs
There are some very lovely layouts located here and some are customizable.
abellalayouts: There are lots of pretty layout here. Some have headers in them that you can replace, but not all of them.
spiralbound_lj There are some really adorable layouts here. Some have built in headers.
thefulcrum
Cute layouts here. Not many with exchangeable headers, but there are some.
scholarslayouts
Probably the best place to go if you want to put in your own header. The layouts are super simple but really pretty. Almost all the layouts I use come from here. =D
Also...here are all the header's I've made
Now another thing to talk about before we get started. When picking out a custom layout to use, make sure it’s an S2 layout. (Often a maker will specify that it’s S2). A lot of the makers I listed above still have their really old layouts still posted and many of those are S1 layouts. S1 was the old system LJ used for coding, before they changed over to S2. Although, sometimes very pretty, most S1 layouts do not work anymore. This tutorial will not work for S1 layouts, so just make sure it’s an S2 layout. If the layout was made within the last 5 years, chances are, its an S2 layout. If its older than 5 years, you better double check to see what kind of layout it is.
Okay, So now that we have found a nice custom layout we like, we’re going to alter the header in it and then upload the layout to our journal. If it doesn’t have a header in it, or you’re happy with the header that already exists in it….please skip to step 7.
Step 1: Find the CSS code the layout maker provides and copy it.
As an example, Im going to use this layout by scholarslayouts. I love her layouts. Nearly all of mine come from her. I highly recommend using one of her layouts because they are not only pretty but also really simple to alter to your liking.
(Please click on my screen caps to see them bigger)
Step 2: Open up any word processor you like and paste the CSS code you just copied.
Step 3: Find the bit of code that looks like this:
(Various layouts will have slightly different coding….but it should be fairly similar to this)
.headerimage {
position: relative;
width: 800px;
height:405px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/header.png");
background-repeat: no-repeat;
}
Step 4: See that url? This URL,
http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/header.png
That is the header URL. Copy and paste it into an internet browser. This does two things:
1.) Confirms you have the right URL (Which is always useful to know)
2.) And will tell you the dimensions of the pic. (As I will show in step 5)
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Bonus Step 4: (This is totally optional)
If a layout has a background built into as well (such as the one im using as an example) you can also change it to a background of your choosing if you want. Using a similar process to the one Im describing for headers, find the bit of code that looks similar to this:
body {
background-color: #413e41;
text-align: center;
color: #4e3200;
font-family: "Georgia", sans-serif;
font-size: 13px;
margin: 20px 0 20px 0;
background-image:url(http://i407.photobucket.com/albums/pp157/scholarslayouts/cinderella/background.png);
;){kind=link}
background-repeat:repeat;
}
And swap out that URL for the URL of the background you want to use.
(The dimensions of the two backgrounds do not need to match)
~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
Step 5:
(Note: This step is slightly different in different internet browsers. But it should be a pretty similar process to this. Here Im using firefox)
Right Click on the image and go to “View Image Info.” At the bottom there, it will tell you what the dimensions of the pic are.
It’s often important that the header you want to use has the same dimensions as the one you are replacing. You can usually get away with using a header that has a different height, but often if the width dimension is different, you will throw the lining of the layout off. If you are using one of my headers, Ill happily resize it to any dimension you need. All you have to do is ask.
Step 6: Now that we know our headers have at least the same width dimension, take the URL we found in steps 3 & 4 and change it the URL of the header (or background) you wish to use in its place.
If using one of my headers, please please please upload the image to your own server. I have a limited amount of bandwidth on mine and if everyone starts hotlinking my headers Im going to go over my limit really easily.
Step 7: Now that we have our CSS code all to our liking, go to the LJ toolbar and click on “Journal” and then “Journal Style”
Step: 8
Enter the type of layout you have into the search box. (Makers usually specify what sort of layout it is)
In my example, Im using a flexible squares layout. So Im going to search for “flexible squares.” Choose any of the layouts that pop up (It makes no difference on which one you choose as long as it’s the right type of layout) and hit “ apply theme.”
Step 9: Go to the bottom of the page and choose whatever sidebar setting you want and hit “apply layout”
Step 10: Go back up the top right of the page and hit “Customize your theme”
Step 11: On the left side of the page, click the tab that says “Custom CSS”
Step 11: Paste your CSS code into the box labeled “Custom Style Sheet” and make sure the 3 options above it are set to “no” (Unless the layout maker says otherwise).
Step 12: Go to the bottom of the page and hit “Save Changes” and Wah-la! You’re done!
Remember, even if you’ve made a lot of alterations to a layout, it’s still polite to credit the orginal layout maker somewhere on your profile.
Please let me know if you have any questions! Ill do my best to answer them!