Posts Tagged HTML

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

, , , , , , ,

Leave a comment

This should look better


I have spent a couple of hours of mucking around with the settings on this site. Now, I think I have sorted out most of the options I want to have in this blog (for now, as always the editor reserves the right to correct, modify, or just plain fiddle about), with a look and feel which is reasonable.

There is one big feature from the Windows Live Blog which is missing WordPress. This feature was the is the list option.  On the Windows Live Blog I had lists of books which I was reading, or had read. These lists were looking up the cover art from Amazon, and would link to the book on Amazon. I’ll have to have a think about how to implement on this site. It will be a case of out with the “roll your own HTML”, maybe I’ll need to have some script as well (if one can embed script in the HTML on this site – further research has shown that script is not allowed, so I’ll have to stick with “vanilla HTML”). The basic HTML is not too hard, just an <img src="" alt="" > tag with the correct URL and other bits of navigation. Doing the same for CD’s would be interesting as well. Finding a site of CD cover art would be the “tricky bit”, the one that Windows Media Player uses would be a good starting point.

After some fiddling about with HTML, Amazon and W3Schools I think I have something which will work for books. I still need to test it this solution on WordPress from within my blog. That testing will come in the next couple of days. The interesting next step will be to see if I can get something working for CD’s, and then DVD’s after that. Amazon may be a source for the CD’s, but I’ve yet to explore that, and the breadth of the CD selections on Amazon.

  

WordPress Tags: Windows Live List,List,WordPress,Windows Live,Blog,Amazon,HTML,script,Windows Media Player

 

, , , , , , ,

2 Comments

Visual Web Developer Team Blog : Visual Studio 2010 Beta 2 – Intellisense Issue in Javascript/HTML.


 

Visual Web Developer Team Blog : Visual Studio 2010 Beta 2 – Intellisense Issue in Javascript/HTML.

This bug bit me.

I have just starting out playing with HTML, and Visual Studio 2010 was the first version I’d tried playing in. I was disappointed that Visual Studio was not giving me:

  • Intellisense for the HTML tags,
  • Intellisense for imbedded CSS elements (yes, I’ve developed that far), or
  • A properties editor for the HTML elements.

All of these are symptoms of the bug, which the above link describes how to fix.

The quick fix, edit the registry did not work for me. The second fix, Tools –> Import/Export Settings –> Just rest, Don’t Save –> Web Development –> Finish. Did work, all of the features which were not working, now function correctly. What a change for the better.

How did I tumble to it being a problem with VS 2010 Beta 2? At work I was going to create a HTML signature for my Notes Mail, the only way to put font information onto the signature block. I have developed an overt hatred for “Default Sans Serif”, which is what Notes is deciding I should be using. At work I’ve VS 2008, and lo and behold all of the above features were working.

Conclusion

This fix has probably saved me a bucket of money. I was toying with the idea of buying Microsoft Expression to give me a “smart” Web development platform. But as they say in the classics, “I’ll keep my powder dry” on that choice, although I may go for the upgrade from an Office product solution.

Digg This

, , , , ,

Leave a comment

%d bloggers like this: