Archive for May, 2011

Problem :  When login to  Joomla Administrator panel,  receiving this error:

Error loading feed data

On the home page. This is not affecting and working at all, but this is an error?

Solution :  It’s not a bug, you just need to disable the ‘Joomla! Security Newsfeed’ module
Extensions=>Module Manager=>’Administrator’ tab and
disable ‘Joomla! Security Newsfeed’ module.
Becsuse this module load feed data with link http://feeds.joomla.org/JoomlaSecurityNews,
this link is broken, so it pop up a error loading feed data error.

You want to extend WordPress’ functionality and decided to download some plugins found in the Official WordPress Plugin repository. After searching the repo, you’ve found two plugins that accomplishes the tasks you needed to implement in your blog. Downloading the plugins gives you two ZIP files that when double-clicked, shows you the contents in the following format:
plugin-a.zip

plugin-a-folder
---- plugin-a-main-file.php
---- plugin-a-readme.txt

plugin-b.zip

plugin-b-folder
    ---- plugin-b-subfolder
    -------- plugin-b-main-file.php
    -------- plugin-b-readme.txt

There are two ways to install a plugin. Option 1 is to unzip the file and upload the contents to wordpress_root/wp-content/plugins/ directory. Option 2 is to use the Add New -> Upload option found in the left panel bar of the administrative page of WordPress. Let’s assume the two plugins went through the two installation options.

Installing ‘plugin-a.zip’ using Option 1

  1. Unzip the file
  2. Upload the contents to wordpress_root/wp-content/plugins/
  3. Login as admin and go to Plugins -> Installed.
  4. Locate plugin and click Activate link.
  5. Result:
    Plugin activated.

Installing ‘plugin-a.zip’ using Option 2

  1. Login as admin and go to Plugins -> Add New -> Upload
  2. Locate the file plugin-a.zip by clicking the Browse button.
  3. Click Install Now button.
  4. Result:
    Unpacking the package?
    Installing the plugin?
    Plugin installed successfully.
  5. Click Activate Plugin link.
  6. Result:
    Plugin activated.

Installing ‘plugin-b.zip’ using Option 1

  1. Unzip the file
  2. Upload the contents to wordpress_root/wp-content/plugins/
  3. Login as admin and go to Plugins -> Installed.
  4. Locate plugin and click Activate link.
  5. Error: Plugin does not exists in the list.

Installing ‘plugin-b.zip’ using Option 2

  1. Login as admin and go to Plugins -> Add New -> Upload
  2. Locate the file plugin-b.zip by clicking the Browse button.
  3. Click Install Now button.
  4. Result:
    Unpacking the package?
    Installing the plugin?
    Plugin installed successfully.
  5. Click Activate Plugin link.
  6. WordPress ? Error

The plugin does not have a valid header.

Based on our testing, plugin-b.zip seems to fail on both methods of installation. To find out what is causing the error, we have to understand how the plugin installation works. Upon checking the core files I found this excerpt in get_plugins() function:

* WordPress only supports plugin files in the base plugins directory
* (wp-content/plugins) and in one directory above the plugins directory
* (wp-content/plugins/my-plugin). The file it looks for has the plugin data and
* must be found in those two locations. It is recommended that do keep your
* plugin files in directories.

The plugin data that the function is looking for can be found below:

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/
?>

So in order to properly install and activate a plugin, the following two conditions must be satisfied:

  • that a plugin main file (.php) must be placed in plugins root folder or in first-level subdirectory within plugins folder
  • and it should contain the necessary plugin data for identification/validation purposes

In the case of plugin-b.zip, although the main PHP file contains the needed plugin data, the validate_plugin() function returned an error since neither the file can be found or check if it contains the plugin data because it is placed in the second level subdirectory, a directory location in which the function is not designed to scan the content.

To fix the plugin-b.zip file, it needs to have the following content structure:
plugin-b.zip

plugin-b-folder
---- plugin-b-main-file.php
---- plugin-b-readme.txt

I hope this post will enlighten WordPress users who wants to maximize their blog’s potential 🙂

There are a number of fornts for typefaces available which are use @font-face.Typically,you have a typeface
TrueType or Opentype.

@font-face Support Across Browsers

There is suprisingly good support for @font-face accross even older browsers.

EOT:Internet Explorer

The EOT(Enbedded Open Type) format typefaces are supported in all versions of Internet Explorer.

TTF:Safari,Opera,Chrome and Firefox

Safari version 3.2 onwards,Opera version 10 onwards, Firefox version 3.5 onwards and allversions of Chrome support the TTF(TrueType Format) for typefaces in @font-face

OTF: Safari,Opera,Chrome and Firefox

Similarly to the TrueType Forrmat,OTF(OpenType Format) is supported by Safari version 3.2 onwards,Opera version 10 onwards, Firefox version 3.5 onwards and allversions of Chrome
support the TTF(TrueType Format) for typefaces in @font-face

SVG:iPhone and Chrome

The SVG(Scalable Vector Graphics format) is supported by the iPhone and Chrome browsers.SVG font files are specially formatted .svg files that contain vector graphics for each glyph and character of the typeface
is represents, allowing for easy scalability.

WOFF:Firefox

The WOFF(Web Open Font Format) is currently supported by Firefox,but is in the process of becoming a
standard for font formats across all major browsers,including those bt Opera,Microsoft and Mozila.

Converting Typefaces On Online

There are a number of online @font-face conversion tools that generate the necessary CSS and typeface files for you,including Font Squirrel’s FontFace Generator(http://www.fontsquirrel.com/fontface/generator).

Quick and Easy CSS @font-face Code

Posted: May 15, 2011 in CSS, Font
Tags: ,

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules , which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following:

  • Safari 3.1+
  • Opera 10+
  • Firefox 3.5+
  • Chrome 4.0+
  • Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. Of course, there are always weird exceptions contingent in particular scenarios, but overall it’s a solid chunk of code put together from much research, experimentation, and testing. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it..

Complete CSS @font-face code for embedding custom fonts

After uploading your set of custom font files to a “fonts” directory, add the following CSS code to your stylesheet, which itself should be located in the same directory as your fonts folder:

@font-face { /* declare fonts */
 font-family: "MuseoLight";
 src: url("fonts/Museo300-Regular.eot");
 src: local("Museo 300"), local("Museo-300"),
 url("fonts/Museo300-Regular.woff") format("woff"),
 url("fonts/Museo300-Regular.otf") format("opentype"),
 url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
 }
 /* display fonts */
 h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
 h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
 h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

That’s the magic ticket. In the first ruleset, we are declaring which fonts to use for each of the four different formats. After this, the next three rulesets are used to actually display the fonts according to our desired property values. You can apply just about any CSS styles you wish, so long as the font-family (or simply “font” if you are using shorthand) contains the name of your custom font.

Notice that we declare the font-family as “MuseoLight” in the first declaration block of the first ruleset. Then we also specify MuseoLight as the name of our first font for each of our heading selectors (h1, h2, and h3). After specifying our custom font, we then declare a couple of common system fonts – Verdana and sans-serif – to serve as fallbacks. In other words, this font-embedding technique degrades gracefully when the custom font is not displayed.

For our custom font, we are using the beautiful Museo font by Jos Buivenga. You can embed just about any font you like , so long as you include files for each of the following four formats:

  • .eot – e.g., Museo300-Regular.eot
  • .otf – e.g., Museo300-Regular.otf
  • .svg – e.g., Museo300-Regular.svg
  • .woff – e.g., Museo300-Regular.woff

There are many ways to obtain a good working set of fonts, but my favorite is Font Squirrel. They just make it so incredibly easy to download all of your favorite prepackaged @font-face kits. Just download, unzip, upload, and done!
Important notes
If for some reason your fonts aren’t displaying, here’s a few things to keep in mind:

  • Don’t nest different “@” selectors!
  • Number one reason for failure is incorrect path names
  • Refreshing, force-refreshing, and/or emptying your browser cache may help
  • You may also want to append a query-string parameter to your CSS URL to force refresh the user’s browser

Also important to keep in mind is that font embedding is only possible because of the many talented people who freely share their ideas, knowledge, and discoveries with the open-source community. Thanks to them, we can all look forward a better font-embedding experience in the future.
Closing thoughts
Enhancing your design with some choice typography is a great way to beautify and personalize your website. Sure the CSS code looks rather grotesque, but it’s an effective solution for cross-browser font embedding. Just upload your four font files and slap in the code. It’s pretty simple, but feel free to ask any specific questions in the comments. I’m no font-embedding guru, but I’ve been designing with embedded fonts for quite awhile. As always, if you know of a way to improve on this code, speak up and share your wisdom!

We can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height of the browser window). We set a fixed and centered background on it, then adjust it’s size using background-size set to the cover keyword.

html {          
background: url(images/bg.jpg) no-repeat center center fixed;         
-webkit-background-size: cover;         
-moz-background-size: cover;         
-o-background-size: cover;         
background-size: cover; }

Works in:

  •  Safari 3+
  •  Chrome Whatever+ IE 9+
  •  Opera 10+ (Opera 9.5 supported background-size but not the keywords)
  •  Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

The demo link is below :

Demo