Selected articles from One Cool Site

http://wpbtips.wordpress.com/

General Blogging Tips:

How to structure a reader and search engine friendly blog
Content is king
How to lose me as a reader
Categories and tags

Images:

Image editing and preparation tips part 1
Image editing and preparation tips part 2
SEO images enhance your posts
How good is WordPress at resizing and resampling your images?
Images: optimizing, pre-sizing and resizing
Image recources
Free online image compression and optimization programs
Free badges, banners, buttons, labels, logos
RSS Feed icons and buttons
Watermark your images
Kubrick header generator available
Free image hosting services

Copyright & Content Theft:

Copyright basics for bloggers
What is copyright?
What to do about copyright
Dealing with content thieves 1
Dealing with content thieves 2

Other Tips:

Disaster planning: backups for bloggers
Offline blog editors reviews
How to make html tables for your WordPress blog
How to take a screen shot
Blog colors on different browsers and monitors
Why javascript is a security risk
Blogger sucks: WordPress rocks!

Other Recources:

Color selection tools
HTML international codes, accent marks and diacriticals
Keep your passwords safe
Eluding email address spam bots
Free comment tracking services for bloggers
How to maintain and track links
How to remove data from Google’s cache
How to add a countdown ticker to your blog
CSS resources for bloggers

http://wpbtips.wordpress.com/

Borders (pt. 2)

http://wpbtips.wordpress.com/

Normal (rectangular) borders were covered in Borders pt.1; this post focuses on borders with rounded corners.

But! keep in mind that rounded corners are of limited use: at the moment they don’t work in Internet Explorer or Opera. (If you’re viewing this post using either one of them, you’ll see the right color, thickness etc., but no curves.)

As explained in the previous post, you need a p tag for a single paragraph, a div tag for more than that; you need to set border thickness, type, and color, as well as text padding; plus you can add commands for background color, text formatting, etc.

The basic command for rounded corners is “border-radius:”, followed by a px number to determine how pronounced the curvature will be. Unfortunately, this feature isn’t standardized yet, so you have to add an array of separate commands to make it work with different browser engines (“border-radius:” preceded by “-moz-” for Firefox, Flock, and other mozilla-based browsers, by “-webkit-” for Safari, Chrome, and other webkit-based browsers, by “-khtml-” for khtml-based browsers).

Examples:

Code for this border:
<p style="border:4px solid #9fb6cd;border-radius:6px;-khtml-border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;padding:10px;">
TEXT_HERE
</p>

Code for this border:
<p style="border:4px solid #9fb6cd;border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;background-color:#f3e88e;padding:10px;">
TEXT_HERE
</p>

You can apply that to each corner selectively. In that case you add “top” or “bottom” and “left” or “right” as shown in the following example (note difference in the moz command):

<p style="border:solid 6px #9fb6cd;border-top-left-radius:12px;-khtml-border-top-left-radius:12px;-webkit-border-top-left-radius:12px;-moz-border-radius-topleft:12px;border-top-right-radius:33px;-khtml-border-top-right-radius:33px;-webkit-border-top-right-radius:33px;-moz-border-radius-topright:33px;padding:10px;">
TEXT_HERE
</p>

The border-radius code can be manipulated to produce various shapes, including a full circle; example (no that’s not an image!):

OH!

Code:

<div style="border:solid 15px #9fb6cd;border-radius:100px;-khtml-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;width:140px;height:140px;text-align:center;font-size:400%;color:#cd3278;line-height:140px;padding:15px;">
TEXT_HERE
</div>

To get a circle, you need to observe the following:
width = height [= line-height, for a vertically centered word]
padding number = border number
radius number = (width : 2) + (border x 2)

But, I repeat, don’t forget that none of this works in IE (no surprise…) or Opera. Also note that if you switch from html to visual in the WP editor, parts of the code may be stripped out, destroying the effect.

http://wpbtips.wordpress.com/

Widgets on pages or single posts

http://wpbtips.wordpress.com/

In most wp.com themes, widgets are displayed on all dynamic pages (main posts page, category pages etc.) as well as when you view a static page or a single complete post. There are some exceptions or special cases, though:

On static pages

Blix, Iceburgg: no sidebar.
Fauna: sidebar displays links to the page’s child-pages only.
Unsleepable: no sidebar if you haven’t activated any widgets.

On single posts

Black-Letterhead, Day Dream, Iceburgg, Kubrick, Sapphire: no sidebar.
Connections, Fauna, Sunburn: sidebar displays post metadata only.
Grid Focus: alternative sidebar (“Primary-Post” on dashboard widget screen).
Unsleepable: sidebar yes, bottombar no.

Special cases

iNove, P2: sidebar can be deactivated (under Appearance > iNove Theme Options / P2 Options; option applies to the blog in general – all dynamic and static pages).
Monotone: not widget aware.

http://wpbtips.wordpress.com/

Position absolute (pt. 1)

http://wpbtips.wordpress.com/

According to www.w3schools.com, “an element with position: absolute is positioned at the specified coordinates relative to its containing block”. Using this command, you can work various sorts of magic that would normally require the paid CSS upgrade: you can put code in a text widget and make something show up at another point on the blog page instead of the sidebar or bottombar.

In its most basic form, the code model is this:

<div style="position:absolute;top:NUMBER_HEREpx;left:NUMBER_HEREpx;">
ELEMENT_HERE
</div>

Various additional commands may be needed, depending on the theme and the particular element to be positioned.

Note that the top (or bottom) and the left (or right) px numbers are offset numbers: if, for instance, you increase the top number, the element will move downwards.

Example 1

In my primary blog I’m using Chaotic Soul. I hated the original “Get a free blog” notice in the footer, so I masked it with a strip in a color identical to that of the theme background. Code:

<div style="position:absolute;width:100%;bottom:-70px;left:0;height:42px;background:#161410;"></div>

The footer includes a link to the designer’s site as well; hiding that isn’t fair, so I transferred it to a text widget. Before/after snapshots here.

Example 2

Unsleepable has a plain black header, with no built-in option for inserting a custom header image. You can do it with the following code:

<div align="center" style="position:absolute;width:100%;top:-120px;right:550px;">
<a href="BLOG_URL_HERE"><img src="IMAGE_URL_HERE"></a>
</div>

The dimensions of the image need to be 776 x 100 pixels. The image must include the blog title, since the original one will be masked. In designing the image you must take into account that logged-in wp.com users get the grey admin bar up top, which will hide the upper 28px of the image. For a specimen, check this feast of a blog (fellow forum volunteer Tess).

Example 3

Ocean Mist has navigation tabs in the header, but with no “Home” link. By way of an exercise rather than a recommended solution, here’s a code for a home tab:

<div align="center" style="width:100%;top:149px;left:12px;position:absolute;">
<div style="width:702px;">
<table border="0" align="left">
<tr>
<td style="background-color:#526A74;padding:6px;">
<a href="BLOG_URL_HERE"><span style="color:#f3f3f3;"><h4>Home</h4></span></a>
</td>
</tr>
</table>
</div></div>

Result:

This example also serves as an introduction to the problems you get with many themes: in contrast to Unsleepable, in this case the presence or absence of the grey admin bar will affect the placement of the element. The image above displays what logged-in wp.com users will see; for other visitors (or for logged-out wp.com users) the tab will show up lower. In the next post on position absolute, there’ll be a complete report on all themes re this and other shortcomings.

http://wpbtips.wordpress.com/

Borders (pt. 1)

http://wpbtips.wordpress.com/

Code model (in the html post or page editor, of course, as well as in text widgets):

<div style="border:1px TYPE #HEX;padding:1.2em;">
CONTENT_HERE
</div>

The numbers given above are examples. The border number determines the thickness of the border (1px = thinnest). The padding number determines the amount of space between the border and the content. Note that em is a proportional unit (if you zoom in, the space will get larger); for a fixed space use px instead (for normal purposes, around 10).

The “div” tags will do for any section, including a complete post. For a single complete paragraph you can use “p” instead. For one or more words within a paragraph, like this, you need “span” instead of “div” (probably with a very low padding number – example is .2em).

For a border around an image you insert the style=[etc.] part of the code (with a space before and a space after it) after the “img” tag of the image code (with no padding, if you want no space between image and border).

Where I’ve written HEX, you write the hex number for the color you want (for hex numbers see the “Color” links in my left sidebar). For basic colors you can write a plain word (“black”, “red”, etc.) instead of a hex number, without the sharp sign.

Where I’ve written TYPE, you specify the type of border you want, using one of the following indications:

solid
double
dashed
dotted
outset
inset
groove
ridge

The first four are self-explanatory; the other four are 3D/shadow effects. Examples:

solid (border:1px)

double (border:3px)

dashed (border:2px)

dotted (border:3px)

outset (border:6px)

inset (border:6px)

groove (border:8px)

ridge (border:8px)

For a border combined with a colored background, you add this to the code (inside the quotation marks):

background-color:#HEX_HERE;

To constrain the width of the whole block (like I’ve done above), you add this:

width:NUMBER_HEREpx;

To center such a reduced-width block, you need this:

<div align="center">
COMPLETE_BORDER_CODE_HERE
</div>

To constrain the width of the whole block, and have the rest of the content wrap around it, you add this:

width:NUMBER_HEREpx;float:left;margin-right:NUMBER_HEREpx;

(Float left and margin right, or vv.)

You can also add commands for formatting the text inside the frame – see codes for alignments, for spacings, for text color, size, and font.

Finally, instead of a full frame around a text block, you can have a border along one or more of its sides; instead of border, you use one or more of these: border-left, border-right, border-top, border-bottom.

http://wpbtips.wordpress.com/

Vigilance: further color changes

http://wpbtips.wordpress.com/

Background to sticky post

A sticky post in Vigilance is visually differentiated by adopting the color you’ve set for borders (under Appearance > Vigilance Options) as its background; if you’ve set no hex number for borders, you get a light grey background. You can override that with code in the html editor.

For a different background color:

<div style="background-color:#HEX_HERE;margin:-10px -11px -6em;padding:1em 13px 7em;">
COMPLETE_CONTENT_HERE
</div>

For no background color at all:

<div style="background-color:#fff;padding-bottom:6em;margin:-10px -10px -6em;">
COMPLETE_CONTENT_HERE
</div>

Background to Alert Box

By default, the Vigilance “Alert Box” gets a brownish grey background. Override:

<div style="width:580px;height:100%;margin-top:-22px;margin-bottom:-2px;margin-left:-20px;background-color:#HEX_HERE;padding:12px;">
COMPLETE_CONTENT_HERE
</div>

Or with a thin border as well:

<div style="width:580px;border:1px solid #aaa;height:100%;margin-top:-22px;margin-bottom:-2px;margin-left:-20px;background-color:#HEX_HERE;padding:12px;">
COMPLETE_CONTENT_HERE
</div>

(The aaa suggested for the border is grey – you can change it. For hex color codes see the “Color” links in my sidebar.)

http://wpbtips.wordpress.com/