CeeFourBee » Web Design

CSS: Submit Button Image Replacement

Barney — Thu, 29 Jan 2009 20:25:07 +0000

Before today I had never used CSS to replace the submit button on forms with an image. I’ve either not styled the button, or just changed the colours the button uses. Today I needed to use an image as part of a design and it was very simple. I was quite surprised because I thought it would be a PITA. Read more to see my method.

To start with you need a submit button using something like the following HTML;

Then use the following CSS to apply an image over the default button;

#searchButton
{
background: url('directory/yourImage.png') no-repeat center bottom;
border: 0 none;
width: 22px;
height: 20px;
margin-left: -1px;
padding-top: 20px;
overflow: auto;
text-indent: -1000px;
cursor: pointer;
position: absolute;
}

Set the padding attribute to the same value as the height of the image in order to replace the submit button. The margin and padding attributes are particular to Firefox and I used these to get the submit button to align with the text input. To get the submit button to line up in IE, use a conditional comment in your to apply different position and margin attributes;

You will have to play around with the text input’s padding in order to make it the same height as the submit button. But you can see what you can achieve in the following screenshot;

This method works in IE6, 7, 8 and Firefox. It also works in Opera, but I haven’t got the submit button to align with the text input. Not a great problem for me as this design is part of an intranet that, for the most part, will be accessed on IE.

Web Review: July

Barney — Sun, 03 Aug 2008 21:34:06 +0000

You might have read the title and hoped I was talking about an excellent program that was hosted by Jason Bradbury late at night on ITV. But, I’m not. I’m actually just going to point myself, and anyone else who can bring themselves to read my blog, towards some websites I like. Predominantly, these will just be websites that have a pretty design, but I may feature some for less frivolous reasons. So, here are this months.

New {Concept} is featured as the headline screenshot and has a lovely navigation menu. Point your mouse over the menu and the hover effect chases you around as you go back and forth. The nice chap behind the website, Szabolcs Bakos, has even provided the JavaScript behind the menu.

Sean Klassen‘s home page is random, but I like that. I also like the fact that Sean Klassen owns a suit. It’s a simple, clean and to the point website. Nothing too fancy and nothing too busy. Plus there is some really good work in the portfolio.

Alex Cohaniuc has a nice menu/portfolio/gallery section for displaying his work. I also like the fact that there isn’t a lot going on, on his website. Just examples of work, a very brief bio and a contact form. Simple.

Web Dev/Design Firefox Extensions

Barney — Wed, 23 Jul 2008 19:33:18 +0000

ColorZilla

Use the eyedropper to pick the colour you’d like to steal from a website. Alternatively, get it to analyse and display all the colours used on a website and steal them that way.

Firebug

View and edit HTML, CSS and JavaScript in Firefox. Great for seeing results of any little changes instantly.

MeausureIt

We all know chaps like to measure things, no matter how small. Now you can measure your website.

Screen grab!

Great extension for taking a full screenshot of a website – top to bottom no matter how big. You can also take screenshots of any selections you wish to make.

Stylish

Create your own style sheets for websites and customise the way they look. Great for getting rid of adverts or making all the text your favourite colour – pink!

Web Developer

There can’t be many people who have an interest in web design/development who haven’t heard of this extension. Invaluable!

Return of the Mack

Barney — Sun, 20 Jul 2008 14:49:19 +0000

Yeah, CeeFourBee is back and I’m still full of puns. For a few reasons, none of which I can be arsed to list, I stopped posting on my blog and then it disappeared for a while. But now I’ve come back with a new design, something that I’d been wanting to do for a while. Although, I did start it back in January this year, but my time became precious and I stopped. You can see the previous design in the above screenshot. Preserved for posterity.

Modification

Barney — Tue, 18 Sep 2007 17:43:40 +0000

Last year there was a thread on OcUK (a forum I frequent) about modifying the default vBulletin theme that is used, changing it from blue to grey. The original idea and CSS was all the idea of Rob Miller. Since then, people have been adding bits to it and finding ways of doing it in both Firefox and Opera.

I didn’t really take that much notice of it to start with, mainly because I was quite happy with the default blue theme. I only got involved once people couldn’t get hold of an extension Rob Miller had made for Firefox that included extra buttons to go with the new colour scheme. So, I took the original CSS, made some new buttons, hosted them and made the new code available so people could have the new theme complete with matching buttons.

After that, I thought that a lot of the old vBulletin icons didn’t really fit in with the grey theme. I took some of the silk icons from FamFamFam, made by Mark James, and started to add them into the theme. I also started to modify some of the default vBulletin icons, changing their colour so that they would fit in with the new grey theme.

A few revisions later and there was a much better looking vBulletin theme for OcUK. That was until another user pointed out that the method I was using to hide the old images/icons wasn’t working very well within Opera. That was simply rectified by adding vertical padding as well as the horizontal padding to each hidden image/icon. That still left one pixel of the original images and icons, but it was a big improvement.

A further revision was made after another member, Augmented, suggested the use of base64 to store the small icon files within the CSS file. Making the new theme far more portable, while also saving me the need to host the images for everyone. Along with a few more changes to make the drop down menus in the reply box readable, a tentative final version was released.

If you use either Firefox or Opera and want to modify the default theme for OcUK, then you will need the Grey Theme CSS file.

Firefox Users

Download and install Stylish extension then restart Firefox
Open Stylish by clicking the small icon in the bottom right corner of Firefox
Go to “Manage Styles”
Choose “Write”
Give the new style a name, I used OcUK Grey Icons
Paste the contents of the Grey Theme CSS file into the main text area
Click save. Your changes should appear immediately

Opera Users

You need to save the Grey Theme CSS file somewhere on your computer
Open the CSS file and remove the first and last lines;
@-moz-document domain(forums.overclockers.co.uk) {
and
}
Go to the website you’re applying the style to in Opera
Right click on the page and choose “Edit Site Preferences”
Go to the “display” tab
From the “My style sheet” box, use the “choose” button to browse your hard drive and find the file you just created
Press “ok”. Your changes should appear immediately

That’s it. It enjoy it to your hearts content.

Do You Want Some Cake?

Barney — Thu, 24 May 2007 13:24:18 +0000

Unfortunately, I don’t have any. I did, however, work with a charity based in Birmingham called G:up to create a CD interface for a resource CD they were putting together. I’d never made an auto run CD before, so that was interesting to work out, although not that difficult to achieve. It just makes it easier for people to access a lot of useful resources provided on the CD.

The final product looks great, though. I met the designer, Ian Cuthbert, who was producing the designs for the information pack folder, CD case and CD itself. I transferred his idea for the bold and colourful fonts from the artwork onto the interface; this was mainly so that it was nice and consistent throughout. Everyone seemed to be pleased with the outcome and it turned into a nice little project.

Wonderfully Webby

Barney — Fri, 11 May 2007 17:48:48 +0000

So, the BBC has managed to win three Webby awards this year. For anybody not in the know *looks down nose at YOU* they are international awards for excellence on the internet, this includes websites, advertising and video. I hadn’t been clued up on this until I heard it on the news, it seems like a cool idea though. Plus everything else has some sort of awards, so why not this?

The BBC won awards for their news website, as well as the “Peoples Choice” for this category, and Radio 1 won the best radio award. I can’t really argue with the BBC News website winning, it’s functional and certainly one of the easiest websites around to use. I also like all the content provided online through the Radio 1 website, listen again is a great feature.

Interestingly enough, while I was at a website training day recently people were asked what their favourite websites were, and nearly everyone said the BBC News website. This, however, was just after they all said they don’t like websites full of text, but I can’t blame them for that little lapse.

I really hope the BBC keep up the good work.

Website Design for Beginners

Barney — Mon, 23 Apr 2007 19:09:50 +0000

I just thought I would write a mini guide on useful resources and links for creating your first website. Over at the HGP forum on Overclockers UK a common question is what sort of software and resources somebody needs to design and make attractive websites. This includes the software they need to make a website, as well as good places for learning (X)HTML, CSS and web standards.

There are quite a lot of WYSIWYG editors available to rapidly produce websites; some obvious ones are Dreamweaver, Frontpage and Nvu. These will have all the tools you need to make a website built in: code editor, design view, link management, site management and FTP.

If you are building a one off website, and don’t have the time to learn to hand code a website, then one of these programs might be the best option for you. If, however, you want to make professional, attractive and accessible websites, then learning to hand code (X)HTML and CSS would be the better option. This way you will learn some skills that you can transfer to any web development program, rather than limiting yourself to one.

Some good free text editors for hand coding are:

If you need a separate FTP program as well, then I would recommend FileZilla. It may also be useful to download various web browsers, as you will need to test how your websites are rendered in each one. You will soon find out that not all web browsers will render your website the same way.

The main browsers you will need are Firefox, Opera, Internet Explorer, Safari and Netscape. Obviously, if you don’t have a Mac you won’t be able to install and run Safari. You can test how your website is rendered in various different browsers and operating systems thanks to Browser Shots. This free website will take screenshots of your website in different browsers, very useful.

I would recommend that you develop and test your website in Firefox, then test it in other browsers and make any alterations needed. Using the Web Developer Extension with Firefox is also a particularly useful tool for testing and developing your websites.

Once you have your development area set up you can start to look at some tutorials on (X)HTML and CSS. The following websites are good places to learn these:

I also recommend that you read about Developing with Web Standards and the Semantics and Structure of (X)HTML.

The following websites are also useful resources for the design and development of websites:

You may also need some inspiration for ideas on design, graphics and interaction. The following CSS showcases should give you an idea of what can be achieved:

Hopefully this should provide you with a good starting point, as well as the resources you need to start making your first website.

CSS Reboot

Barney — Sun, 12 Nov 2006 18:20:28 +0000

So, the November the 1^st CSS Reboot has taken place with 426 rebooters producing some pretty good designs because of it. If I had my arse in gear I would have submitted my own, but I didn’t realise it was happening at the start of November – I think I would have been scared to do so anyway.

The most popular of the reboots haven’t been decided yet, so I thought I’d mention which are my favourites. I must admit that I haven’t viewed all the websites, but I’ve looked at the ones that caught my eye while I was scanning through. So my favourites in no particular order:

Andy Laub Dot Com

For some reason I really like pink on websites, there’s nothing else I like pink on usually, but pink websites do it for me. This one is simple, clean, good-looking and does exactly what it needs to do. Did I mention it’s also pink?

Kurt Der Opa

I really like the simple, clean and open look of this website. Nice logo and simple navigation at the top, with plenty of open white space below, keeping everything well ordered and organised. It makes me wish my bedroom was this clean.

Hyper Ballad

Very subtle colours with a nice pattern blending in nicely with this website. Yet again it’s been made very simply, but to good effect. It does have a flash music player on it, but at least I can stop it without having too much trouble. I guess I might have to embrace this trend of presenting visual and audio media through flash.

Intervisual

I really like this design, crisp, clean and my favourite colour: blue. Very easy on the eye and neatly laid out, I wish it was mine!

Kim Fransman

I like this one because it’s conforming to the usual rectangle shape websites are, but with a slight rebellious kink to it. Makes an interesting use of the space and layout, which is a bit different.

Kineda

I’ve seen this design around for quite a while, so I was surprised to see it featured as a reboot. Nonetheless, it’s still a very good design making use of all the available space. I also think that someone partially ripped off this website, or at least made one that looks very similar.

So these are my favourites. Agree, disagree? Feel free to let me know and even suggest your own.

New Theme for CeeFourBee

Barney — Wed, 06 Sep 2006 18:05:20 +0000

So, I installed WordPress two months ago and it’s taken me that long to come up with my own theme for it. Whether this was due to a lack of inspiration or due to a busy finish to my University course I’m not sure, but I think it has all contributed in some way. The lack of my own theme also hindered my enthusiasm to make entries and maintain the blog. Hopefully now that I have created my own it will motivate me to make more entries for people to read, if anyone is interested of course.

The theme isn’t quite finished, but I think it’s a good start. I certainly need to clean up the HTML and CSS. I had the idea for the slanted header a while ago, it was, however, yellow and black in my mind with a kind of industrial feel to it. Instead, though, I have come up with this cleaner blue version, which I think works well with the other colours selected. I do think it looks too basic at the minute, so I might try and add something to the header or maybe have something at the bottom. Feel free to give me your opinions on how the site currently looks and any suggestions are also welcome.