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:

background-color:#HEX_HERE;

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/

Widgets and the no-widgets paradox

http://wpbtips.wordpress.com/

When you haven’t activated any widgets for your sidebar* (in Appearance>Widgets), each theme displays its own default set of sidebar items. That’s why when you start a blog you see some items in your sidebar but if you go to Appearance>Widgets you see no widgets listed under “Sidebar” (before the latest update things were even more puzzling to beginners: there was a notice saying “you’re using 0 widgets”).

[* "Sidebar" for brevity: actually (depending on the theme) = the sidebar, or one of the sidebars, or a bottombar.]

Once you activate any widget, the default set is cancelled. Beginners are invariably (and justifiably) taken aback by this: they activate a widget, expect to see it in the sidebar in addition to the items already present, and instead end up with that widget alone.

So:

• If you want all the default sidebar items of the theme you’re using and no more than that, you need do nothing.

• If you want to remove some of them, what you must actually do is add the ones you really want by activating the relevant widgets. Same thing if you want some or all of the default ones plus additional ones.

• If you want nothing in a sidebar, then in most themes the way to do it is activate a blank Text widget. In some themes, however, the content of text widgets is enclosed in a frame, so a blank text widget will give you an empty frame in the sidebar instead of an empty sidebar; in that case activate a blank RSS widget instead.

Other things to note:

• Widgets are normally activated (in Appearance>Widgets) by dragging them from the “Available Widgets” module to the “Sidebar” module. They can be arranged in any order you wish, both when you initially activate them and afterwards (again by dragging them above or below others).

• Some users experience difficulties with dragging. If that’s the case, you can click “Screen Options” (while on the Widgets screen) and click “Enable accessibility mode”: that will produce a more surefire “Add” tab to the right of each widget name.

• The default sidebar items of a theme are artificially generated from the theme’s underlying files: in some cases they are not identical in look and/or function to the standard widgets common to practically all wp.com themes (only Monotone isn’t widget-aware).

• The default sidebar set varies from theme to theme. So if you haven’t activated any widgets yourself, you may get a different set of items when you switch from one theme to another.

• If you have activated one or more widgets, and switch from a theme to a similarly designed one, the widgets will remain in place; otherwise they move to “Inactive” and you must move them back to “Sidebar”.

http://wpbtips.wordpress.com/

Background color to text

http://wpbtips.wordpress.com/

For a block of text enclosed in a colored background (like the example below), you can use this code (in the html post or page editor, or in text widgets):

<div style="padding:1.2em;background-color:#HEX_HERE;line-height:1.4;">
TEXT_HERE
</div>

 

For hex color codes see the “Color” links in my left sidebar.
Padding = space around text; “line-height” may or may not be needed (to correct line spacing, in case it gets disrupted in the theme you’re using). Both numbers are just examples – you can change them.

 

To highlight a word or a phrase within a paragraph, like this, you can use this variant:

<span style="background-color:#HEX_HERE;">TEXT_HERE</span>

-

For a bordered background see this post.

-

http://wpbtips.wordpress.com/

Avoiding accidental smilies

http://wpbtips.wordpress.com/

If you want no smilies in your blog, you’d better go to Settings>Writing and make sure this option isn’t checked:
“Convert emoticons like :-) and :-P to graphics on display”

If you do want smilies, and have this option on, you may occasionally run into trouble: most character combinations for smilies are safe, but there’s the unfortunate case of the “8)” combination (for the smilies you can use in wp.com blogs see here). One might very well want, say, the year 2008 in parentheses, and instead end up with 200 plus a smilie with black glasses (supposedly meaning “cool”).

Solution one, enclose the parenthesis in span tags:

<span>)</span>

Solution two, write the html code for the parenthesis:

&#41;

(Both of course in the html post or page editor.)

http://wpbtips.wordpress.com/