I first had to set up this blog on blogger.com. I had not had much experience with blogging although I am an avid reader of other people's blogs. The experience was interesting and I found it relatively easy to set up my blog. I then moved on to customize my blog by adding a custom template. To my surprise I found that there are thousands of free blogger templates available online which can also be easily customized. I also explored how a blogger template works and modified my selected template and added a photos and changed the layout. The images had to be placed on a separate web server but this was not an issue as I have access to several of these. Changing an image is simple, just upload the image to a web server and then modify the xml of the blogger template to point to the new image.
I also did some research into blogger widgets and tested several of them. I have left a few included in this blog. I would be interesting to code my own widget. I will be looking forward to our lectures on Javascript which should give me the tools needed to create a widget. Although widgets can be created using html, to get anything worthwhile together, Javascript is needed.
Once I had the blog up and running, I began today's exercise by downloading the html and css for www.csszengarden.com to my local hard drive. While trying to preview the site from the local folder, I immediately realized that the CSS has to be renamed. The html page was calling a differently named CSS file and therefore simply displayed the plain text from the html. My browser was also not displaying the images which was because these needed to be downloaded separately.I downloaded the images and placed them in the same folder as I had placed the html and css files.
I then opened the CSS file in notepad and started experimenting with changing some CSS code. I naturally started making changes to the "Body" which I knew would have a noticeable effect on the result. I tried changing the font colour and type as well as omitting the background image.
I also experimented with using Google Chrome's inspect element function which is an extremely useful tool. I have previously used Firefox with Firebug but Chrome can achieve the same result without installing anything else.
I then attempted to change the color of the menu when the user hovers the mouse over an item. The original CSS contained a color setting for the #linklist li a:link which was overriding the color settings under a:hover. This had to be removed so that a color setting specific only to hover could be applied (red in this case):
I then embarked on changing the size of the link list (menu) column which to me appeared to be too narrow.
This involved changing the padding of the div called "container" as well as changing the width of the div called linklist2 which I increased to 230px from 130px.
The width increase works fine, however, the image under the link list (paper-bg.jpg) is now small and this had to be modified using Photoshop. I also changed the linklist2 padding value from 10 to 20px as the menu was appearing too close to the edge of the paper background.
I then decided that I would try to add a thumbnail image to the menu (linklist). I wanted to place a small icon of the cr2.gif image next to the menu entries. I modified the image in Photoshop by making it smaller and changing the background color. I then added the background image tag to the linklist div as follows :
As can be seen in the code snippet above, I also had to add some left padding so that the background icon image would not appear next to the text of the link but rather next to it. The finished menu looks like this :
That is all for this week's exercise.
Cheers
