All posts tagged 'css'

Making Internet Explorer Behave Like a Real Browser

Apr 29 2008

Recently I’ve been doing a lot of cross-browser work (IE 6 + 7, FF and Safari required to function similarly, unfortunately), and I’ve narrowed down my list of hacks/tricks to make Internet Explorer be able to actually render standards-compliant HTML in a manner remotely befitting a modern browser. Here are my list of “go-to” hacks which seem to fix at least 90% of rendering, layout and positioning issues in IE(6|7).

Read the rest of this post…

Customizing WordPress 2.5′s Admin Panel

Mar 12 2008

While I was poking around in a pre-release version of WordPress 2.5 (which has been slightly delayed for actual release), I found out that the Admin panel (everything under /wp-admin/) is now pretty easily customizable through CSS.

Basically what they’ve done is extracted all the color-based information from the admin CSS files, and put them into pluggable files called “Admin Color Schemes”. The cool bit is that it looks really easy to add your own! It looks like the Admin Color Scheme is one of the last (core) stylesheets loaded into a page as well, which means you’re really not limited to only changing the colors.

So how do you do it? Here we go:

Download this plugin: WP Admin Color Schemer 1.0
Install and enable the plugin, which will look for CSS files inside its own “/schemes/” directory (/wp-content/plugins/wp-admin-color-schemer/schemes/*.css).
Create your own CSS file and drop it in that directory. The filename of the CSS file should be a lower-case, letters/numbers only, dash-separated version of the name of the scheme. For example, a scheme called “Billy’s Amazing Scheme” would be in a file named “billy-s-amazing-scheme.css” (replace everything that isn’t a letter or a number with a dash, but only ever have a single dash at a time). Make sure the first line looks like this (with “My Admin Scheme” being the name you want to give your scheme, and each hex value representing one of the main colors used in your CSS palette. This must be the first line of the CSS file, be commented out as below, and must contain commas, but the spaces are optional):

/* My Admin Scheme, #000000, #111111, #222222, #333333 */

Once you’ve done that, go to your profile page within the Admin Panel, and you’ll see your new scheme and should be able to easily select it. When you hit the Update button, your Admin Panel should take on the new colors immediately.

If you’d like to use one of the built-in Admin Color Schemes as a starting point, then they live at /wp-admin/css/colors-classic.css and colors-fresh.css.

Now you can easily style your Admin Panel to match the rest of your site (and hopefully Theme authors out there will start packaging Admin Color Schemes to match their Themes).

Resizable Google

Dec 17 2003

I don’t know if anyone else noticed, or indeed when it actually happened, but I know that a couple months ago, you couldn’t successfully resize the Google results pages using the ‘Text Size’ option in Internet Explorer.

Purely by accident, I opened a Google page with my text size set to ‘largest’ and lo and behold, they have modified their HTML to allow for resizing of fonts. Even their AdWords ads resize according to the browser preference.

Looking at the source, it looks like they are slowly moving towards a CSS-based layout/design, although they still have a ways to go. Incidentally, I did a copy of their layout with CSS for an internal search engine that I built and it wasn’t that hard at all, their design even lends itself to being done with DIVs, UL/LIs and A tags, styled up with CSS.

So here’s their style definition on a results page now-days;

body,td,div,.p,a{font-family:arial,sans-serif }
div,td{color:#000}
.f,.fl:link{color:#6f6f6f}
a:link,.w,a.w:link,.w a:link{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:#f00}
.t a:link,.t a:active,.t a:visited,.t{color:#ffffff}
.t{background-color:#3366cc}
.h{color:#3366cc}
.i,.i:link{color:#a90a08}
.a,.a:link{color:#008000}
.z{display:none}
div.n {margin-top: 1ex}
.n a{font-size:10pt; color:#000}
.n .i{font-size:10pt; font-weight:bold}
.q a:visited,.q a:link,.q a:active,.q {color: #00c; text-decoration: none;}
.b{font-size: 12pt; color:#00c; font-weight:bold}
.ch{cursor:pointer;cursor:hand}
.e{margin-top: .75em; margin-bottom: .75em}
.g{margin-top: 1em; margin-bottom: 1em}

As you can see, they are not defining a font size for a lot of their elements, which is a good move, as it will inherit the browser settings automatically. One thing that I did notice is that the fixed-size fonts they are using (“.n a” and “.n .i”) are only applied to the numbers used for the links to different pages of results. I am assuming that they have done this because otherwise there’s the potential that thei cool little string of ‘o’s will be messed up from font sizing

Good Work Google! Good to see more of the big-boys embracing CSS design, I just hope that they continue down this path and have a completely CSS-driven design in the near future, browsers are almost up to speed so that it’s a valid move for them I think.

CSS2 Selectors

Jul 22 2003

I am using CSS2 selectors in the style sheet for the new Dented Reality website to try and avoid some of the problems in layout/sizing that I was having between Mozilla (Netscape), Opera and IE6. I haven’t tested on IE5.x yet, but according to some of the “css hack” sites I have been looking at, I will need to include another hack to make it work on that.

So far, so good.

This whole site is now presented using XHTML and CSS, with no (layout) tables at all. If you view the source, you will see that the code is quite clean as well – I have laid out the source in a manner which makes it more friendly to people using text-only browsers like Lynx, or to people with no style sheet support in general. I have put the content first, and then worked from there, towards the less-important navigation elements etc.