Header Image Tutorial
Jul. 21st, 2008 03:12 pmOK. So a few people on my flist have asked how to get a header image on their layout like I have. Let me preface this by saying these directions will only work using the Smooth Sailing layout. Each layout has a different code to allow for the header image. Also, this won’t work if you just have a basic account. I have a Paid, so I’m not sure if it will work with a Plus account or not. I guess just give it a shot and see if it works!
WARNING: This is image heavy...
First step, upload your image to some sort of hosting site. Photobucket works well. If your LJ account type supports it, I like to use the Scrapbook feature. It doesn’t resize like Photobucket can do at times.
Once that is done, go back to the LJ main page and select "Change Journal Theme" from the Journal drop down menu.

On the next screen, scroll down and click on "Developer Area."

Then select "Your Layers" from the Advanced Option section.

Scroll to the bottom again and under "Create Layout Specific Layer," choose Type: Theme and Layout: Smooth Sailing.

Then click Create. The page should refresh and you should see this appear in the list above:

You’re going to click the EDIT button next to the (none) option. Delete everything in the main window and copy and paste the following code:
layerinfo "type" = "theme";
layerinfo "name" = "NAME";
function Page::lay_print_header() {
var string headerimageurl = "URL";
var string title = $.global_title;
var string subtitle = $.global_subtitle;
"""
""";
if ($headerimageurl!="") {"""
"""; }
if ($*layout_header_usericon=="show") {""""""; }
if ($title!="") { """
if ($subtitle!="") { """
$this->lay_print_header_links();
"""
""";
}
Replace the NAME and URL options with the appropriate Name and URL information. For Name, just name it whatever you want to call the layer. Like for me, my current layer is called "Sexy James." :-)
Once that is done, click the "Save and Compile" button at the top:

Down at the very bottom, the words "Compiled without errors" should appear. If so, yay! You’re done with creating the header layer and can now move on to activating it. If not, well, I’m not sure, but double check that there aren’t any extraneous quotes or other random punctuation marks in the code.
So, if everything is all good, go back to the LJ main page and "Change Journal Theme." This time you are going to select "Your Custom Layers" from the menu on the left.

Over on the right, you should see a little thumbnail with the name of whatever you called your layer. Just click Apply Theme and it’s all set.
From there, you can then go back and edit the colors and fonts, etc. These options can be found under the Journal --> Customize Journal Style option.

So, that’s it. You should now have a shiny new layout with a pretty header image. Let me know if you have any questions.
WARNING: This is image heavy...
First step, upload your image to some sort of hosting site. Photobucket works well. If your LJ account type supports it, I like to use the Scrapbook feature. It doesn’t resize like Photobucket can do at times.
Once that is done, go back to the LJ main page and select "Change Journal Theme" from the Journal drop down menu.
On the next screen, scroll down and click on "Developer Area."
Then select "Your Layers" from the Advanced Option section.
Scroll to the bottom again and under "Create Layout Specific Layer," choose Type: Theme and Layout: Smooth Sailing.
Then click Create. The page should refresh and you should see this appear in the list above:
You’re going to click the EDIT button next to the (none) option. Delete everything in the main window and copy and paste the following code:
layerinfo "type" = "theme";
layerinfo "name" = "NAME";
function Page::lay_print_header() {
var string headerimageurl = "URL";
var string title = $.global_title;
var string subtitle = $.global_subtitle;
"""
""";
if ($headerimageurl!="") {"""
if ($*layout_header_usericon=="show") {""""""; }
if ($title!="") { """
$title
"""; }if ($subtitle!="") { """
$subtitle
"""; }$this->lay_print_header_links();
"""
""";
}
Replace the NAME and URL options with the appropriate Name and URL information. For Name, just name it whatever you want to call the layer. Like for me, my current layer is called "Sexy James." :-)
Once that is done, click the "Save and Compile" button at the top:
Down at the very bottom, the words "Compiled without errors" should appear. If so, yay! You’re done with creating the header layer and can now move on to activating it. If not, well, I’m not sure, but double check that there aren’t any extraneous quotes or other random punctuation marks in the code.
So, if everything is all good, go back to the LJ main page and "Change Journal Theme." This time you are going to select "Your Custom Layers" from the menu on the left.
Over on the right, you should see a little thumbnail with the name of whatever you called your layer. Just click Apply Theme and it’s all set.
From there, you can then go back and edit the colors and fonts, etc. These options can be found under the Journal --> Customize Journal Style option.
So, that’s it. You should now have a shiny new layout with a pretty header image. Let me know if you have any questions.
(no subject)
Date: 2008-07-29 07:44 pm (UTC)(no subject)
Date: 2008-07-29 09:40 pm (UTC)(no subject)
Date: 2008-07-29 11:36 pm (UTC)I guess make sure it looks like that?
(no subject)
Date: 2008-07-29 11:46 pm (UTC)(no subject)
Date: 2008-07-30 12:22 am (UTC)