Archive for category Live Writer

Outwit an obscuring theme background in Live Writer

Windows Live Writer is the unsurpassed blogging editor for its effective WYSIWYG (what-you-see-is-what-you-get) editing environment. Great strides have been made by the blogging service providers in creating themes, designs or templates with headers and backgrounds. Some of these features confuse Live Writer and do not appear in the editor as they look in the finished blog. This may be just a bother, but with some designs these features can obscure the typing in Live Writer.

The WordPress theme and custom header used with this blog is a good example. Here is how the Live Writer editor window looks with the freshly downloaded theme (Blog Account tab > Update theme).

WLW-130228-03

The post title entry box is partially obscured by the header image as is part of the main text area. This is particularly troublesome when the image is the same color as the text – you can’t read your own writing!

Here is another example, this time the background image in the actual blog is overlaid with a semitransparent text area. Live Write is confused by this and it shows the background in its full glory. Seeing the entered text is difficult.

WLW-130228-09

If you are bothered by such a situation, here is my work-around solution.

When the blog theme is downloaded from the blog site the header and background images are placed along with other material into a folder named “blogtemplates”. The trick is to modify these images so they will not be bothersome when used by Live Writer. My solution is to just draw a white or light gray box in the appropriate location. With that done the Live Writer window looks like this:

WLW-130228-15

WLW-130228-16

Now the Live Writer edit window is completely useful and preparing a post is fast, easy, and convenient. The modified local image files will not affect the blog, you see these images only in Live Writer.

WLW-130228-17Now for the details.

The first step is to locate the folder “blogtemplates”. The easiest way is to open Windows Explorer (File Explorer in Windows 8). Then click Local Disk under Computer in the navigation pane (If you renamed your main dirve look for that name. It is usually your C: drive). In the search box enter blogtemplates. The folder will be found in C:\User\yourname\AppData\Roaming\Windows Live Writer. Of course, you can step through the folders and get there that way.

Now it gets a bit interesting. Computers are completely tasteless when it comes to naming folders. If you have more than one blog, as I do, you will see a weirdly named folder for each blog. Of course, there is no indication as to which belongs to what. You can look through the folders to find the header or background image, you will recognize it more easily if you set the file listing display to large icons. An easier way is to download the theme for the blog of interest, the folder will then have the current date and time as the Date modified. (See below.)

There will be two subfolders in the the blog template folder. It is the second subfolder that contains the offending images (at least on the computers I tried it on it was always the second folder.)

WLW-130228-01a

You can load the header or background image into Paint and there draw a light-colored rectangle over the area where text entry will take place. My approach was to get the correct width by doing a screen capture of the open blog in a browser and then clipping out a bit of the text area and pasting it to the appropriate location in Paint.

WLW-130228-11

Note of caution: Both subfolders in the theme folder in blogtemplates will have the header and background images. If you make the changes in the wrong one, you will not see the correction in Live Writer. I have not explored the reason for two subfolders and how the contents is used. If you mess up royally just update the theme to get new files downloaded and start over.

Good luck!

.:.

© 2012 Ludwig Keck

, , , , , ,

Leave a comment

Using Bookmarks in Live Writer

Bookmarks, also called anchors, are code on a page or in a post that you can navigate to with a hyperlink to avoid having to scroll down to the place. Such bookmarks are not visible. Since Live Writer is a “wysiwyg” editor you can’t insert a bookmark in Edit mode. Live Writer does not offer that item, although it offers several other “invisible’ items. Using a bookmark requires identifying the place, the “bookmark”, and a link somewhere else to that bookmark. The code is easy enough. Here is what you do.

The bookmark

SchoolAt the place where you wish to insert an anchor, the place that will be at the top of the browser window when linked to, type some text that you can easily find in the Source window. I like a string like this “xxxxx”. Then click the Source tab (lower left). Locate the locater text and insert the bookmark code, replacing the locater string, like this:

<a name=”bookmark”></a>

Type the code as shown here with a name in place of bookmark. The bookmark name should contain no spaces or symbols. I like to put bookmarks on a line by themselves in the code.

You can also include text in the bookmark code which will be shown at the top of the browser window. The code will then have this form:

<a name=”bookmark”>Bookmark Text</a>

This is all you need for the bookmark, you can have as many as you like, of course, the names have to be different.

The bookmark link

imageBookmarks by themselves are of no use, they need a hyperlink somewhere else. Such links can be in the same post or the same page, they can also be in different post or even different websites. For links on the same page, a local link, the code need not include the web address. For linking to a bookmark on a different site the web address has to be included so there are two forms to the hyperlink.

For a local link you need to type the link code in Source view. Type the text that you wish to make into the hyperlink in Edit mode then click the Source tab and add the needed code. The code is like this:

<a href=#bookmark>Link Text</a>

Here bookmark is the name of the bookmark. Note that the pound sign, #, is required. The Link Text is the text that you want as the hyperlink.

If you wish to link to a bookmark on another site, the full URL has to be included. Inserting such a link can be done with the Insert – Hyperlink tool, just don’t forget the bookmark part.

<a href=http://blog.wordpress.com/page/#bookmark>Link Text</a>

Here is a demonstration: Photosynth – the previous word links to the bookmark for the Photosynth section on the This ‘n That resource page.

.:.

© 2011 Ludwig Keck

, , , , ,

1 Comment