Posts Tagged Windows Live Writer
Outwit an obscuring theme background in Live Writer
Posted by Ludwig in General, Live Writer on February 28, 2013
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).
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.
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:
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.
Now 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.)
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.
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
Live Writer Tutorial Series
Technogran presents a well done series of tutorials over on Technogran’s Tittle Tattle. Even if you are an expert with Live Writer these post are worth your while.
Blogging with Windows Live Writer 2011. 1.Let’s begin!
Blogging with Windows Live Writer. 2. Writing your post.
Blogging with Windows Live Writer 2011. 3. Let’s insert something!
Blogging with Windows Live Writer 2011. 4. Inserting Everything bar the kitchen sink.
Blogging with Windows Live Writer 2011. 5. A closer look at photos.
Blogging with Windows Live Writer 6. Handling your blog account.
Blogging with Windows Live Writer. 7. Handling those files!
Blogging with Windows Live Writer 8. Categories, tags and dates.
.:.
© 2012 Ludwig Keck
Making and using your own boilerplate
Boilerplate (Wikipedia: Boilerplate (text)) … any text that is or can be reused in new contexts or applications without being changed much from the original. …
For blog posts some repeating text, especially with graphics and hyperlinks, can be very useful to provide credits, references and links to other sites or pages. For posts here, I use such “boilerplate” to provide links to my home site and to my Twitter, Facebook and Google+ pages. Here, then, a quick tutorial on making and using boilerplate.
There are a number of plugins for Windows Live Writer that make inserting boilerplate very easy. I use Text Template Plugin for Windows Live Writer by Greg Duncan. Plugins can be be found on the Windows Live Plug-ins site (trust it is still there by the time you read this).
Creating the boilerplate
1. First, of course, you decide what the boilerplate should say, look like, and do. For this quick tutorial I will use my “created with Live Writer” slug (once more Wikipedia: Slug (typesetting)). Write down the text and make a sketch of any graphics and list any links.
2. If your boilerplate is to include an image, you must first create the image. I used Paint to prepare the text with the graphics. Here is what it looked like (frame added for illustrating the graphic). My original image was 1287 by 180 pixels. As you can see, it contains text and an image of the Windows Live Writer logo.
3. Scale the image to the actual size that it should be in use and save it as a JPG file. Mine is 360 x 50 pixels.
4. Upload the image, or images, to a site so you can use the graphic repeatedly without having to upload it each time. The easiest way is to insert the graphics into a post in Windows Live Writer. Set the Size to Original and the Link to option to No link so WLW will upload only one copy. Upload the post as a draft to your blog.
5. Now you have stored the image or images in an accessible online site.
If you are using WordPress, find your image by going to your WordPress Dashboard > Media > Library. Find the graphic, click Edit. Copy the File URL. That is the web address for the graphic that you will re-use again and again.
If you are using Blogger your graphic will be in your Picasa Web Albums. Click Show All Albums, find the album titled Windows Live Writer – your newly added graphics should be at the end. Click the graphic to show it it large on a page, right-click the image and click Copy image URL (this may be different depending on your browser). Now the URL is on your clipboard, save it for later use (I use NotePad for this).
6. Set the boilerplate in a new Windows Live Writer post. Type the text and insert the graphics with Insert > Picture > From the web. Use the URL for the graphics. Insert any hyperlinks. Make all the positioning adjustments so the boilerplate looks just as you want it.
7. Click the Source tab in the lower left of the Live Writer window. Copy the source code. This is what you will need. I pasted mine into NotePad and saved the file. You can reuse this saved code from this file or you can install it in a plugin. If you wish to use a plugin, read the next section, otherwise just skip over it.
Prepare for reuse with a plugin
1. If you want to make it easy on yourself, install a Live Writer plugin. Click the blue tab > Options > Plug-ins. Live Writer makes this easy by even providing a link to the plugins download site.
2. Go to the plugins download page, install a plugin you like. I found Text Template in the Other content insertion section.
3. As they used to say in school, the remainder is left to the student as an exercise. Since the details vary, depending on which plugin you choose, I will not go through the installation and setup procedure. You will find your way easily enough.
Reusing your boilerplate
When you come to the place in a post where the boilerplate should appear you can insert the code form the saved file or install it using the plugin.
Directly install saved code
- Open the saved code file.
- Copy all the code – select all > copy with Ctrl+C.
- Click the Source tab in Live Writer. Scan down to the end. Paste the code (Ctrl+V).
- Click the Edit tab. Your boilerplate will be there in all its glory.
Install with Plugin
- Click the Insert tab.
- Click the plugin. Select the slug. Click OK (This may vary depending on the chosen plugin).
- Your boilerplate will be there in all its glory.
Now, wasn’t that easy? Actually, you will find it easier to do and faster than you might think. Go do it!
Take a moment to admire my boilerplate here. It consists of some text and several graphics with hyperlinks. Go ahead, give me a thrill by trying the links.
.:.
© 2012 Ludwig Keck
Give credit to your blogging tool
This post created with Windows Live Writer
Show that you are using the best, easiest blogging tool, Windows Live Writer, at the end of every post. Give others a link to get their own copy of the greatest blogging tool out there!
You are welcome to copy the image that I am using at the bottom of this post.
Below is my code for my WLW credit line. You are welcome to use this as is. It grabs the image from my site. That’s OK I will keep it there. Of course, you are welcome to upload an image of your own to your file store.
Here is what the code looks like. Do not copy and paste this, as some of the characters will get mangled:
<p><a title=”Windows Live Writer” href=”http://windows.microsoft.com/en-US/windows-live/essentials-other-programs”><img style=”background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto; padding-top: 0px” title=”Windows Live Writer – download your own copy” border=”0″ alt=”LiveWriter-credit-360″ src=”http://ludwigkeck.files.wordpress.com/2012/07/livewriter-credit-360.jpg” width=”360″ height=”50″></a></p>
.:.
© 2012 Ludwig Keck
The Anatomy of a Blog Post
A blog post is a short article posted on a blog site. What you are reading now is a post on the Live Writer Basics blog. In this article I want to take my newer blogger friends a little bit behind the scenes to help them learn the details and mechanisms of a blog post.
First a bit about blog sites and services
A vast number of blogs are hosted by WordPress, as is this blog. There are other blogging services and they differ in many respects from WordPress, but I will quickly go over how a blog functions on WordPress. A blogger sets up an account by clicking the “Get started here” button on WordPress.com. With the account comes a blog site. In setting up the blog, the blogger selects the site address and name. 
This blog has the address “https://livewriterbasics.wordpress.com” the name of the blog is Live Writer Basics as you can see at the top of this page. The blog consists of one or more pages. Typically the “landing page”, the one you get to with the blog’s URL or web address, shows the posts, the short articles, with the most recent one at the top.
The formatting, layout and style, of the blog is defined by a “theme” provided by the blogging service. WordPress has hundreds of themes to choose from. There may be a header image in addition to the blog name and byline. Most blogs have “sidebars” with various items of information. Typical items in the sidebar are links to prior posts, a search box, archive, links to other blogs, and other items that are automatically updated so the blogger does not need to worry about accessibility to information on the blog.
There may be other pages, reached with links on a menu bar, very much like any typical website. The pages in a blog contain more permanent information such as the About page here. There may be some advertising. This post may be followed below by an ad that WordPress places. This is how WordPress can make blogging free or very inexpensive. The blogger using a WordPress.com blog may not place any ads in the blog.
The “front” page may be quite long, showing a number of the recent-most posts. One such page is illustrated at the right. Posts and pages can be created in Windows Live Writer.
The blogging service, in this case WordPress, provides summary pages reached by the category and tag links.
Possible the most important part of a blog is the ability for readers to leave comments at the end of each post. This provides two-way communication between the blogger and the audience.
What does a post consist of?
Each post has a title. This is followed by the text or the article, maybe photos or other content. There is a post date showing the date, and often, the time the post was “published” or placed on the blog site. Typically a post is also marked with a topic, called “category” at WordPress, and “tags” that describe the topic details in more detail. Such categories and tags link to similar content in the blog and, more importantly, to other blogs. WordPress provides for such tagging. In addition there may be tags using another service. This blog also contains “Technorati” tags – you can see them illustrated below and real ones at the end of this article.
Here is an illustration of a typical post title, post date, and all-important first paragraph.
The end of that post looks like this:
The article ends with an “end of Ludwig’s story” mark, a copyright notice, links to the author’s website and social sites. This is followed by a group of Technorati tags. Each tag links to a Technorati page showing blogs on that topic.
There are a group of links to allow the reader to share the post and to indicate a “Like” to the author.
The gray links are the WordPress categories, marked “Posted in” that link to pages showing posts of that category, and tags introduced with “Tagged”. These also link to pages showing posts on those topics.
The last item in the gray WordPress items is a link to the comments on this post.
The skeleton of a blog post
In spite of the complex and and well-manicured look, the actual post consists of just HTML code. It is the reader’s browser that puts it all together and makes it look the way it was intended.
This is the code produced by Live Writer. Of course, when writing the blogger uses the “Edit” mode which shows the post pretty much as it will appear to the reader. Note that there are no images in this code, the pictures are defined by hyperlinks and are not stored with the post code. Live Writer takes care of those details and a novice blogger can be unconcerned – it just works.
When writing the text the author has “HTML styles” available to define the elements of the text and a limited set of font and positioning commands.
Normal text is called “Paragraph”, there are six “heading” styles. The actual appearance is defined by the blog theme and, once selected for the blog, is not further controllable. There are, however, additional controls for font, type size, and text placement. These are also limited. In Live Writer fonts can be set to any available on the bloggers computer. They will work just fine if the reader has that same font available on the computer used to view the blog. That last sentence contains the reason why a blogger must be very careful about setting the font. There is no assurance that it is available to the reader.
This is a quick look at the mechanics, the anatomy, of a blog post. A blogger is assisted by Live Writer in putting it all together so it works. It is easy to prepare a blog post, writing a captivating, informative, helpful, and timely article, well, that is another story.
.:.
© 2012 Ludwig Keck
.
.
.
.
.
.
Live Writer Basics 
![http://ludwigkeck.files.wordpress.com/2012/07/livewriter-credit-360.jpg”](http://ludwigkeck.files.wordpress.com/2012/07/livewriter-credit-360.jpg"){kind=link}