Archive for ‘HTML/CSS’

17/06/2013

Display your Twitter feed from a website

I have put up several posts on how to display recent Tweets in a webpage with PHP. However, Twitter has switched to it’s API v1.1 from today, so all of my previous articles have become obsolete. The easiest thing to do is to use Twitters own widget: https://twitter.com/settings/widgets. If you log in with your Twitter account, there is a simple wizard that generates some html that can be pasted directly into your webpage.

Advertisements
05/10/2011

Force a favicon onto a webpage

<link rel="shortcut icon" href="http://www.my-domain.com/myfavicon.ico" type="image/x-icon" />


This will force a favicon onto your webpage – useful if you house different websites in subfolders – each subfolder site (or page for that matter) can have a different favicon.

Tags: ,
04/03/2011

View html source in the blackerry torch browser

With the browser in landscape mode, call up the keyboard. Press and hold the “!?123” key until the lock icon shows. Then type 3?$4.

02/03/2011

Make your website mobile friendly

With an ever-growing percentage of people with access to mobile web browsers in their pockets, the time is ripe to take steps to optimise your site for mobile users.

I’ll be posting as I go through getting my own site (cyte.co.uk) mobile-ready. The first step is detecting whether your user is viewing your site in a mobile browser.

I accomplished this in just a few minutes with open source php code from detectmobilebrowser.com.

Be careful here. My hosting company want to charge me £3.99 per month for a mobile site, and I also found a few downloadable scripts that wanted payment for commercial use. Right.

06/12/2010

New look Chocolate Hedgehog website

Haven’t posted for a few days because I’ve been busy developing a new look for the website.

I’ve tried to give it a more striking and memorable appearance using some jQuery and CSS elements.

http://www.chocolatehedgehog.co.uk

25/11/2010

Adding line breaks to a push button

Have you ever wanted to force the text on an <input> button onto an other line?

So did I today, and this is how:

Buttons

Simples!

21/11/2010

Curved DIV borders

This is so easy!  I used to use a complex set images for top-right, top-left, bottom-right, bottom-left etc.

Granted these 2 lines of CSS will not produce shadow effects or anything fancy, but the results are pleasing nevertheless.

-moz-border-radius: 20px;
border-radius: 20px;

The -moz prefix is needed to allow this to work in FireFox.

18/11/2010

Change the style of font inside a search textbox

I wanted to emulate certain sites where the search box is populated with “Search…” in grey coloured italic font, but as soon as you click on it and start typing, your query appears in black normal font.

The examples I was able to find were horribly complex and I was unable to get my head around them in the time available, so as an interim measure to get the effect I wanted I wrote my own:

<input type="text" name="q" style="width: 105px; font-style:italic; color:grey;" value="Product Search..." onFocus="this.value = ''; this.style.fontStyle='normal'; this.style.color='black';" onblur="this.value = 'Search...'; this.style.fontStyle='italic'; this.style.color='grey';"/>

The drawback to this is that you cannot use a search button to submit the form – as soon as focus of your browser leaves the textbox (i.e. when you click the button) the text box reverts back to the value of “Search…“. The button has been removed from the form where I’ve used this so users must press the enter key on their keyboard to submit their query.

Interestingly, even though people are searching all the time, and this has been live for a day or so now, I’ve not had a single complaint from a user that the search button has gone….

Tags: , ,