limitless (phoenixdreaming) wrote in lj_userdoc,
limitless
phoenixdreaming
lj_userdoc

[s1] FAQ 140: My overrides won't work. What's wrong?

Oops. I intended just to post about a problem with the *_WEBSITE section of FAQ 140, and ended up rewriting most of the FAQ. The content hasn't been changed (other than a little in the *_WEBSITE section, to add a link to Edit Info), but the wording/phrased is largely changed. (Thanks to rho for help with this, and reading over and correcting some of the changes.)

Looking for feedback and thoughts on any of this, but in particular:

I haven't touched the section at the end of the FAQ on cache problems other than to change the link text for FAQ 160. I think it should probably emphasise that FAQ as a solution if it still may be cache but hasn't been solved by a standard refresh, though, and I'm not sure how to do that.

Then there's the example showing CSS elements, which includes comment tags as "essential" parts. Are there any browsers that can be used for LJing that do display CSS as text? (I'm really curious about this; even the most ancient still-used browsers that I know of support CSS in some way.) I'm not going to suggest removing them now, since it'd mean editing all the Howtos first, but I bet it'd get rid of many vanishing journal problems. I added a note after the 'closing comment' section saying "forgetting this after using an opening comment will stop your journal displaying"; which may well be unnecessary (and isn't well-phrased anyway), especially as FAQ 141 includes information on that -- but that FAQ isn't linked from this, I note.


In order for overrides to work properly, both the LiveJournal override and any CSS (Cascading Style Sheets) code must be correct. If either of these are not correct, the overrides will not work.

Correct CSS syntax requires certain elements to be included. If any of the elements are missing, your journal may not display, or will not appear as you want it to. The following example uses the CSS for adding a background image to show the required elements:
  • A style sheet declaration
    <style type="text/css">
  • An "opening comment" tag, so that older browsers do not attempt to render the stylesheet as HTML
    <!--
  • The HTML element you wish to declare, with opening braces
    body {
  • The CSS declaration that should be applied to that element, with semicolon (;) at the end
    background-image: url(http://www.example.com/image.jpg);
  • Closing braces
    }
  • A "closing comment" tag; forgetting this after using an opening comment will stop your journal displaying
    -->
  • An end style sheet declaration
    </style>

Placing this all together, it looks like this:
<style type="text/css">
<!--
body {
background-image: url(http://www.example.com/image.jpg);
}
-->
</style>

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.

If you want to use more than one CSS declaration in a single override (such as multiple CSS declarations in a GLOBAL_HEAD override), you must merge those declarations together.

To use CSS on LiveJournal, you must 'wrap' the CSS declarations in proper override format. For instance, to use our background override as a GLOBAL_HEAD override (causing it to display on all pages of your journal), you would need to enter this:
GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(http://www.example.com/image.jpg);
}
-->
</style>
<=GLOBAL_HEAD

If you try to place an override of one style variable inside another override, the overrides will not work correctly. For instance, placing LASTN_TALK_READLINKS inside LASTN_HEAD means that neither will have the intended effect. The same problem will occur if you forget to close an override block. For example, overrides to add a background image for your whole journal and a custom cursor for your LASTN page only would have to be entered like this:
GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-image: url(http://www.example.com/image.jpg);
}
-->
</style>
<=GLOBAL_HEAD

LASTN_HEAD<=
<style type="text/css">
<!--
a:hover {
cursor: crosshair;
}
-->
</style>
<=LASTN_HEAD

Note that the GLOBAL_HEAD override is closed (with <=GLOBAL_HEAD) before the LASTN_HEAD override is opened.

If you use a *_WEBSITE override and it does not work at all, you probably do not have a website set in your userinfo. *_WEBSITE overrides will only work if you enter a web address in the Website URL field on the Edit Info page. You do not need to have a website of your own, as you can simply use the URL of your journal. Any other valid web address will also work in this field.

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 displaying a cached, or locally stored, copy of your journal. Refreshing your journal will cause your browser to pick up the most recent copy of your page from the servers.

Paid and permanent account holders, as well as early adopters, can create custom styles rather than using overrides.

Further Reading

Tags: cat-s1, faq140, status-resolved
Subscribe
  • Post a new comment

    Error

    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 5 comments