Sunday, 21 October 2007

Template redesign

Sorry you guys using firefox, it seems i have and issue with the blogs navigational element... how embarrassing.

Curled over corners with fireworks

Here are some png source files for curled corners.



The shape is a rectangle modifyed using the subselection and freeform tools and has a gradient fill and drop shadow applied.
To download click the thumbnail then > right click > save as
on the full size image.

Switching blogger sidebar from right to left and vice versa

Easily and quickly reposition your blogger sidebar element and main blog content by choosing Template > Edit html
With the text editor open scroll down until you find the styles for the sidebar-wrap which will look something like this:-


#sidebar-wrap {
width:220px;
float:left;
font-size:90%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0;
margin-left: 0;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF2E6;
border: 1px dotted #cccccc;
}



now change the float property which looks like this:-

float:left;

In this instance you would change it to "float:right;" if you hit the preview button now you'll note that not much has changed if anything. This is because you also need to change the float property for main-wrap1 also.
As before locate the styles for main-wrap1 which looks something like this:-



#main-wrap1 {
width:465px;
float:right;
background:;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 10px;
}


and edit the float property this time from float:right; to float:left;
Now press preview to see how you have reversed the orientation of your template.
Depending on which template you are using your blogs content may seem to wide or close to the edge of your page to combat this simply reduce the width of your main-wrap1 #div by 5 to 10px.
Hope this was helpful

Editing classic blogger templates continued



Here is the screenshot of my progress so far, i plan to add a three column layout to the footer and tweak the fonts etc. I will post the css and images once finished.

Saturday, 20 October 2007

editing classic blogger templates

I have continued my editing of the classic blogger template "rounders two" and have made a fair bit of progress. Althrough this template is not ready to go live quite yet i was going to post a screenshot showing my progress, but... there seems to be a problem with bloggers image upload script.

Friday, 19 October 2007

HTML,CSS plus a tiny little bit of PHP



HTML AND CSS WEB DESIGN my latest project is going to be the redesign and relaunch of the first website i created almost two years ago.
I've learnt a little in the last two years and this redesign will be standards compliant html and css. O.K so validation is only half the battle, it is of course true that while a page may validate correctly does not necessarily mean it will be cross browser/platform compliant. So whats a boy to do? Banging your head on your desk may seem like a good idea at the time(it won't help). Thats not everything i've learnt so far, get the latest versions of the popular browsers on your machine(IE,FireFox,Netscape and so on)for testing then visit browsershots here you can test your url in thirteen different browsers across all platforms specifying the screen size(from 640px -1600px)and other elements like javascript, flash and java.




One of the requirements of the redesign is for the client to be able to edit the content of the site without the need for any technical skills or software. So i have created a php script that outputs to text files which are included within the pages html with php. The sites admin pages where the content is edited uses the tinymce javascript text editor.



Once i finish this project i would like to develop this script in to a full content management system that allows the user to also edit the navigation and other elements much the same as blogger does.

Shopping, Beans & software upgrades




I hate the weekly shopping trip as much as the next man, the bright fluorescent supermarket lights and long queues are almost always certain to send me into a zombie like state in no time. I just about managed to stay half wake tonight as i thought about trying to emulate some food package labels with fireworks. I had recently downloaded some western style fonts from 1001
free fonts and had been eager to try them out, so i chose a well known brand of baked beans that i had remembered used a western style label on it's cans.
Thirty or forty minutes after my return from the supermarket and i had created the above png, although it is not identical to the food can i am happy that i was able to create a similarly styled object relatively easily.

I'm very keen to try out the latest incarnation of fireworks(cs3). I have always been very sceptical about software upgrades it only seems like yesterday that i starting using fw8 and wonder does the latest version have enough upgrades and new features to justify the price tag.