Kdn

A new version of fluidgrid are available at the new product site.

I did my first Wordpress MU installation yesterday and here is a couple of notes on my experience so far, including some tips.

Wordpress

My usual installation procedure when I set up wordpress for the first time.

1. Upload WP to the server
2. Run the installation
3. Delete all plugins except for Akismet
4. Delete all themes
5. Upload BAREHTML5 (I’ll get back to you later today about what that is)
6. Create a new admin user
7. Log out with admin, log in with my new user and delete admin user
8. Set up Akismet
9. Install WP Security Scan plugin from the plugins menu
10. If WP Security Scan produce any errors, fix them
11. Adjust all the admin setting according to what your theme will do
12. Code the theme

Wordpress MU

I did the same as with WP when I installed WP MU for the first time. All the same steps except from step 3 and 4. As I soon figured out that would be a time consuming error as I would have to start all over. Setting admin rights under the User tabs isn’t enough to create a new “Super user” for WP MU.

After some messing around in the admin tool and a reinstallation, my WP MU procedure is the following.

1. Upload WP MU to the server
2. Run the installation
3. Create the new user
4. Go into the option settings under the Site admin menu
5. Add the new user to the Site Admins – Administration options
6. Log out with the admin user, log in with the created user, delete the admin user.
7. Upload BAREHTML5 to the themes folder
8. Code

More information on what I will use WPMU for soon™.

Switch from WP to WPMU

1. Create a temporary installation for your “old” blog. Move all content on to the temporary blog and choose to import all content (images, videoes, etc).
2. Install WPMU in the base of your site (the steps above) and create a new blog.
3. Swap to the new blog under the site admin settings
4. Set up the blog to your old blog URL.
5. Install your theme and activate it for your blog
6. Import the content from your temporary blog
7. Check if everything works, if it does delete your temp blog. You are now good to go.

Where this even remotely useful? Please comment with your WP to WPMU experience.

Custom fonts in Internet Explorer have been around for ages with @font-face. As you all know Internet Explorer does bearly follow the last generation web standards. If you have read my previous post about @font-face, you know that the font format Embedded OpenType(.eot) works out of the box in IE.

Almost every font you buy/get is in either TrueType(.ttf) or OpenType(.otf) format. The first step to get your custom font going in IE is to convert your font into Embedded OpenType(.eot).

Convert your font

• TrueType to Embedded OpenType
• All – OnlineFontConverter
• Microsoft WEFT
• Screencast by Snook – TTF/OTF to EOT

Upload both your EOT file and your OTF/TTF file to your webserver and declare the CSS like this.

The magic

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.eot);  }
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }

Remember to declare font-face for IE before you declare it for Firefox/Safari/Opera/All the other browsers that isn’t stuck in the 90s.

This is a new way of thinking about your data. Microformat are small patterns of HTML/XHTML to represent commonly published things like people, events, blog posts, reviews and tags on webpages. Search engins and browsers use the small snippets of code for a few different things. I’m going to go through a couple of the different microformats in this blog post. You can read more about it on the microformat.org website.

Continue reading about Microformats…

Text-shadow is used to either get a shadow or an effect on a text element. You can pass multiple shadows to one text element. When you use text-shadow for a effect you may get totaly different resaults depending on the type of font you use. Lets take a look at the markup.

Regular black shadow

text-shadow:
1px /* X-coordinate of the text shadow - px/em */
1px /* Y-coordinate of the text shadow - px/em */
4px  /* The blur radius of the text shadow - px/em */
black; /* Color of the text shadow - #/rgb/rgba/color name */

Lets create some different effects.

White highlight

This efffect is a little bit trendy at the moment. I use it in the menu on this site.

text-shadow: 0 1px 0 white;

Multiple shadows – 3D effect

text-shadow: 0 -1px 0 white, 0 1px 0 black;

Fiery Effect

text-shadow: 0 0 2px #aaa, 2px 2px 4px #ff3, 4px 12px 6px #fd3, 8px 15px 11px #f80, 8px 18px 18px #f20;

It is pretty simple. If you create something beautiful please leave a link in the comments.

Compatibility

• IE ≤ 8 no
• Firefox 3.1+
• Safari 3.0+
• Chrome 2+
• Opera 9.62+
• Konqueror 3.5.7+

@Font-Face is only one of several technics to get selectable custom fonted text on websites.

• @Font-Face
• sIFR
• FLIR

Licensing

By adding custome fonts to your site you might run into truble if you don’t check the license on the font you want to use. Some font designers have restrictions so you have to buy a custome license, some arn’t alowed at all. One of my favorite font designers exljibris alow @font-face usage of his fonts as long as you add a css comment close to your font declaration.

Fileformats

You can use a variety of different file formats when you embed a font. You can even serve the file as xml with svg directly into a xhtml page.

• TrueType(.ttf)
• OpenType(.otf)
• Embedded OpenType(.eot)
• Scalable Vector Graphics(.svg)
• TrueDoc(.pfr)

There are however a restriction on what filetypes you can use. Check the compatibility chart below.

Example

/*
===========================================
Diavlo is a font by Jos Buivenga (exljbris) -> www.exljbris.nl
===========================================
*/
@font-face { font-family: "DiavloLight"; src: url(diavlo_light.otf); format("opentype"); }

Compatibility

Table is licensed with Creatice Commons 3.0 by-sa from author Wikipedia

As explained in my portfolio the idea behind this site, was to create a website without using any images for the design. If you are viewing this site with Safari or one of the nightly webkit builds you might notice the gradient in the header. That is what this article is about.
Example page

Linear gradient markup

background: -webkit-gradient(
linear, /* Type of gradient */
0 0, /* Left-, top- position */
0% 100%, /* Left-, top- position */
from(rgb(0,0,255)), /* Starting color */
color-stop(0.7, orange), /* specifies the location of a gradient stop and the color it has */
 to(red)); /* end color */

Radial gradient markup

background: -webkit-gradient(
radial, /* Type of gradient */
150 80, /* center location of the center of the circle */
10, /* Size of the center of the circle */
120 80, /* center location of the outside of the circle */
130, /* Size of the center of the circle */
from(rgb(255,255,255)), /* Color to the center of the gradient */
color-stop(0.5, orange), /* specifies the location of a gradient stop and the color it has -> I dont use it in my header. */
to(rgba(255,255,255, 0))); /* the end color */

As you can see in the header I don`t use the specified color-stop.

Some notes

• Location can be specified with a number and %
• Color can be specified with color name, hex, rgb and rgba

So whats the cool things you can do with this?

Button with highlight and a hover effect.

.bevelandemboss{
width: 100px;
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,255,0,0.3)), to(rgba(0,255,0,1))),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(50, 255, 50, 0.7)));
-webkit-border-radius:10px;
color: #333;
font-size: 1.5em;
text-align: center;
text-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.6);
}
.bevelandemboss:hover{
background:
-webkit-gradient(linear, 0 0, 0 100%, from(rgb(0,255,0)), color-stop(0.5, rgba(0,255,0,0.5)), to(green)),
-webkit-gradient(radial, 70 70, 10, 70 70, 80, from(rgba(255, 255, 255,0)), color-stop(0.8, rgba(255, 255, 255,4)), to(rgba(100, 255, 100, 0)));
cursor: pointer;
-webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}