Read FAQ
Customization in the Old Style System
| What is the old style system? How do I switch my journal to or from it? |
<li><b>Intermediate:</b> Users familiar with HTML and CSS, but not comfortable learning a new layout language, should use the <b>S1</b>, or old style system.</li>
<li><b>Advanced:</b> Users comfortable learning a new layout language can use the S2 style system to <a href="lj://faq/172" title="FAQ #172:
[[faqtitle:172]]">control their journal's layout exactly</a>. S2's Advanced Customization area is reserved for <a href="lj://faq/21" title="FAQ #21:
[[faqtitle:21]]">Paid</a>, Permanent, and Early Adopter accounts.
| How do I customize my journal using S1? |
This area is where you set the various titles for your journal pages. Here you can also choose a layout for each of the four views. The list of layouts includes all LiveJournal system styles; <a href="lj://faq/21" title="FAQ #21:
[[faqtitle:21]]">Paid</a>, Permanent, or Early Adopter accounts will also see any <a href="lj://faq/128" title="FAQ #128:
[[faqtitle:128]]">custom styles</a> they have created here. It is possible to select different styles for each of the views, although most system styles are available for all four view types.
If you are using any style-specific <a href="lj://faq/124" title="FAQ #124:
[[faqtitle:124]]">overrides</a>, such as overrides changing the text of your comment links or overrides changing your journal's width or position, you will need to make sure that you change those overrides as necessary when you change to a different style.
You can also select a color theme for your journal. A few styles (Notepad, Webley Boxes on White, and Refried Paper) use colors that cannot be changed through this interface.
LiveJournal offers a number of pre-set color themes, but you can also enter a custom set of colors by choosing the <b>Custom colors</b> option and then entering the hexadecimal codes for the colors you want. You can use this <a href="http://community.livejournal.com/howto/28475.html">chart of hexadecimal color codes</a>, although this is not a complete list. The <lj user="howto"> journal also has a <a href="http://community.livejournal.com/howto/26423.html">color usage area guide</a>, which explains how the color variables apply to different areas of your journal in different styles.
<a name="options2"></a><h3>Other Visual Options and Overrides</h3>
Among other options, the <a href="http://www.livejournal.com/customize/s1/">Journal Display</a> page lets you <a href="lj://faq/32" title="FAQ #32:
[[faqtitle:32]]">choose your journal's mood theme or create your own</a>. There's a section for <a href="lj://faq/264" title="FAQ #264:
[[faqtitle:264]]">navigation strip</a> settings, and another to let you show community userpics on your friends page. If you turn off the community userpics option, community userpics will show up for entries on your S1 Friends page when the author of the post has no default userpic and did not select a specific userpic when posting the entry.
The last section of Visual Options deals with overrides. This is where you can enter <a href="lj://faq/124" title="FAQ #124:
[[faqtitle:124]]">overrides</a> to change your journal's appearance. Tutorials on overrides and how to use them, along with some commonly-requested overrides, can be found on the <lj user="howto"> journal.
<a name="custom"></a><h3>Advanced</h3>
The <a href="http://www.livejournal.com/customize/s1/advanced.bml">Advanced Journal Display</a> page is the starting point for advanced customization in S1. <a href="lj://faq/21" title="FAQ #21:
[[faqtitle:21]]">Paid</a>, Permanent, and Early Adopter accounts can change the entire layout of their journal and customize all of the HTML by <a href="lj://faq/128" title="FAQ #128:
[[faqtitle:128]]">making their own S1 styles</a>. If you make a new style, you must select its name from the dropdown list in the Layout section on the <a href="http://www.livejournal.com/customize/s1/">Journal Display</a> page to use it on your journal. Alternatively, you may wish to <a href="lj://faq/68" title="FAQ #68:
[[faqtitle:68]]">embed your LiveJournal into your web site.</a>
<h3>Further Reading</h3><lj-raw>
<ul>
<li><a href="http://www.livejournal.com/support/faqbrowse.bml?faqcat=s1">FAQ category: Customization in the Old Style System</a></li></lj-raw>
</ul>
| What are overrides? How do they work? |
An S1 style is made up of several variables. Each variable is a portion of code that determines the appearance of a certain aspect of the layout, such as entries or comment links. An override can be used to replace a variable's pre-defined HTML code with code of your choice.
Not all variables can be changed using overrides. If overrides cannot be applied to a variable, the only way to customize that variable is to <a href="lj://faq/128" title="FAQ #128:
[[faqtitle:128]]">create a custom S1 style.</a> The following variables can be modified with overrides: <b>*_HEAD</b>, <b>*_TALK_READLINK</b>, <b>*_TALK_LINKS</b>, <b>*_OPT_ITEMS</b>, <b>*_DATE_FORMAT</b>, and <b>*_WEBSITE</b>.
Some of these variables contain <b>properties</b>. For example, the <b>*_TALK_READLINK</b> variable determines the appearance of the link to the "read comments" page. One of this variable's properties is <b>%%messagecount%%</b>, which determines where the current number of comments will be displayed in the link. Information on variables and their properties is available at the <a href="http://www.livejournal.com/developer/views.bml">View Types</a> page. All existing variables are listed on this page, although not all variables can be modified using overrides. Clicking on a variable name will bring you to a page with information on the variable, including what aspect of the layout it controls, the names of its properties and what they represent, and whether the variable can be customized using overrides.
You can view the pre-defined code of existing system styles, organized by variable, using the <a href="http://www.livejournal.com/styles/browse/">Style Browser</a>. Entering "system" in the username box will bring up a list of LiveJournal's system styles, with links to the code and a preview page for each style. Basic users cannot view the preview pages for system styles, but can click "info" to view the style's code.
The only HTML elements that can be used in <b>*_HEAD</b> overrides are those elements that are valid in the head of a HTML document. This is limited to <b><title></b>, <b><base></b>, <b><style></b>, <b><link></b>, and <b><meta></b>. All other elements are stripped. If your overrides are not changing the look of your journal, that is most likely the reason.
Overrides are used to set exceptions to the system styles, and they have their limitations and complications. If you are interested in dramatically changing the appearance of your journal style, you can much more easily and thoroughly do so if you have a <a href="lj://faq/21" title="FAQ #21:
[[faqtitle:21]]">paid account</a>.
There is more information available on overrides, as well as tutorials for using overrides, in the following locations:
<lj-raw><ul>
<li><a href="http://community.livejournal.com/howto/4516.html">Thorough description of overrides</a></li>
<li><a href="http://community.livejournal.com/howto/profile">More basic tutorials and information</a></li>
<li><a href="lj://faq/12" title="FAQ #12:
[[faqtitle:12]]">Changing your font</a></li>
<li><a href="lj://faq/97" title="FAQ #97:
[[faqtitle:97]]">Inserting a background image</a></li>
<li><a href="lj://faq/13" title="FAQ #13:
[[faqtitle:13]]">Setting the number of entries that appear in a view</a></li>
<li><a href="lj://faq/96" title="FAQ #96:
[[faqtitle:96]]">Changing the wording of your comments links</a></li>
</ul></lj-raw>
There are a number of ways to use the override system. The above links describe only some of these ways. Due to the potential diversity and complexity of all available overrides, it would be impossible to officially support them all.
<b>Please note:</b> You can only have one override for each variable. If you have more than one change that you want to make to a variable, you will need to <a href="http://community.livejournal.com/howto/926.html">merge your overrides</a> for that variable into one override.
| How do I add a background image in S1? |
The following override will add a background image to your journal:<lj-raw>
<blockquote></lj-raw>GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(<lj-raw><i>http://www.example.com/image.jpg</i></lj-raw>) !important;
}
-->
</style>
<=GLOBAL_HEAD<lj-raw></blockquote>
Within the code, <i>http://www.example.com/image.jpg</i></lj-raw> must be replaced by the actual URL of the image you want to use as your background. If you would like to change the size of your background image, you will need to use a image editing program to do so; you can then re-upload the image. There is no way to stretch your background image.
On some newer browsers, background images can be "fixed," so that the image will not move as you scroll down the page. To do this, just add <b>background-attachment: fixed !important;</b> to the middle line of the above override code, like this:<lj-raw>
<blockquote></lj-raw>GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(<lj-raw><i>http://www.example.com/image.jpg</i></lj-raw>) !important;
background-attachment: fixed !important;
}
-->
</style>
<=GLOBAL_HEAD<lj-raw></blockquote>
<br />
<h3>Further Reading</h3>
<ul>
<li>From the <lj user="howto"> journal: <a href="http://www.livejournal.com/users/howto/8885.html">More on Background Images</a></li>
</ul>
| How do I change the font used for my entire journal in S1? |
<small><i>→ <a href="http://www.livejournal.com/customize/switch_system.bml">Switch to S2</a> for the latest features and themes.</i></small></div>
All account types can use <a href="lj://faq/124" title="FAQ #124:
[[faqtitle:124]]">overrides</a> to change the font. To enter your font overrides, go to the <a href="http://www.livejournal.com/customize/s1/">Journal Display</a> page and scroll to the bottom of the page.
If you are using more than one GLOBAL_HEAD override (such as a font override and a background override together), the overrides will need to be <a href="http://community.livejournal.com/howto/926.html" title="howto: Instructions on properly merging GLOBAL_HEAD overrides">merged together</a>. Additionally, if you are using the Refried Paper system style, you will need to use a <a href="http://community.livejournal.com/howto/13750.html" title="howto: [refried paper] Font Customization">different tutorial</a> to change the font in this style.
Use the following override to change the font in your journal:
<blockquote>GLOBAL_HEAD<=
<style type="text/css">
<!--
body, td, font, div, p {
font-family: "<i>Arial</i>", sans-serif;
}
-->
</style>
<=GLOBAL_HEAD</blockquote>
Replace <i>Arial</i> with the name of the font you would like to use. Remember that font names may be case-sensitive, and must be spelled correctly in order to work properly. You can also specify multiple fonts in a comma-separated list, such as <i>"Century Gothic", "Arial", "Helvetica", sans-serif</i>. When someone views your journal, their browser will use the first font in the list if it is available, otherwise will use the second font if it is available, and so on.
If you would also like to change the size of your font, you can include this CSS rule:
<blockquote>GLOBAL_HEAD<=
<style type="text/css">
<!--
body, td, font, div, p {
font-size: <i>12pt</i>;
}
-->
</style>
<=GLOBAL_HEAD</blockquote>
Again, you should replace <i>12pt</i> with the size you would like for your journal.
If you would like to change both the size and the font, you can combine the two:
<blockquote>GLOBAL_HEAD<=
<style type="text/css">
<!--
body, td, font, div, p {
font-family: "Arial", sans-serif;
font-size: 12pt;
}
-->
</style>
<=GLOBAL_HEAD</blockquote>
You can also <a href="http://community.livejournal.com/howto/17028.html">change the color of your font and apply other transformations to your text</a>.
| How do I change the number of journal entries per page? |
[[faqtitle:171]]">this FAQ</a> for instructions for the newer style system.
<small><i>→ <a href="http://www.livejournal.com/customize/switch_system.bml">Switch to S2</a> for the latest features and themes.</i></small></div>
All account types can use <a href="lj://faq/124" title="FAQ #124:
[[faqtitle:124]]">S1 style overrides</a> to change the number of journal entries per page. To do this, go to the <a href="http://www.livejournal.com/customize/s1/">Journal Display</a> page and copy the following overrides into the "Overrides" box at the bottom of the page:
<blockquote>LASTN_OPT_ITEMS=>30
FRIENDS_OPT_ITEMS=>40</blockquote>
This example changes the number of entries on your Recent Entries page to 30, and the number of entries on your Friends page to 40. You may wish to change the numbers to other values that suit you. Both of these options have a minimum of 1, a maximum of 50, and a default value of 20.
| How do I change what my comment links say? |
[[faqtitle:171]]">this FAQ</a> for instructions for the newer style system.
<small><i>→ <a href="http://www.livejournal.com/customize/switch_system.bml">Switch to S2</a> for the latest features and themes.</i></small></div>
Change the text of your comment links in S1 using the Overrides box on the <a href="http://www.livejournal.com/customize/">Journal Display</a> page. The <lj user="howto"> journal offers the <a href="http://www.livejournal.com/tools/memories.bml?user=howto&keyword=Comments+Link+-+Changing+Text+of">overrides you should use</a>. Since the overrides vary with each journal style, you must use the correct overrides for your layout.
<a href="lj://faq/21" title="FAQ #21:
[[faqtitle:21]]">Paid Accounts</a> also have the option to <a href="lj://faq/128" title="FAQ #128:
[[faqtitle:128]]">create or copy a style</a>, then edit the TALK_LINKS and TALK_READLINK variables within that style.
| What are some of the other common S1 customizations? |
To add an image to the top of your journal, you will first need to add a <a href="lj://faq/97" title="FAQ #97: [[faqtitle:97]]">background image</a>. You can then move the contents of your journal lower on the page by using the "<a href="http://community.livejournal.com/howto/14978.html">Shifting Journal Contents Downward</a>" HowTo tutorial.
<a name="currents"></a><h3>Renaming Current Mood and Music</h3>
Changing the "currents" text in S1 requires the use of a <a href="lj://faq/128" title="FAQ #128: [[faqtitle:128]]">custom style</a>, which is a <a href="lj://faq/131" title="FAQ #131: [[faqtitle:131]]">paid account benefit</a>. If you have a paid account, the "<a href="http://community.livejournal.com/howto/18703.html">Renaming current mood and current music</a>" tutorial explains how to change the current text.
<a name="realign"></a><h3>Moving Your Entries to One Side</h3>
You can move your entries to one side of the screen, or change the size of the entry tables, by using a "<a href="http://www.livejournal.com/tools/memories.bml?user=howto&keyword=Content+Resize+Realign&filter=all">Content Resize Realign</a>" tutorial. These tutorials are style-specific, so make sure that you pick the one that corresponds to the style you are using.
<a name="navigation"></a><h3>Navigation Links</h3>
Some styles allow you to customize your journal's navigation links. If you are using one of these styles, you can use a "<a href="http://www.livejournal.com/tools/memories.bml?user=howto&keyword=Navigation+banner&filter=all">Navigation Banner</a>" tutorial to add or alter text in your journal's header.
| Where can I learn more about S1 customization? |
Please note that detailed customization support is outside the realm of LiveJournal Support. If you require further assistance in using HTML or CSS to customize your journal, you can search for "HTML tutorial" in your favorite search engine or use the links given within this FAQ. Also, you can find one-on-one help by posting in an <a href="lj://faq/85" title="FAQ #85:
[[faqtitle:85]]">unofficial LiveJournal community</a> that helps people customize their journals.
| Why won't my overrides work? |
LiveJournal overrides consist of three required elements, in order to work correctly. The following example uses the override to change the text of the "Read Comments" link, to demonstrate the required elements:
<ul><li> An opening override tag, including the name of the variable that the override applies to:
<blockquote>LASTN_TALK_READLINK<=</blockquote></li>
<li> The contents of the override:
<blockquote><a href="%%urlread%%"><b>%%messagecount%% thought%%mc-plural-s%%</b></a>|</blockquote></li>
<li> A closing override tag, including the name of the variable:
<blockquote><=LASTN_TALK_READLINK</blockquote></li></ul>
The opening and closing tags must be on separate lines, and the <= marker must be included in the appropriate place on each line. If these tags are missing or incorrect, LiveJournal does not know what variable the override should apply to, and so does not use it.
For some short overrides, it is possible to have a one-line version, consisting of the variable name, a => marker, and the contents of the override. This is mainly used for extremely short overrides, such as the <a href="http://www.livejournal.com/support/faqbrowse.bml?faqid=13&view=full">override</a> to change the number of entries per page. If you use this format, you will need to make sure that the text does not wrap onto a second line.
<h3>Multiple Overrides</h3>
If you have overrides for several different variables -- for example, if you are using a GLOBAL_HEAD override to add CSS information, and LASTN_TALK_LINKS and LASTN_TALK_READLINK overrides to change the comment links -- they must be separate, so that one override is closed before the next one begins. If you try to place an override of one variable inside another override, the customizations will not work correctly. (The same problem will occur if you forget to close an override block.) for example, if you want to have a GLOBAL_HEAD override to add a background image, and a LASTN_HEAD override to use a custom cursor for your Recent Entries page only, they would need to be entered like this:
<blockquote>GLOBAL_HEAD<= <br /><style type="text/css"> <br /><!-- <br />body { <br />background-image: url(<i>http://www.example.com/image.jpg</i>); <br />} <br />--> <br /></style> <br /><=GLOBAL_HEAD <br /><br />LASTN_HEAD<= <br /><style type="text/css"> <br /><!-- <br />a:hover { <br />cursor: crosshair; <br />} <br />--> <br /></style> <br /><=LASTN_HEAD</blockquote>
Note that the GLOBAL_HEAD override is closed (with <=GLOBAL_HEAD) before the LASTN_HEAD override is opened (with LASTN_HEAD<=). The order of the overrides does not matter; you can have the GLOBAL_HEAD override first, or the LASTN_HEAD override first, and they will have the same effect, as long as they are separate.
However, it is not possible to have multiple overrides of the same variable. If you have two separate GLOBAL_HEAD overrides, only one will apply. If you would like to include customizations involving the same variable -- for example, if you have a GLOBAL_HEAD override to add a background image, and a second GLOBAL_HEAD override to change the font for your journal -- you will need to <a href="http://www.livejournal.com/users/howto/926.html">merge them together</a> first.
<h3>CSS Syntax</h3>
Correct CSS syntax requires certain elements to be included. If any of the elements are missing, your journal may not display, or may not appear as you want it to.
<ul>
<li>A style sheet declaration:
<blockquote><style type="text/css"></blockquote></li>
<li>Optionally, an "opening comment" tag, so that older browsers do not attempt to render the stylesheet as HTML:
<blockquote><!--</blockquote></li>
<li>The HTML element you wish to declare, with opening braces:
<blockquote>body { </blockquote></li>
<li>The CSS declaration that should be applied to that element, with semicolon (;) at the end:
<blockquote>background-image: url(<i>http://www.example.com/image.jpg</i>);</blockquote></li>
<li>Closing braces:
<blockquote>}</blockquote></li>
<li>A "closing comment" tag, required if you have an opening one; forgetting this after using an opening comment will stop your journal displaying:
<blockquote>--></blockquote></li>
<li>An end style sheet declaration:
<blockquote></style></blockquote></li>
</ul><br />Placing this all together, it looks like this:<br /><blockquote><style type="text/css"> <br /><!-- <br />body { <br />background-image: url(<i>http://www.example.com/image.jpg</i>); <br />} <br />--> <br /></style></blockquote> <br />This is simply an overview of CSS. For further information, including lists of what HTML elements can be declared and what CSS can be used, you will need to consult a HTML and CSS reference.
<h3>Website overrides</h3>
Some customizations involve *_WEBSITE overrides (LASTN_WEBSITE, FRIENDS_WEBSITE, DAY_WEBSITE, CALENDAR_WEBSITE). However, these overrides will only work if you enter a web address in the Web Page URL field on your <a href="http://www.livejournal.com/manage/profile/">Edit Profile</a> page. Any valid web address will work in this field; if you do not have a website of your own that you want to use, you can simply use <a href="http://www.livejournal.com/support/faqbrowse.bml?faqid=104&view=full">the URL of your journal</a>.
<h3>Style-specific overrides</h3>
If you have used a tutorial to create a particular effect, such as from the <lj user="howto" /> journal, you will need to make sure you have used the tutorial that corresponds to your journal style. Some tutorials are style-specific and will not work properly if you do not use the one appropriate for your style. (Many style-specific tutorials will state which style(s) they work with, to avoid confusion or problems.)
Most notably, overrides for changing comment link text (*_TALK_LINKS and *_TALK_READLINK overrides), and overrides for changing the width or position of your journal content (*_HEAD overrides with width or margin information), are extremely style-specific. An override that will work for one style may break a different style. You will need to make sure that you are using the correct override for your style, or will need to change your style to fit the override.
<h3>Cache</h3>
Finally, if your overrides are in the correct format and are still not displaying on your journal, make sure that you have saved the overrides after entering them, and then refresh your journal. Your browser may be <a href="http://www.livejournal.com/support/faqbrowse.bml?faqid=160">displaying a cached, or locally stored, copy of your journal</a>. Refreshing your journal will cause your browser to pick up the most recent copy of your page from the servers.
<lj-raw><h3>Further Reading</h3>
<ul>
<li><a href="lj://faq/124">[[faqtitle:124]]</a></li></lj-raw>
<li><a href="lj://faq/138">[[faqtitle:138]]</a></li>
</ul>
| I tried to customize my journal using overrides and now it won't display. Why? |
<a href="lj://faq/140" title="FAQ #140: [[faqtitle:140]]">This FAQ</a> provides examples of CSS with proper closed tags, and explains basic CSS syntax. It also gives solutions to other common problems with overrides.
If you've used CSS or overrides given to you to create a particular effect, such as from tutorials in the <lj user="howto"> journal, you may have changed parts of the CSS that shouldn't be changed. In general, tutorials in the <lj user="howto"> journal will indicate parts of the CSS you shouldn't change, so you should compare your CSS with that given in the tutorial. Similarly, you should also make sure that you've used the correct tutorial for your style, as some tutorials are style-specific and won't work properly if you don't use the appropriate one for your style.
It's also possible that your journal is temporarily displaying incorrectly (or not displaying at all) because of <a href="lj://faq/116" title='FAQ #116: [[faqtitle:116]]'>high load on LiveJournal's servers</a>. If this is the case, waiting a few minutes and refreshing the page should cause it to display properly.
| How do I create a custom S1 style? |
[[faqtitle:21]]">purchase a Paid Account</a>. Basic Account users can customize their journals using S1's <a href="lj://faq/124" title="FAQ #124:
[[faqtitle:124]]">overrides</a> or S2's <a href="lj://faq/170" title="FAQ #170:
[[faqtitle:170]]">customization options</a>.
Whether you create a blank style or base your new style on an existing template, the default name for a new style is <b><username>-<view type>-new</b>. (For instance, a new <b>LASTN</b> style of yours would be named <b>[[username]]-lastn-new</b>.)
You will need to change the name of your new S1 style by typing a new name under "Style Description" on the <a href="http://www.livejournal.com/styles/edit.bml">Edit Style</a> page. Until you change the name of the style from the default name, you will be unable to create new styles for that view. The style creation page will not overwrite an existing style.
Under "Style Options" on the <a href="http://www.livejournal.com/styles/edit.bml">Edit Style</a> page, you can choose whether the style is Public; this determines whether another LiveJournal user can see the code for your style.
You will need to save your style for any changes to take effect. You can then preview the style by using the <a href="http://www.livejournal.com/users/howto/16676.html">customview</a> link provided to you upon saving.
Once you have created a custom S1 style, you will need to explicitly <a href="lj://faq/250" title="FAQ #250:
[[faqtitle:250]]">choose to use that style</a> for your journal.
<lj-raw><h3>Further Reading</h3>
<ul>
<li><a href="http://www.livejournal.com/developer/styles.bml">S1 style system overview</a></li></lj-raw>
<li><a href="http://www.livejournal.com/developer/views.bml">S1 style system views and variables</a></li>
<li><a href="http://www.livejournal.com/developer/varlist.bml">S1 style system variables list</a></li>
<li><a href="lj://faq/168">[[faqtitle:168]]</a></li></ul>
