InsaneJournal

Tweak says, "I'm Coo-Coo for Cocoa Puffs!"

The most common problem with overrides is invalid CSS syntax and/or improper construction of InsaneJournal overrides. In order for overrides to function correctly, they must not only be proper CSS (Cascading Style Sheet) syntax, but be in the proper format for use on InsaneJournal.

Proper CSS syntax involves the following elements. (As an example, we will use the override for adding a background image.) If any of these elements are missing, your style sheets will not function properly, and your journal may not display.


* 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
-->

* 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 specifications can be used, you can 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 (http://www.insanejournal.com/community/howto/1020.html).

To use CSS on InsaneJournal, 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


Another common problem that will cause overrides not to work is if you try to place another override of a different type inside an existing override. For instance, placing LASTN_TALK_READLINKS inside LASTN_HEAD will cause neither to display properly. Each override block must be closed before you begin a new one. For example, a background override with a custom cursor on 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 before the LASTN_HEAD override is opened.

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.


"Self-committed" [paid] and Permanently Insane account holders, as well as Early Inmates, can create custom styles rather than using overrides. This process is described in http://www.insanejournal.com/support/faqbrowse.bml?faqid=43 .


Further references:

"What are overrides? How do they work?"
http://www.insanejournal.com/support/faqbrowse.bml?faqid=100

"In what other ways can I customize my journal?"
http://www.insanejournal.com/support/faqbrowse.bml?faqid=102