Adding Custom CSS

[s2flexisquared]

CSS is a pretty powerful tool to customize journal layouts. If not stated differently by the user, LJ includes a default stylesheet, which already styles the whole journal. There are many ways to adjust it:

All Accounts (Free, Plus, Paid):

1. using the color pickers in the Customizations Wizard under the Colors tab, selecting fonts under the Font tab, setting a background image under the Images tab, and widths under the Presentation and Sidebar tabs.
   
   This is your preferred way if you are mostly happy with an already existing theme (e.g. Autumn or Eclipse), and just want to make minor adjustments to certain areas.
   For any changes in the color pickers to take effect in your journal, you have to make sure that you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab)
   
   
2. the Custom Stylesheet textfield in the Customizations Wizard under the Custom CSS tab
   
   This is the recommended way for any small changes to the CSS that the color pickers would not allow (for example, adding a banner), and for premade free layouts.
   If you only want to change a few details of an already existing theme, make sure that you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab).
   If you have a premade free layout from one of the layout communities, this is the place to put it. Make sure, though, that you set » Use layout's stylesheet(s) to No (in the Customizations Wizard under the Custom CSS tab), in order to avoid any confusion if the default and your added CSS contradict each other. It might have some unpredictable and hard-to-explain effects on the journal's display.
   
   When you add CSS this way to override the layout default stylesheet, selecting any background images, colors, fonts and widths in the Customization Wizard might not take effect any longer.
   
   
3. or by setting up an external stylesheet in the Customizations Wizard under the Custom CSS tab.
   
   You can use the external stylesheet pretty much like the Custom Stylesheet textfield (for small changes or whole premade layouts):
   If you only want to change a few details of an already existing theme, make sure that you set » Use layout's stylesheet(s) and » Use layout's stylesheet(s) when including custom external stylesheet to Yes (in the Customizations Wizard under the Custom CSS tab).
   If you have a premade free layout from one of the layout communities, this is the place to put it. Make sure, though, that you set » Use layout's stylesheet(s) and » Use layout's stylesheet(s) when including custom external stylesheet to No (in the Customizations Wizard under the Custom CSS tab), in order to avoid any confusion if the default and your added CSS contradict each other. It might have some unpredictable and hard-to-explain effects on the journal's display.
   
   In both cases, you need to set » Use external stylesheets to Yes.
   The CSS file (a normal text file with the file extension .css instead of .txt, with all the CSS coding in it) needs to be uploaded to a reliable webhost. Then, the link to this uploaded CSS file has to be put into the » Custom external stylesheet URL text field.
   
   When you add CSS this way to override the layout default stylesheet, selecting any background images, colors, fonts and widths in the Customization Wizard might not take effect any longer.
   
   
4. Custom Stylesheet textfield vs. external stylesheet
   
   The textfield is a relatively new LJ feature, therefore most tutorials only talk about the external stylesheet when explaining ways to include custom CSS. You can also use both the Custom Stylesheet textfield and an external stylesheet at the same time, e.g. use the external stylesheet for a premade layout, and the textfield for small individual adjustments to that premade layout (or vice versa).
   
   The main differences between the textfield and the external stylesheet are:
   
   
   • The external stylesheet needs to be hosted on a reliable webhost, one that has little to no downtime, allows hotlinking, and offers enough traffic (otherwise the CSS becomes unavailable due to exceeded bandwidths).
     
   • The external stylesheet will be linked on the journal, whereas the textfield CSS is printed directly on the journal's source code; i.e. if the CSS codes in textfield and external file contradict each other, the textfield CSS will overrule the coding in the external file.
     
   • Linking stylesheets rather than printing them out in the journal page's source code reduces the file size per page, which is recommendable for dial-up users.
     
   • Because of the hosting and linking of the external stylesheet, browsers, proxy servers and even LJ itself might cache older versions of the external CSS, and changes might not immediately take effect.
     
   • Also, if your internet connection is slow, LJ has server problems, or your webhost is down, a linked stylesheet might be loaded incompletely, which in turn might result in incorrectly displayed layouts.
   Frankly, I recommend using the textfield rather than the hosted external stylesheet.

Paid Accounts only:

1. manual use of properties:
   This is the same coding which the Customization Wizard uses to store the CSS data. If you don't use a user layer/the Customization Wizard, you can add this coding to your theme layer.
   
   the Custom Stylesheet textfield:
   set custom_css = """ YOUR CSS HERE """;the External Stylesheet:
   set external_stylesheet = true; # Use external stylesheet?
   set external_stylesheet_url = "STYLESHEET URL"; # URL to external stylesheetLayout Default stylesheets. Set both to false if the custom_css property or the external stylesheet are a premade layout.
   set include_default_stylesheet = true; # Use layout default?
   set include_default_stylesheet_with_linked = true; # Use layout default when an external stylesheet is used?
   
2. print_stylesheet()
   
   This is the function that prints out the LJ-provided stylesheet which can be found at http://exampleusername.livejournal.com/res/xxxxxxx/stylesheet?xxxxxxxxxx; i.e. with this coding, you are replacing the layout default stylesheet. Hence you will need to include a complete premade layout this way, or parts of your journal would remain unstyled.
   
   It also means that selecting any background images, colors, fonts and widths in the Customization Wizard will not take effect, unless you code the CSS to use the respective properties (as the original Flexible Squares function does).
   
   Of course, since we're dealing with a function here, you can also use variables and if/else-statements to make your life easier (e.g. to print certain parts of CSS only in certain page views).
   
   Make sure you set » Use layout's stylesheet(s) to Yes (in the Customizations Wizard under the Custom CSS tab, or by putting set include_default_stylesheet = true; in your theme layer), otherwise this function will never be called by LJ, and the CSS won't be applied to the journal.
   function print_stylesheet()
   {
   """
   /*your stylesheet code goes here*/
   """;
   }
3. Page::print_custom_head()
   
   This function allows you to print custom text within the tags. It is not limited to CSS, though that is the usual application. It does not replace the default layout stylesheet, as long as » Use layout's stylesheet(s) is set to Yes (in the Customizations Wizard under the Custom CSS tab, or by putting set include_default_stylesheet = true; in your theme layer). Therefore, it is the recommended function if you want to add in only small changes to the CSS.
   
   It also means that selecting any background images, colors, fonts and widths in the Customization Wizard will not take effect, unless you code the CSS to use the respective properties (as the original Flexible Squares function does).
   
   Of course, since we're dealing with a function here, you can also use variables and if/else-statements to make your life easier (e.g. to print certain parts of CSS only in certain page views).
   function Page::print_custom_head()
   {
   """
   
   """;
   }This function also allows for another way to include page view-specific CSS. If one wanted to print CSS only if an individual entry is viewed, one could use the function EntryPage::print_custom_head() instead. Any views that have no such function of their own fall back to the default Page::print_custom_head(), views that do have their own function ignore the default one and only print what is stated within their own function.
   
   
4. print_custom_stylesheet()
   
   This function is no longer in use. Please include your CSS in any other way.

there are hundreds of CSS tutorials online explaining how CSS works, and irinafan made an extensive guide to show what classes are available in Flexible Squares. therefore, they are not explained any further in this tutorial.

Additional notes/FAQ for the curious and nerdy:

1. Make sure to check the stylesheet for stray or missing brackets. Can be done by feeding it to the W3C CSS validator.
   
   
2. Make sure the external css document is of the proper document type (.css) and does not have any strange characters in it. Also make sure it's just css, and does not have HTML.
   
   
3. LJ's CSSproxy/CSScleaner scans linked stylesheets for illegal characters and anything that looks like a malicious script, which may result in changes made to external stylesheets. Have a look at the CSScleaner's output if you feel like your external stylesheet does not get applied to your journal properly. You can find it at http://cssproxy.livejournal.com/?u=stylesheeturl (where stylesheeturl is the URL of your external stylesheet).
   
   
4. Page::print_custom_head() results in the CSS being printed twice, above and below the default layout stylesheet. That is a small issue of Flexible Squares.
   
   
5. If you use both Page::print_custom_head() and print_stylesheet() to style your journal, bear in mind that due to the order in which LJ prints the different stylesheets, Page::print_custom_head() will override any contradictory statements in print_stylesheet().
   
   
6. You can have both Page::print_custom_head() and print_stylesheet() only once in your theme layer. That's a general rule, by the way: Never have the same function defined twice in your theme layer. (You can easily check that in the left frame of the Edit Layer page. There shouldn't be more than one link to the same function.)
   
   
7. If you set » Use external stylesheets and » Use layout's stylesheet(s) to Yes, yet don't provide an URL to an external stylesheet, the layout default stylesheet will be linked in the source code. If » Use external stylesheets is set to No, the layout default stylesheet is printed directly into the page's source code.
   
   
8. The resulting order of included CSS is:
   1. Page::print_custom_head() CSS (printed)
      
   2. The layout default stylesheet or print_stylesheet() CSS (linked, only in case of an external stylesheet, whether or not there is an URL to said external stylesheet)
      
   3. The external stylesheet (linked, if an URL is provided)
      
   4. The layout default stylesheet or print_stylesheet() CSS (printed, if there is no external stylesheet)
      
   5. The Custom CSS textfield (printed)
      
   6. Page::print_custom_head() CSS (printed)
   
   
9. Whenever you include and do not replace the layout default stylesheet, removing a line of CSS coding from your custom CSS might not have the desired effect. Check the layout default stylesheet for any statements that contradict what you want to achieve, and add the appropriate overrides in your custom CSS.
   
   
10. Variables and page view-specific CSS are only available within functions, hence only for Paid Accounts.