Web styling tricks

How to change Firebug interface language

2010-12-01T15:32:00.011+01:00

As we all know, Firebug is a must have extension for all web developers, designers and for a lot of other web enthusiasts.
As I'm using Firefox in my domestic language which isn't english, Firebug automaticly detects the browser interface language, and you can't change it's language back to English.
For some people this is okay, but some just want to have Firebug with english interface. Firebug does not offer the option to switch language, so we have to make a little workaround.
This tutorial was made on Windows XP, but all newer versions of windows should have almost the same principle.
You can choose between two methods:
Change Firebug language by editing chrome.manifest and changing Firebug language by editing about:config which is available in Firebug version 1.6 and newest.

Change Firebug language by editing chrome.manifest file

Changing the Firebug interface language

Let's go step by step, so you can't miss anything.

Open Windows Explorer
Go to your primary partition, and open folder Documents and Settings
Open the profile folder you are using (John)
Open the folder named Application Data
Open the folder named Mozilla
Open the folder Firefox
Open the folder Profiles
Open the Firefox profile folder, in my case its only one.
Open the extensions folder
Open the folder named firebug@software.joehewitt.com

Firebug language file in Firefox folder

Now you should be and see something like this:

Edit the Firebug language file

Now open the file named chrome.manifest with notepad or any similar text editor.
Find the line that defines your language, in my case it is:
locale firebug sl-SI locale/sl-SI/
And change it to:
locale firebug sl-SI locale/en-US/

Save the file, restart Firefox and Firebug interface will be in desired language.

Change Firebug language by editing about:config

If u are using Firebug v1.6 or later, the fastest way to change its interface language is to edit a line in about:config

In the address bar type about:config
Find the parameter named extensions.firebug.useDefaultLocale
Doubleclick on it and change its value from false to true

Restart the Firefox, and the Firebug should now come up with english interface.

Free web fonts directory from Google - overview

2010-05-21T17:56:00.021+02:00

Google introduced their web fonts from their font directory, which are open source, and ofcourse, free to use in any web sites!
In this article I looked a little bit deeper, to let you know how you can use them in your websites.
First of all, the web font directory became accesible to public on May 19th, 2010, and curently has 18 families, some sub-families and variants.

I'm the fancy Lobster font!

I'm from the Yanone Kaffeesatz font family

Import web fonts into your template

You have 3 variants to import them into you template.

1. Include fonts between head tags

You can include the link to the font source in <head> using:

Where the Yanone Kaffeesatz is the type of the font, but I don't like a mess between the head tags, so I prefer the 2nd or 3rd variant.

2. Include fonts at the beginning of <body> tag

Usefull variant if you want to use the selected font only in one page.

Very usefull in your blogger or wordpress pages, when u don't want to change the whole template.

3. Import fonts into your external stylesheet

My favourite!

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

Simply add the @import syntax at the beginning of your external stylesheet.

Define the font family to your elements

Simple as that, choose a element where you want to use web fonts.

Whole page uses the same font family

You can define them in your stylesheet or in the html tags.

Define font variant in the stylesheet

body { font-family: 'Yanone Kaffeesatz', arial, serif; }

This will make your website more clear and easy to edit later, so I recommend you to use stylesheets.

Define font variant in the html body tag

Simply edit the body tag at the beginning of the page.
You can also use this way, but I think it's a little bit outdated, and the html gets messy.

Multiple web fonts in one page

If you want to use multiple fonts just add a delimiter | in the link to the source font.

http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Droid+Serif|Cantarell

Here is a example using Yanone Kaffeesatz, Droid Serif and Cantarell font in one stylesheet.

Google webfonts

And I almost forgot to tell you where can u get the fonts, they are available here!

Font preview with CSS code

Preview your text how it looks with chosen font!

Edit line height, word spacing, text decoration and stuff by clicking here!

CSS3 and web fonts ?

Sure, why not, you can also use CSS3 font properties like text-shadow and other related proprerties, this will probbably be my next article, so stay tuned!

CSS Comments vs. HTML Comments tags

2010-01-08T20:16:00.004+01:00

When you are writing CSS or HTML syntax, it's good for you to make comments, so in the near future when you will be updating your CSS stylesheet or HTML page, you will know what is what.
In someway, in the beginning you think comments are waste of time, but when you have multiple CSS stylesheets or HTML pages, you will find comments very useful!
Let's take a look at this simple syntax.

CSS Comments tags

The CSS comment syntax is very simple, you just have to remember it always starts with /* and ends with */, no matter if it is one line or multiline comment.
Let's take a look at the CSS example:

/*Image container*/
.img {
width:200px;
height:300px;
background-color:#DF0101 /*Red color for the background*/
/*border:2px solid #0101DF; Naah, i don't need borders right now, maybe i'll need them later*/
}
/*End of image container*/

/*One line comment*/

/*
Multiline
comment
*/

HTML Comments tags

HTML comments have much the same syntax as CSS comments, the only thing you have to remember is, that they start with , and can also be multiple lines long.
Let's take a look at the example:

<p>One simple uncommented paragraph</p>

That's all, see ya next time and stay tuned!

How to hide receivers e-mail in outlook

2009-12-24T14:48:00.006+01:00

When you are sending mass messages like newsletters, congratulations and other stuff via e-mail, it's good to hide recievers (recipients) e-mail address by adding them to BCC field.
So in this article I will explain you how to show the BCC field in Microsoft Office Outlook 2003 and Outlook Express. For easy understanding I have made screenshots.

How to hide recipients e-mail in Microsoft Outlook Express

Because it comes with operating system, I decided to describe it first.

Create a new e-mail message

First of all, you have to create a new untitled message, so simply click on the Create Mail

Add BCC field into the message

In the toolbar, go to View and make sure that All headers is checked!

Finished, BCC field is here!

You have now BCC field for hiding receivers e-mail address enabled.
Instead of writing receivers e-mails into "To:" field, write them into "Bcc:" field.

Hide recipients e-mail in Microsoft Office Outlook 2003

Now let me show you how to setup Bcc in Outlook 2003 in three simple steps.

Create a new blank message

Simply click on the New button to create a new e-mail message.

Add the BCC field into the toolbar

In the toolbar under Options select the Bcc field.
OR
Go to the View menu and select the Bcc field

Finished, sent your mail

Now you can add recipients into the Bcc field. That's all magic! :-)

CSS2 - custom mouse cursor styles

2009-12-15T04:03:00.021+01:00

If you were looking how to make a custom mouse cursor, you have come to the right place. Let's say you want to make your page a little bit stylish or just looking to updgrade some CSS2 knowledge about cursor styles, take a look and there's gotta be something for you. For every cursor style, you can copy the code and use it for yourself!
This time I will not define them in custom CSS stylesheet or in between style tags, but I will define and use them in element span, you can also use p, a, h1, h2, img and so on, it's your decision!
If you want to use them multiple times on site, it's better to define them in CSS.
This cursor property is supported in Internet Explorer, Mozilla, Opera, Google Chrome and Safari.

Auto and default mouse cursors

Auto cursor

Auto value depends on the element, used in most cases if you don't define a value.

<span style="cursor:auto">preview</span>

preview

Default cursor

Default value is defined in your OS or browser, which will be used on the pages.

<span style="cursor:default">preview</span>

preview

Pointer and crosshair cursors

Pointer cursor

Pointer value or known as hand cursor used in links.

<span style="cursor:pointer">preview</span>

preview

Crosshair cursor

Dunno what to say, check it out, and make your definition of crosshair value.

<span style="cursor:crosshair">preview</span>

preview

Help and move cursors

Help cursor

Displays help sign beside a pointer.

<span style="cursor:help">preview</span>

preview

Move cursor

Perhaps you know this cursor, used when you move the window or something.

<span style="cursor:move">preview</span>

preview

Progress and wait cursors

Progress cursor

Displays a progress bar beside a pointer.

<span style="cursor:progress">preview</span>

preview

Wait cursor

Displays a progress bar known as sand clock.

<span style="cursor:wait">preview</span>

preview

Text, vertical text select and not allowed cursors

Text select cursor

This value defines a selection symbol for text.

<span style="cursor:text">preview</span>

preview

Vertical text select cursor

This value defines a vertical selection symbol for text.

<span style="cursor:vertical-text">preview</span>

preview

Not allowed cursor

I guess, this doesn't need any explanation, so hover thru preview and you will see.

<span style="cursor:not-allowed">preview</span>

preview

Resize cursors

For east-west and north-south, I will paste two values which can be used, and both show the same.
In the bottom are defined row and col resize values.

East and west resize cursors

Both values look the same, so here you have both values.

<span style="cursor:e-resize">preview</span>
<span style="cursor:w-resize">preview</span>

preview
preview

North and south resize cursors

Both values look the same, so here you have both values.

<span style="cursor:n-resize">preview</span>
<span style="cursor:s-resize">preview</span>

preview
preview

South-east and north-west resize cursors

Both values look the same, so here you have both values.

<span style="cursor:se-resize">preview</span>
<span style="cursor:nw-resize">preview</span>

preview
preview

South-west and north-east resize cursors

Both values look the same, so here you have both values.

<span style="cursor:sw-resize">preview</span>
<span style="cursor:ne-resize">preview</span>

preview
preview

Row resize cursor

Usable for resizing rows

<span style="cursor:row-resize">preview</span>

preview

Col resize cursor

Usable for resizing cols

<span style="cursor:col-resize">preview</span>

preview

Custom mouse cursor

Just change the custom.cur with your location of the cursor image.
Tested only in IE6, so use it at your own risk!
FireFox3.5, Opera 9 and Chrome displays normal cursor.

<span style="cursor:url(custom.cur)">preview</span>

preview

CSS3 - rounded corners -moz-border-radius

2009-12-06T00:17:00.008+01:00

Last time, I was talking about rounded corners in article CSS3 - rounded corners - How To, now I think it's time to get a little bit deeper and explain something about property -moz-border-radius, so you can see what is capable of.
First of all, -moz-border-radius is supported in Mozilla browsers, and it works in Firefox 3.0 or later versions.
In previous article, I made a div, with background color and border, this time I will only use div with background color and fixed width and height, you can add borders later if you want.
So let's get started :-)

I will define div class named rounded, with width of 200px, height of 100px and blue background, this will be the basis for all other rounded corner divs.

div.rounded {
width:200px;
height:100px;
background:#0000ff;
}

The preview of normal div:

All four rounded corners

This shorthand property will define radius of 25px to all four corners.

div.rounded {
-moz-border-radius:25px;
}

The preview of all four rounded corners:

Rounded corners with two different values

If you assign 2 values, first value defines the radius of top-left and bottom-right corner, second one defines the radius of top-right and bottom-left corner.

div.rounded {
-moz-border-radius:25px 75px;
}

The preview of rounded corners with 2 defined values, 25px and 75px:

Rounded corners with three different values

If you want to have three different corners, you just have to define three values.
The sequence of values goes so:
1. First value defines the radius of top-left corner, in this case 25px
2. Second value defines the radius of top-right and bottom-left corners, in this case 75px
3. Third value defines the radius of bottom-right corner, in this case 5px
Let's see how to define:

div.rounded {
-moz-border-radius:25px 75px 5px;
}

Here comes the preview of three defined values:

Rounded corners with four different values

Like we did above, we can also define all four values, to set different radius for each corner, and the sequence goes so:
1. Value for top-left
2. Value for top-right
3. Value for bottom-right
4. Value for bottom-left

div.rounded {
-moz-border-radius:15px 30px 45px 60px;
}

The values you can see above, here comes the preview:

Define radius for each corner

If you want to define the radius for each corner you can do it in two ways.

One way - only top-left corner will be defined (15px), others will have radius of 0px

div.rounded {
-moz-border-radius:15px 0px 0px 0px;
}

Second way, you can define only one property, which are:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft

Here is the same trick like above, I will define only the top-left corner, others won't be defined.

div.rounded {
-moz-border-radius-topleft:15px;
}

The result is the same in both ways, here is the preview:

Horizontal and vertical radius

Let's say, you want do define the corner radius, but want it to look like elipse. Simple trick will do the work, let's see.
In this example I want only top right corner to be defined, and the horizontal radius will be 45px, vertical will be 15px.

div.rounded {
-moz-border-radius-topright: 45px 15px;
}

And it should look like this:

But what if you want to define all four corners with different horizontal and vertical value? I prefer shorthand properties, so let's have a look bellow.
The tricky part does the / character!

div.rounded {
-moz-border-radius:15px 30px 45px 60px / 7px 15px 22px 30px;
}

Here comes the preview of all four defined corners with horizontal and vertical values:

That's all for today, see you next time when we will take closer look of webkit-border-radius, so stay tuned!

CSS - border and background for image

2009-12-04T13:08:00.008+01:00

Images with no borders on websites really look kinda old or outdated I think, so I will show you how to style your images with a simple CSS code, which adds border and background to image.
Let's get this party started :-)

1. Define image class in CSS and border color

img.borderbg {
border:3px solid blue;
}

2. Magic part, define padding and background color, the padding does the trick.

img.borderbg {
border:3px solid blue;
padding:10px;
background:#a2a3a3;
}

3. Try it!

And it should look like this below.

If you want to use some more magic, try CSS3 rounded corners, and the image will then look more stylish!

That's all for today. Have a nice day!

CSS3 - rounded corners - How To

2009-12-04T07:17:00.007+01:00

Do you want to know how to make rounded corners in a few minutes? It's quite simple, you just have to add some CSS and you're done. I have tested this in Firefox and Google Chrome, and it works, but it doesn't work in micro&soft internet explorer, do you think I care ? :-)
Let's have a look how it's done.

First of all, you must define a block element in CSS (image, span, div or whatever you want, but don't forget, it must be a block element!)
For this example I will make a div.

1. Make a div, I will make a div class called rounded, define a blue background and fixed width and height.

div.rounded {
width:150px;
height:150px;
background:blue;
}

2. Add a border and rounded corners, I will define a 4px solid red border, and rounded borders with radius of 8px.

border:4px solid red;
-moz-border-radius:8px;
-webkit-border-radius:8px;

3. Rounded corners are here! Here you have the whole CSS code.

div.rounded {
width:150px;
height:150px;
background:blue;
border:4px solid red;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

4. Use them in HTML

<div class="rounded">
<h3 class="white">Rounded corners with CSS</h3>
</div>

Isn't that simple?, Let's have a look how it looks.

Rounded corners with CSS

And for those, who can't see it, here is a picture preview:

CSS3 and rounded corners with -moz-border-radius

Submit your blog to RSS feeds for free

2009-12-04T06:25:00.002+01:00

Here I have collected a list of RSS submissions sites, where you can submit your blog to RSS feeds. Take a look and happy submitting!

http://www.blogdigger.com/add.jsp
http://www.readablog.com/AddFeed.aspx
http://blogarama.com/in.php?ID=4998
http://www.blogstreet.com/
http://www.globeofblogs.com/
http://www.kmax.ws/bloglinks.htm
http://www.blogsearchengine.com/
http://www.bloghop.com/
http://portal.eatonweb.com/add.php
http://www.popdex.com/addsite.php
http://blo.gs/ping.php
http://www.blogcensus.net/
http://www.blogtree.com/
http://www.blogstreet.com/
http://www.britblog.com/
http://www.bloglines.com/
http://australian.buzzword.com/
http://boingboing.net/suggest.html
http://www.rootblog.com/Ping/
http://www.weblogs.nu/directory/?add=top
http://www.truthlaidbear.com/addtoscan.php
http://www.sarthak.net/blogz/add.php
http://blogmatcher.com/u.php
http://www.blogpulse.com/submit.html
http://www.blogcatalog.com/blogs/submit_blog.html
http://www.blogdir.com/dir/formreg.php
http://www.blogsrus.net/addfeed.asp
http://www.csthota.com/blogmap/submit.aspx
http://www.blog-search.com/blog-submission.html
http://www.blogsweet.com/
http://www.blogflux.com/
http://www.blogtagstic.com/add-blog.php
http://blogintroduction.com/?page_id=2
http://findingblog.com/
http://www.bulletize.com/add.php?sid=0
http://www.blogtopsites.com/register.php
http://www.blogfuse.com/directory/
http://www.blogion.com/index.php?p=submit
http://www.addurlblog.com/dir-bin/addlink.pl
http://www.blogbib.com/submit.php
http://blogs.botw.org/helpcenter/submitblog.aspx
http://www.blog-directory-submit.com/
http://www.iblogbusiness.com/add.html
http://www.blogsitezone.com/addlisting.asp?cat+
http://www.blogtoplist.com/add-blog.html
http://www.blogburst.com/blogger/add-blog.html

DoFollow blogs sorted by PageRank

2009-12-03T17:13:00.005+01:00

Here is a list of blogs sorted by PageRank, which have dofollow links in your comment name, take a look and don't be spammy!
The list will be updated every week.

PR8 blogs
http://www.newsobserver.com/
http://blogs.cisco.com/news
http://www.engadget.com/
http://getmiro.com/

PR7 blogs
http://grouplens.org/
http://crooksandliars.com/
http://www.trianglemom2mom.com/
http://www.esnips.com/

PR6 blogs
http://www.themallblog.com
http://businessfinancemag.com/
http://www.eartheasy.com/blog/
http://harry.sufehmi.com/

PR5 blogs
http://www.oilman.ca
http://psdvibe.com

PR4 blogs
http://blogs.cabinetoffice.gov.uk/digitalengagement
http://www.steverenner.com
http://terryheath.com/
http://www.knowtebook.com/
http://jove.homeschooljournal.net/
http://www.seotops.com/

PR3 blogs
http://www.webjourney.me/
http://www.netmarketingcourse.net/
http://www.pingable.org/

PR2 blogs
http://www.theincometeam.com/blog/
http://inmyplace.info/

PR1 blogs
http://www.niftygaloot.com/
http://www.matblogger.com/
http://tampafloridarealestateblog.com/
http://www.makingmoneyonline.com/
http://chummydog.com/

PR0 blogs
http://www.jowki.com/
http://webmaster-diary.com/
http://clicktechnews.com/

CSS - force divs to align beside each other

2009-12-03T02:06:00.013+01:00

This is my first post, so I will start with a little bit simple problems.
Did you ever had problems when aligning DIVs, for example, you want to put the video clip on the left side, on the right side you want to put some description of the video.
I had this problem a few days ago, when div's didn't want to align beside each other. With a little bit of searching over the internet i found some simple css properties to do that, so let's see how i solved this.

First of all, i had to make one master container div to put the child divs into it.

I will set fixed width and height, and background too, so you could see which is container div and the child left and right divs.

Create the container in CSS

#container {
background:blue;
width:400px;
height:150px;
}

Now you have to create left and right DIV

#container .left {
width:200px;
height:100px;
background:red;
float:left;
}
#container .right {
width:200px;
height:100px;
background:green;
float:right;
}

If you look in the CSS code, I have made the left and the right div as a CLASS, the container is an ID, and set to left div to float left, and to the right to float right. Simple huh?

Now we just must put them in HTML

And you should see something like in the bottom, the blue one is the container div, the red one is left div and the green one is the right div.

Left DIV

Right DIV

Container DIV

That's all, see you next time! If you have any questions, feel free to ask.

Web styling tricks

How to change Firebug interface language

Change Firebug language by editing chrome.manifest file

Changing the Firebug interface language

Firebug language file in Firefox folder

Edit the Firebug language file

Change Firebug language by editing about:config

Free web fonts directory from Google - overview

Import web fonts into your template

1. Include fonts between head tags

2. Include fonts at the beginning of <body> tag

3. Import fonts into your external stylesheet

Define the font family to your elements

Whole page uses the same font family

Define font variant in the stylesheet

Define font variant in the html body tag

Multiple web fonts in one page

Font preview with CSS code

CSS3 and web fonts ?

CSS Comments vs. HTML Comments tags

CSS Comments tags

HTML Comments tags

How to hide receivers e-mail in outlook

How to hide recipients e-mail in Microsoft Outlook Express

Create a new e-mail message

Add BCC field into the message

Finished, BCC field is here!

Hide recipients e-mail in Microsoft Office Outlook 2003

Create a new blank message

Add the BCC field into the toolbar

Finished, sent your mail

CSS2 - custom mouse cursor styles

Auto and default mouse cursors

Auto cursor

Default cursor

Pointer and crosshair cursors

Pointer cursor

Crosshair cursor

Help and move cursors

Help cursor

Move cursor

Progress and wait cursors

Progress cursor

Wait cursor

Text, vertical text select and not allowed cursors

Text select cursor

Vertical text select cursor

Not allowed cursor

Resize cursors

East and west resize cursors

North and south resize cursors

South-east and north-west resize cursors

South-west and north-east resize cursors

Row resize cursor

Col resize cursor

Custom mouse cursor

CSS3 - rounded corners -moz-border-radius

All four rounded corners

Rounded corners with two different values

Rounded corners with three different values

Rounded corners with four different values

Define radius for each corner

Horizontal and vertical radius

CSS - border and background for image

CSS3 - rounded corners - How To

Rounded corners with CSS

Related articles:

Submit your blog to RSS feeds for free

DoFollow blogs sorted by PageRank

CSS - force divs to align beside each other