Text Indenting in Paragraphs

See the post after this about Blogs Disappear to see more results of using the text-indent.

Step One Occurs In The Template

Every once in a while, someone asks how to indent a paragraph and overcome the habit HTML has of not recognizing more than one space in a row! In your template's CSS, place this line: .p2 p {text-indent: 25px;} Don't ignore the "." in front of p2 above; it's only needed that once. The "p2" is an arbitrary name. You could name yours "piddle" or "Ralph". That instruction is telling the p2 style that an opening paragraph tag should have that much of an indentation. You could increase or decrease the number. Save your template so that it'll have this new instruction at hand. Only this paragraph of this post is indented. When you next write a post, every "paragraph" should have the paragraph start tag! As far as I know, it's the only way for the system to know that it's supposed to be a paragraph. Once it knows that fact, it knows to follow the style instruction and make a text indentation of that specified (25px) width.

Step Two Occurs In Every Post
The instruction that tells your blog to apply that rule is when you surround your post with an open and close "div" tag like so: <div class=p2> text </div>

Change Color, Font, And Size of Text

When you select "Fonts and Colors" on the Layout page, "Text color" is the first in the vertical list, but "text font" is further down (sixth on my list); if you click on that link, a list of fonts (not previously showing) should appear in place of the color boxes out to the right. Furthest to the right are boxes to check for Smaller, Larger, Bold, and Italic. If you still aren't seeing what you expect, never underestimate the value of "clearing the cache and cookies" to update your screen.

Convert Html to a Displayable Post Text

-- AMPERSAND CODES can be used in short sections to show the code itself (which is what I might do to show single nonbreaking space. HTML Ampersand Character Codes -- For longer sections that need to be "translated" or if you're lazy, the programs below convert html code for you. Both work well, though Postable's first screen is a little less intuitive. Postable Quick Escape The code above would be displayed first in the post as code, then on screen here like this (converted by Quick Escape): <a href=\"http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/\">Quick Escape</a> Normally that anchor code would be executed as a link, not shown on screen.

END.

Preformatted Text--Show Spaces and Html

ee cummings's defunct but would not like this stupid Blogger bogger, cause he couldn't do this little dance in it, could he? would he, mister death?

Dear mr cummings: I know you're dead, but you might try putting the text of your poems between these tags:

<pre> text </pre>

This means that it will accept the preformatted text exactly as presented, though usually not in fancy fonts. The pre tags are also useful for computer codes if you don't wish to use the html ampersand codes or otherwise translate the special coding signs.

[More below...]

The PRE element contains preformatted text. Visual browsers should render preformatted text in a fixed-width font, should not collapse whitespace, and should not wrap long lines.

PRE is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it wherever possible. When using PRE, authors should avoid altering the element's fixed-width font or non-collapsing whitespace properties by means of style sheets.

related matters:

-- NON-BREAKING SPACES can be used as extended space or as a tab. A non-breaking space looks like this:   Three of them would be simply:     An ee cummings poem, though, might drive you crazy, so be cautious! SHOWING HTML CODE: -- AMPERSAND CODES can be used in short sections to show the code itself (which is what I did to show the non-breaking space code above). HTML Ampersand Character Codes -- For longer sections that need to be "translated" or if you're lazy, the programs below convert html code for you. Both work well, though Postable's first screen is a little less intuitive. For Postable's mysterious first screen, just left-click the mouse on the phrase in the upper left corner, "for your copy and pasting pleasure" and, when the screen clears, you can enter the code you want it to fully display. Next you click on "Make it friendly" in the lower right corner and it will do so. Right-click the mouse and Copy the highlighted text, then paste it where you intend it to show. Postable Quick Escape

END.

Use CSS To Align Header Text

Text-align: center/left/right

Header Alignment
Setting alignment for the header has to be done in the template. The first section below of CSS instructions (from my blog, "The Rat Squeaks") does various things including that it sets the blog title to be centered. .Header h1 { margin:0 0 .25em; color:$titlecolor; font: $pagetitlefont; font-variant: small-caps ; text-align: center; }

[More below...Description alignment]

Description Alignment
Not far behind it comes this section for parameters of the Description, also setting the alignment to Center: .Header .description { margin:0; max-width:700px; line-height:1.8em; text-transform:none; text-align:center; letter-spacing:.2em; color:$titlecolor; font: $blogDescriptionFont; }

Your template may vary, so I can only give this example of where and how to find/place these CSS instructions. Use the exact formula if you are placing a new instruction there. Examples given below:

text-align:center; text-align:left; text-align:right;

END.

Change Color And Font

Steps 1--10 to change a font or color in New Blogger

1. go to the Dashboard 2. click on the Page Elements tab. 3. look up above and click on Fonts And Colors. You'll see a list. 4. on the left side click on which area you want to change color. 5. on the right side click the correct color for that text area. 6. on the left side you may have to scroll down for the font list. 7. then on the left click on which area you want to change text in. 8. on the right side click on the font, size, bold, italics you want. 9. in 4-7 above you can see the changes in the small view window at the bottom of the screen. Sometimes it has a glitch and won't show, but you can make the changes anyway if you are confident of yourself. You will see the change (or not) when you return to View Blog. If you're not confident, try again later. 10. be sure to Save Changes before you exit.

Things you can change in the list include:

Text Color
Blog Title Color
Post Title Color
Sidebar Title Color
Date Header Color
Text Font
Blog Title Font
Blog Description Font
Sidebar Title Font
Date Header Font

Some detail about Text Fonts:

Text color is the first in the vertical list, but "text font" is sixth; if you click that link, a list of fonts (not previously showing) should appear in place of the color boxes out to the right. Furthest to the right are boxes to check for Smaller, Larger, Bold, and Italic. If you still aren't seeing what you expect, never underestimate the value of "clearing the cache and cookies".

Body (or background) Color

Oddly enough, to change the blog's background color requires going into the template. See if you find a section resembling this from one of my blogs:

body {
background:oldlace; url("xxxhttp://www.blogblog.com/harbor/rocks.jpg") no-repeat right bottom;
background-attachment:fixed;
margin:0;
padding:0;
font:x-small Georgia, Serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}

or, similarly, this is the code for this blog:

body {
background:#123;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

It's the "body" where you want to make the change or else create the color. Find or alter the color statement--whether you use a number or name doesn't matter. If you have to add the "background: color;", just be sure it's inside the brackets like you see in the two examples above.

END.

Page Elements--Html/Javascript & Text

The Html/Javascript Page Element Is Better!

At first I chose some Text Page Elements for my information at the top of the blog, but I have since changed it to an HTML/JAVASCRIPT Page Element. For some reason, both require line breaks in order to separate the text into paragraphs. Fair enough, I can do that. But the Text element loses those line breaks every time you return to do some editing, and that's crappy.

So if you had paragraphs or any kind of one-line-at-a-time "grocery list", you'd have to revamp the post to restore it to what you started with! Not hard, just time-consuming!

Text page elements are only good for a straightforward paragraph of information or for some other kind of information that you don't have to edit often.

In the HTML page element, nothing changes or is lost, and you can just edit what you meant to without a lot of special revamping. This is important to a ceaseless reviser like me--I often re-edit!

It is misleading to all users that we are able to put HTML into a Text page element when it's so problematic to do so! And there should have been a warning about this difficulty with making paragraphs. Anyway, fair warning from me!