This is just a quick post linking to the best color scheme designer I have found on the web.
I used to use it a lot and then couldn’t find it when I needed it again.
So now it is here I shouldn’t loose it again.
Check it out - its a great way to apply color theory and ensure your websites look nice.
AmR Clearskys Availability modification for 2.7
I have recently been looking at availability calendars for use on Word Press and found this great little plugin that has been adapted for Word Press 2.7 by Anmari.
The plugin allows you to manage bookings on 1 or more properties via the Word Press admin panel and allows you to display the availability in a neat calendar as shown below in my test booking calendar.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 |
Up until recently I have always relied on javascript to create image replacement and
image rollover techniques and haven’t really thought about alternatives. As far as I was
concerned javascript was just the way it was done.
The problem with javascript is that the rollover image has to be preloaded for it to
create a smooth effect and it doesn’t work in all browsers, especially with many people turning javascript support off for security reasons
This is why I have been converted to the use of CSS for all my image rollovers from now on.
They are supported in any browser that renders css and they even work with javascript disabled creating an instant smooth effect
OK, enough with the background lets look at an example CSS image rollover:
Start by preparing your image for your rollover, I have used photoshop CS2 but you can create the image with any image editing software.
First of all create the standard button with these settings
I have filled in the background and applied a gradient, added text with a bevel and a small bike graphic.
When you have finished creating the standard button, group it into a folder then increase the size of your canvas to double it’s width, such as:
You should end up with a canvas similar to this:
Now duplicate your group and position it to the right of your standard button graphic
Make changes to the second group, this will act as the rollover state
Here I have changed the background gradient and used a colour overlay on the bike graphic
You should end up with an image similar to this
Save it for the web, I have saved as a png
Armed with our prepared rollover image it just takes a simple bit of coding to get it working
Place the following html inside the <body> tag where you want your rollover to appear.
<a class="my-rollover" target="_blank" href="http://www.iwanttoridemybicycle.co.uk"></a>
Then in your stylesheet add the following style for my-rollover, make sure you change the background-image url to point to your own rollover image
.my-rollover {
display: block;
height: 25px; width: 100px;
border: solid 1px black;
background-image: url('Images/Btn-Bikes.png');
}
a.my-rollover:hover { background-position: -100px 0; }
This will set up the a tag to only show the first 100px of your image. When the mouse rolls over the image the :hover style will move the background image 100px to the left which brings your over state into view. No javascript, no preloading, no mess, what more could you want in a rollover?
This technique can be modified for any size of image, just change the height, width and background-position values
This technique was introduced to me by Rob at Swansea Digital Web Design
I have recently been working on a management dashboard for an e-commerce website and needed a good charting control to display an overview of sales, registrations etc.
After a brief crawl on the web I came across Fusion Charts. The controls are as neat and easy to use as any of the premium solutions I could find, but best of all, the basic package is completely free, even for commercial use.
The free version of Fusion Charts is not lacking in functionality either, with a huge range of charts and good examples of code for multiple platforms you will be suprised how quickly you can get a really professional and useful chart integrated with your application. Below is a simple example of Fusion Charts in action:
Integration of the charts is as simple as copying the chart folder to the root of your application, creating the required xml data then embedding your chart in your html page. A sample of the xml data can be seen below:
<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46' />
<set name='May' value='761' color='008E8E' />
<set name='Jun' value='960' color='D64646' />
<set name='Jul' value='629' color='8E468E' />
<set name='Aug' value='622' color='588526' />
<set name='Sep' value='376' color='B3AA00' />
<set name='Oct' value='494' color='008ED6' />
<set name='Nov' value='761' color='9D080D' />
<set name='Dec' value='960' color='A186BE' />
</graph>
Fusion charts have now appeared all over my applications and I still haven’t run out of options, but I know that if I do need more charting power I can easily upgrade to their premium charting controls which have all the charting functionality you could think of.
Fusion charts have great examples for chart integration with PHP, ASP, VB.NET (ASP.NET) and C# (ASP.NET) you can find out more at http://www.fusioncharts.com/Free/
ie6 png transparency problem example image
I recently encountered an issue regarding png transparency on older browsers whilst developing a website targeted at schools.
The web site used png transparency to display rounded corders and tabs over a sky background. It worked well in all modern browsers but in ie6 and lower the png transparency was replaced by an ugly grey box.
Due to the project specifications identifying ie6 in the browser compatibility list it was necessary to find a solution to the problem.
I spent some time researching possible solutions and tried a few out, some worked, some were difficult to implement and others just didn’t seem to work at all. After some time I settled upon a solution and have documented it with the following example:
The solution involves 2 methods for dealing with png transparency, one to handle img tags in the html and one to handle css background images. I have also documented how to overcome the issue with non clickable links after implementing the css only png transparency solution.
This is the new web site for Pacweb Internet Development.
Pacweb have decided to use the popular open source blogging application Word Press as the platform for our new web site.
Word press enables us to quickly post new content and update articles from anywhere with an internet connection. With content being the main focus for the new web site we feel that Word Press is the ideal solution.
Stay tuned for up and coming articles, services and discussions on Pacweb.
Powered by WordPress | Blue Weed by Blog Oh! Blog | Entries (RSS) and Comments (RSS).