Purchase the WordPress Edit CSS Option


Introduction

I’ve finally been pushed into purchasing the Custom CSS option on this site. There have been a couple of reasons why I’ve finally taken the plunge and done this. The primary reason for purchasing the Custom CSS Options was to simplify my blogging process.  I can be quite pedantic about fonts, and formatting, for the posts which I place up here. The HTML which Windows Liver Writer produces (I’m currently using the 2011 versions), and WordPress reacts to that HTML was less than satisfactory.  I would spend some time editing the HTML and imbedding the all of the font information I wanted onto every text carrying tag in the HTML.

The Reasons

The reasons I have decided to purchasing the Edit CSS Option have included:

  • I was turning blogging into an HTML editing and checking process. The process of creating a blog post was:
    • I would create a blog post in Windows Live Writer 2011,
    • Then  edit the HTML either in the Source pane of Windows Live Writer, or in Visual Studio,
    • Then post the blog post to WordPress,
    • Then go, “Stuff done it again, wanted to make it a draft and edit it up there!”
    • Then edit the post using the Web Interface on WordPress,
      • Correct any formatting problems. This can be a bit of work as WordPress can clobber some formatting in the HTML. So, it ends up being a cycle between the Source and HTML views in the WordPress editor,
      • Cycle between the Editor and the Preview,
      • Add in Tags,
      • Add in Categories,
      • Add in Possible Associated Links,
    • Then republish the post
    • Then check that it was OK
  • Posting Source code in a blog posts was even worse.
    • Checking the formatting at each step in the process.
      • Writing the bulk of the post and pasting the source code in using Windows Liver Writer,
      • Then to WordPress Web Interface, and check that things look OK. This involved swapping between:
        • the source view,
        • the HTML view,  and
        • the Page Preview
    • I was either:
      • Losing some of the formatting in each of multiple hops, or
      • Gaining formatting which would “stuff up” the presentation of the source code.
  • Getting the capability to fix the banner on my blog
    • When using IE9 the “Craig’s Eclectic Blog”, was displaying with a Black background, which was not aesthetically pleasing. Part of my initial CSS, was a quick bit of CSS which then forced the  “background-color=transparent;”, and that fixed that “gremlin”.
    • I should create a “please fix” with the WordPress “Happiness Engineers” this issue. I’m certain that I will not be the only person to find this “foible” of IE9 and the Fusion Theme.

What Do I Expect To Get?

So, what does the Edit CSS Option give (and this post will validate some of these assertions):

  • Control over the formatting of my blog posts, without having to edit the HTML along the way. I was adding in details of the font information in particular onto each of the text carrying HTML tags. Now, the customisation of CSS should (fingers crossed) take care of that.
  • Fix up the banner on the blog pages. I know this works as I’ve fixed that problem already. Although, I may change the font being used, the current Calibri does not look quite right.
  • Assert some better control over the posting of source code onto this blog. I’m not sure what I’ll be able to achieve here, but at least I have the “tool” to do this now.
    • I was using some of the source code plug-ins in Window Live Writer to format the source code, on Windows Live Spaces. Now, I’ll see if I can “convince” them to work with WordPress as the host.
  • Learn what CSS can do. I may need to get a book about this or, better still check my reference library; I may have enough CSS help in one of the volumes I already have.
  • Learn how to do things with CSS, using my blog as a “test bed”. This could prove to be a dangerous thing to do. The potential for fatally breaking things in this blog is something which I will have to assess, and work within.

The Tools Dimension

The developing, deployment, and maintenance of the CSS which supports my blog are new technical challenges for me. I’ve not needed, up till now, to know CSS. I have had a “nodding acquaintance” with CSS and an acknowledgement that it was part of the web that I could conveniently ignore.  Well those days are gone, and behind me now. Now I’ll be diving into CSS “head first”, and learning how to get my web pages to do the things which I want.

This brings me to the topic of tools for creating, testing, and managing, of CSS. There are a multitude of tools for the development of CSS. I’ve “dipped” a toe in the water with a couple of them already, and will be exploring the possibilities of others. These tools include:

  • Internet Explorer Developer Tools (F12).
    • Pros and Cons:
      • This is a good way to trace how IE is interpreting the CSS/HTML combination.
      • It is useful for tracking down where in the HTML the text you want to style is.
      • It displays the class and ID’s which CSS selectors “grab hold of”.
  • Visual Studio
    • Pros and Cons:
      • It works reasonable well with CSS. There is good support for CSS properties and values.
      • Is disconnected from the blog posts (well I’ve not connected it up as yet – not sure you can)
  • Expression Web
    • Pros and Cons:
      • Never used it before, and am just installing it now. Not sure what I’ll find in the package.

Conclusions

Well, I’ve accomplished the things I started out wanting to do. The Custom CSS is not very long, but is now doing the things which I wanted. But, there is plenty more to come (I’m sure of that). I’ve the feeling that I’ve opened “Pandora’s box”, in that I will be tinkering with CSS to “beatify” my blog, and coding my Custom CSS to format more parts of HTML (things I’ve not used as yet: pictures, tables, code, links and on the list goes).

Was it worth it. For me YES. But, I’ve plenty of experience developing software

Advertisements

, , , , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: