Monthly Archives: July 2012

WordPress Tip – Removing tags from post excerpt

OK a small tip that I found really useful.

When your trying to get the excerpt of the post in WordPress site you use the following method,

<?php the_excerpt(); ?>

The problem with above is that it will include its own <p> or paragraph tags. There might be an occasion where you don’t wont those tags, like I did today. So then you use the following code,

<?php echo get_the_excerpt(); ?>

Hope this helps 🙂

Embedding Fonts Different Methods

If your a front end web developer you might have received a design of a website that has some uncommon font. Normally fonts like Arial, Times New Roman are commonly present in all browsers/Operating systems, that websites designed with those fonts are rendered more or less same in all browsers. But for websites that has custom fonts or fonts that are not available in a normal users computer the web page will get rendered differently depending on the availability of fonts in the client computer or device.

Some really artisitic and creative web designs requires us to use the specific font the website was designed with. So how to do this? Let the user download the fonts required to view the website properly? hmmm not practical… Develop the entire website in Flash? hmmm seo nightmare :-/

Method to embed fonts on a website so that it may be rendered properly at the client.

Method – Embedding the font files in the website. Using @font-face

What you need,

.ttf or .otf font file. these will work on firefox and other modern browsers.

.eot file for internet explorer -> you can convert .ttf files to .eot using online font file converters like http://fontface.codeandmore.com/ and http://www.kirsle.net/wizards/ttf2eot.cgi

after you get those two files put them in your website directory and at the top of your css file add the following code to define the font-face

/* custom fonts */

@font-face {
font-family: gillsans; /* this could be any name but for clarity use the font name */
src: url(“fonts/gillsans.eot”) /* path of EOT file for IE */
}

@font-face {
font-family: gillsans;
src: url(“fonts/gillsans.ttf”) /* path of  TTF file for CSS3 browsers */
}

Make sure to put the .eot file code first.

Then when you want to apply the font just use like following,

p {

font-family: gillsans; /* font family should be what you defined earlier */

}

This method will work on IE and other browsers but is sometimes difficult due to convert difficulties of font files from .ttf and .otf to .eot format.

 

Prevent Skype Highlighting on your website

If you have skype installed on your computer you will see that phone numbers on a website are highlighted,

Skype Highlighting

This is all good and useful if your a web user, but this could be a nightmare situation if your a web developer, as this could create havoc with your layouts.

To prevent skype highlighting from showing and messing up your carefully created design you can add the following style rules to your css file,

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container, span[class^=”skype_pnh_print_container”] {display:inline !important;}