Christina Sng dot com » Coding

BlogPress introduces HTML tags

Christina — Sat, 28 Aug 2010 06:12:02 +0000

BlogPress is giving its competitors a serious run for their money. It is just introduced HTML tags and a promise of more things to come. It is still definitely the best blogging app for iPhone by far.

That said, it just crashed when I clicked Save and Create New but when I started the app again, the post had been saved so no big. Use Save Draft Only till this bug is fixed.

Twittering on WordPress

Christina — Sun, 25 May 2008 19:15:09 +0000

The Twittering begins!

I’ve finally got Twitter on both my main blogs, this one and Strange Machines. Although there are tons of Twitter plugins for WordPress blogs (and having installed 2 that don’t seem to work), I found it easiest to cut and paste the custom HTML and Javascript Twitter code myself.

Here’s how:

1. First ensure your Twittering is set to public.

At Twitter, go to Settings -> unclick Protect my Updates -> Save.

2. Now, each theme is a bit tricky. This one actually doesn’t have any Sidebars defined (you’ll see when you click Widgets), so what I had to do was:

A. Head to Design -> Theme Editor -> Sidebar

and right after

Align it Right in WordPress

Christina — Sun, 25 May 2008 18:42:12 +0000

When fixing your alignment from the left, don’t forget to specify an equal white space distance from the right too.

As you’ve probably noticed, I have added Twitter updates on the top right hand box there to humanise the blog a little. ->

The default setting in Stylesheet flushed it right against the margin which is ugly and awful design.

To fix it, simply open your Design -> Theme Editor -> Stylesheet.

Look for the line: .sidebar ul

and add: padding-right: 10px;

Tweak as needed till both left and right white spaces look equidistant.

Fixing Alignment on WordPress

Christina — Fri, 09 May 2008 20:33:18 +0000

I confess it has been a long time since I have had to edit someone else’s code. Admittedly these days it is easier to build a site with customisable templates (themes, here on WordPress) but it takes time to understand what another developer has written and immerse your vision into their code.

If it is straightforward HTML, it is quite easy. Remember, I’m a dinosaur. I use tables. Even on my Blogdrive blogs, I had handwritten my own code since they run from 3 files only. Now that I am on WordPress, running on someone else’s CMS has forced me to adopt more CSS edits amidst a varied file structure with each theme which may contain numerous files.

Still it is a fun challenge. I’ve been fiddling with the pixel sizes in the padding, font sizes, margins, and letter-spacings. But ultimately, when all fails to nudge that text into alignment, the easiest solution is to reword the text. And so I have. Two windows open (stylesheet and header, in my case), click save twice, and press F5 to refresh the blog. Repeat till it looks right. (See “about” in top right header for final product.)

Deciphering a code written by another is almost like getting to know someone and learning to understand them. You click until you figure out the file structure, then you stare at the code till you get which tag represents which item.

Finally, when you’re ready, you move some lines around such that it makes more sense to you, neaten the code so that it is easier for you to edit, and finally tweak the code such that it represents what you had in mind. Hmm… that sounds like a relationship indeed.

WordPress Coding Tips: Alignment around Images

Christina — Thu, 10 Apr 2008 19:32:56 +0000

In WordPress, you’ll need to find an alternative to the usual hspace and vspace tags.

Here’s a great suggestion from the WordPress Codex. In the stylesheet, paste this:

img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

And in your markup code in whichever file you’re editing, e.g. About, in my case, code it like this:

Tweak the padding and margins till they align nicely. And you’re done!

Coding Tip: Add a Favicon

Christina — Wed, 30 Jan 2008 16:37:00 +0000

1. Create your desired image 16x16px in an image editor and save it as a gif, jpg, png, or ico file, depending on which version your web host or blog provider supports. (WordPress uses favicon.ico).

2. Upload it into your root folder.

3. Insert this code between your tags.

In WordPress, this would be your Header (header.php) file but you insert this code instead:

/favicon.ico” />

4. Save and reload. Your icon should appear next to your address bar now!