Ivor Padilla http://www.ivorpadilla.net Online Portfolio + Blog Mon, 08 Nov 2010 18:39:30 +0000 en hourly 1 Detect All the Browsers Using your WordPress Functions http://www.ivorpadilla.net/detect-browsers/ http://www.ivorpadilla.net/detect-browsers/#comments Wed, 21 Jul 2010 15:43:12 +0000 Ivor Padilla http://www.ivorpadilla.net/?p=356 Cross Browsing can be tricky sometimes, as a ThemeForest author we try to give our buyers the best possible experience in all the browsers. I’ve been using the CSS Browser Selector in my WordPress themes but the user need to have Javascript enabled whether this is a problem or not I’ve been trying to find a solution. In this quick tip I’ll show you a simple snippet that you need to add to you WordPress functions.php.

1.- Add this to your Functions file

You need to create the file functions.php If the file isn’t created. Paste the following code into the file:

/*----------------------------------------------*/
/* Browser detection body_class() output  */
/*----------------------------------------------*/
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

2.- Open your Header File

Add this to the body class:

 <body <?php body_class(); ?> >

3.- Crossbrowsing

Now if you have a problem with any browser you just need to prepend your selector with the browser prefix, example:

 .opera #yourSelector p { color:red; }
]]> http://www.ivorpadilla.net/detect-browsers/feed/ 8 Quick Photoshop Tip: How to Drag & Drop Group Layers into another PSD document http://www.ivorpadilla.net/drag-group-layers/ http://www.ivorpadilla.net/drag-group-layers/#comments Fri, 09 Jul 2010 21:07:23 +0000 Ivor Padilla http://www.ivorpadilla.net/?p=347 This is a very simple tip, there’s no need of any introduction :) just watch the *very short* screencast.

]]> http://www.ivorpadilla.net/drag-group-layers/feed/ 1 Customizing the new WordPress 3.0 Custom Menus Adding Different Icons to Each Link http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/ http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/#comments Tue, 25 May 2010 01:35:45 +0000 Ivor Padilla http://www.ivorpadilla.net/?p=296 I came across with an issue recently, I was trying to add different classes to each menu link without any success. The new WordPress Custom Menu feature have a lot of different options to play with, let’s see what we’ll do.

1. What we’re going to do?

Is very simple, I want a menu with each link containing different icons:

2. WordPress Custom Menus

WordPress 3.0 Custom Menus are a simple but effective new feature of the latest beta version of WordPress. To know more about this new feature read here.

3. The Problem

I need to assign differents CSS classes to each link to add my icons.

4. The Solution

Let’s use the Title Attribute and add it as classes using jQuery to each menu link.

[Update:]
There’s some hidden features in the WordPress Custom Menu and thanks to John O’Nolan I just notice those features, there’s no need of jQuery here, we just need to click in Screen Options to show the hidden options.

You’ll need to specify the name of each individual class using:

  • Home
  • Advertise
  • Contact
  • Archives
  • About

5. The CSS

This is just some generic styles to show you how I’ve named my links.

#header ul.navigation li.home {background:url("images/home.png") no-repeat 0 1px transparent;display:block;padding-left:23px}
#header ul.navigation li.home:hover {background-position:0 -16px;color:#535353;border-bottom:1px dotted #535353;}

#header ul.navigation li.about {background:url("images/about.png") no-repeat 0 0px transparent;display:block;padding-left:23px}
#header ul.navigation li.about:hover {background-position:0 -16px;color:#535353;border-bottom:1px dotted #535353;}

#header ul.navigation li.advertise {background:url("images/advertise.png") no-repeat 0 0px transparent;display:block;padding-left:23px}
#header ul.navigation li.advertise:hover {background-position:0 -17px;color:#535353;border-bottom:1px dotted #535353;}

#header ul.navigation li.archive {background:url("images/archive.png") no-repeat 1px 2px transparent;display:block;padding-left:23px}
#header ul.navigation li.archive:hover {background-position:1px -14px;color:#535353;border-bottom:1px dotted #535353;}

#header ul.navigation li.contact {background:url("images/contact.png") no-repeat 0 3px transparent;display:block;padding-left:23px}
#header ul.navigation li.contact:hover {background-position:0 -12px;color:#535353;border-bottom:1px dotted #535353;}

6. jQuery in Action

The solution is pretty simple, we just grab the Title Attribute and add it to the links as a class using the addClass jQuery function.

There’s no need of jQuery to add individual classes, but I’ll leave this code here for reference.

<script type="text/javascript">
    $(document).ready(function(){
         $('ul.navigation li').addClass(function() { return $(this).attr('title'); });
    });
</script>

7. That’s it

Thanks to John O’Nolan for the heads up.

]]> http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/feed/ 67 Using SimplePie to Retrieve your Latests Dribbble Shots http://www.ivorpadilla.net/simplepie-dribbble-latest-shots/ http://www.ivorpadilla.net/simplepie-dribbble-latest-shots/#comments Tue, 11 May 2010 16:17:00 +0000 Ivor Padilla http://www.ivorpadilla.net/?p=235 Dribbble is show and tell for designers, developers and other creatives. Share sneak peeks of your work as “shots” — small screenshots of the designs and applications you’re working on and SimplePie is a very fast and easy-to-use class, written in PHP, that puts the ‘simple’ back into ‘really simple syndication’.

In this tutorial I’m going to teach you how to fetch your latests Dribbble shots as images and display it as HTML.

1.- The Markup

First of all lets create our markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/default.css" />
		<title>Untitled Document</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>

<body>
	<div id="container">

	</div><!--end container-->
</body>
</html>



2.- Working with SimplePie

  1. Go to the SimplePie site and download the latest version of the script.
  2. Grab the file simplepie.inc and paste the file in the /includes folder
  3. Before your doctype in your markup paste this PHP code
    4. <?php

require 'includes/simplepie.inc';
$feed = new SimplePie();
$feed->set_feed_url('http://dribbble.com/players/ivorpad/shots.rss');
$feed->set_item_class();
$feed->enable_cache(true);
$feed->set_cache_duration(3600);
$feed->set_cache_location('cache');
$feed->init();
$feed->handle_content_type();

?>
  4. In the line 5 you have to put the absolute URL of your Dribbble feed URL – is something like this http://dribbble.com/players/ivorpad/shots.rss
Note: Make sure that you have a /cache directory created.

4.- PHP

  1. Getting our image 
    <?php
function returnImage ($text) {
    $text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
    //echo $text;
    $pattern = "/<img[^>]+\>/i";
    preg_match($pattern, $text, $matches);
    $text = $matches[0];
    return $text;
}
  2. Filter out image url only

    function scrapeImage($text) {

    $pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/'; 

preg_match($pattern, $text, $link);

$link = $link[1];
$link = urlencode($link);
return $link;

}

?>
  3. Finally paste this code to get your latest 3 shots.

    <?php
//Display my Dribbble shots
$count = 0;
foreach ($feed->get_items() as $item) {
$feedDescription = $item->get_content();
$image = returnImage($feedDescription);
$image = scrapeImage($image);
$image = urldecode($image);
echo '<img class="yourClass" src="' .$image. '" alt="Dribbble Shot" />';
$count++;
if ($count == 3) break;
}
?>

    In the line 11 $count == 3 we’re telling that we want to display only 3 images, change it to display any ammount of images.

      4. 5.- Our final code

      <?php
require 'includes/simplepie.inc';
$feed = new SimplePie();
$feed->set_feed_url('http://dribbble.com/players/ivorpad/shots.rss');
$feed->set_item_class();
$feed->enable_cache(true);
$feed->set_cache_duration(3600);
$feed->set_cache_location('cache');
$feed->init();
$feed->handle_content_type();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="css/default.css" />
		<title>Dribbble and SimplePie by Ivor Padilla</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
		<body>
		<div id="container">
		<!-- begin scripts -->
		<?php
		////////////////////////////////////////////////////////////////
		//Get an image
		function returnImage ($text) {
			$text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
			//echo $text;
			$pattern = "/<img[^>]+\>/i";
			preg_match($pattern, $text, $matches);
			$text = $matches[0];
			return $text;
		}
		////////////////////////////////////////////////////////////////
		//Filter out image url only

		function scrapeImage($text) {

			$pattern = '/src=[\'"]?([^\'" >]+)[\'" >]/'; 

		preg_match($pattern, $text, $link);

			$link = $link[1];
			$link = urlencode($link);
			return $link;
		}
		?>
			<?php
				//Display my Dribbble shots
				$count = 0;
					foreach ($feed->get_items() as $item) {
						$feedDescription = $item->get_content();
						$image = returnImage($feedDescription);
						$image = scrapeImage($image);
						$image = urldecode($image);
						echo '<img class="yourClass" src="' .$image. '" alt="Dribbble Shot" />';
						$count++;
					if ($count == 3) break;
				}
			?>
		</div><!--end container-->
		</body>
</html>

      Check out the demo

      ]]> http://www.ivorpadilla.net/simplepie-dribbble-latest-shots/feed/ 7 Launch + Birthday http://www.ivorpadilla.net/welcome/ http://www.ivorpadilla.net/welcome/#comments Mon, 26 Apr 2010 06:49:52 +0000 Ivor Padilla http://dev.wpcoder.com/dan/wordpress/?p=53 Hi everyone, its my birthday :) and I’m celebrating with the launch of my personal portfolio and blog site. I’m really proud of this website, anyways I’ll be writing tutorials about different topics like CSS, xHTML, jQuery, WordPress, Photoshop and more. This blog will be used to compile the most interesting things that I can encounter in my jorney as a web developer.

      I’ll be covering:

      • Complete step by step CSS Tricks
      • HTML and CSS techniques
      • Personal Thoughts
      • Photoshop How to’s
      • Pictures
      • And more…

      And of course the showcase of my works.

      There’s no much to see yet, this is just the beginning.- ;)

      ]]>       http://www.ivorpadilla.net/welcome/feed/ 7