In most LiveJournal layout-help communities many questions come up that always have some variation of the same answers. To make this community more efficient let's tackle some of those questions in order of how frequently they're asked.
Writing Basic CSS Overrides
Question: "How do I write the code needed for a Bloggish override?"
To do basic CSS overrides or to use your own (or someone else's) custom style sheet in Bloggish, you'll need to go to LJ's Customize Style page and enter your new code into the Custom CSS box. The code for a basic CSS override is always made up of two things: a property you wish to change, and a value you wish to assign to it. Written in CSS, it will look like this:
element {property you wish to change: new value;}
CSS is not a computer programming language, but the rules and the math used for it can help you learn how to program.
Hiding Elements
Question: "How do I hide some element of the sidebar/mood theme/entry date/etc.?"
Answer: Almost any unwanted property within a layout (including the default images) can be hidden with the property/value set "display: none", like so:
element {display: none;}
If "display: none" doesn't work try:
element {display: none !important;}
The "!important" value tells the browser to give more importance to that element than to other elements.
Inserting Images
Question: "How do I insert a background image into the banner/footer/sidebar/etc.?"
Answer: Background images can be inserted into almost any element of a layout with the following CSS:
element {background: url(http://yourimages.com/yourimage);}
Within the above set of brackets, and after the image URL that's in parentheses, you will need to add the repeat-value, and (optionally) the top or bottom values, left or right values, and padding values. The height value is added, if needed, after the semi-colon, with another semi-colon after it. The values tell the browser, in order of how I listed them:
- Should this image repeat? If so, should it repeat across the entire element?
- Should this image repeat only across the left or right hand side and/or only across the top or bottom of the element?
- Will this image need some padding to make it fit the element correctly - or will it need some padding removed?
- Will this image need a height specified so that the browser knows how much of the image it should show? (Hint: in the case of banner images, you will almost always need to specify a height.)
Learn more here about adding background images using CSS.
Text Styling
Question: "How do I change the size, color, and/or font-type of text in the header/entry box/sidebar/etc."?
Answer: Text size can be changed by specifying a value for "font-size". Text color can be changed by specifying a value for "color". Font-types can be changed by specifying the "font-family". For example, your journal currently has medium-sized pink Arial text. You want to change it to large-sized black Georgia text. You'll write that as:
element {font-size: large; color: #000; font-family: Georgia;}
Learn more here about changing fonts using CSS.
Style Options With Free Accounts vs. Paid
Question: "What parts of the style can I change in S2 Bloggish with a free LJ account?"
Answer: This question is answered in LJ's FAQS (and here is a handy comparison chart), but it bears repeating since many questions continue to come in about it.
Free (that is, Basic) and Plus users who use Bloggish can make any changes to their CSS that they desire, including using custom style sheets and/or overrides, but they have no access to the Dev Area, so they cannot, say, move the mood theme from the top to the bottom of the page, insert images in between elements in the sidebar, create a Sticky Post from within LJ's Customize Journal Style area, or do other things that are not normally possible with Bloggish's CSS.
!Important note: Just because you can't change a layout element in Bloggish with a Basic or Plus account does not mean you have to buy a Paid account to do so. If you have your heart set on including a certain element or styling factor in your layout but don't want to upgrade your LJ account, you may want to consider using a different S2 style.
Using The Dev Area for Advanced Styles
Question: "How do I hack into [insert element in question] to [insert desired result] on a paid account?"
Answer: This community has dozens of tutorials for paid users here. Each tutorial for making advanced changes is marked [Paid] in the entry title. The tutorials marked [All] work on all account levels.
Learning More About S2 Bloggish
"How can I figure out the CSS names of the S2 Bloggish elements I want to change/understand exactly how S2 Bloggish works?"
The best way to learn how to change the Bloggish CSS is to study
carriep63's CSS Guide to Bloggish, which use screen shots to show you each element, and tells you their names and what they do in simple language. I learned how to write and edit CSS by learning how to work with Bloggish - and you can, too.
Since there's no doubt I've missed some question-and-answer opportunities here, feel free to add whatever Frequently Asked Questions I've forgotten in the comments. I'll edit this entry to include them as needed.
Edited 3-9-2009.