Happy New Year 2013

May 2013 bring you and your families joy, happiness and wealth.

May it be an even more successful year for you than 2012!

May it be a beautiful year!

Happy New Year 2013 everyone!

jQuery UI Menu revisited

One of the most popular articles on this blog is “How to have a jQuery UI menu displayed horizontally”. I see that many of my visitors are getting here through a search engine looking how to display the jquery-ui menu horizontally.

Since that article was published a few things changed in the jquery-ui library and when I tried to use my old fix for the menu it didn’t work, so in this article I’ll show you how to display the jquery-ui menu horizontally with just a few lines of css.

Here we have the html template:

<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
    <li><a href="#">Ada</a></li>
    <li><a href="#">Adamsville</a></li>
    <li><a href="#">Addyston</a></li>
    <li>
        <a href="#">Delphi</a>
        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a></li>
            <li><a href="#">Saarland</a></li>
            <li><a href="#">Salzburg</a></li>
        </ul>
    </li>
    <li><a href="#">Saarland</a></li>
    <li>
        <a href="#">Salzburg</a>
        <ul>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Perch</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

we then need a simple line of javascript to force the menu to display horizontally. This setting is very important because the submenus are positioned automatically by the jquery-ui framework by looking at the “at” property from the position object.

<script type="text/javascript">
	$(function() {
		$( "#menu" ).menu({
			position: {at: "left bottom"}
		});
	});
</script>

Then we only need the following lines of css to properly style the menu. You might not need this in your websites but if you do then you’ll have at least a starting point :)

<style type="text/css">
	.ui-menu { overflow: hidden;}
	.ui-menu .ui-menu { overflow: visible !important; }
	.ui-menu > li { float: left; display: block; width: auto !important; }
	.ui-menu > li { margin: 5px 5px !important; padding: 0 0 !important; }
	.ui-menu > li > a { float: left; display: block; clear: both; overflow: hidden;}
	.ui-menu .ui-menu-icon { margin-top: 0.3em !important;}
	.ui-menu .ui-menu .ui-menu li { float: left; display: block;}
</style>

Finally, here is the complete source code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Menu - Default functionality</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#menu" ).menu({
                position: {at: "left bottom"}
            });
        });
    </script>
    <style type="text/css">
        .ui-menu { overflow: hidden;}
        .ui-menu .ui-menu { overflow: visible !important; }
        .ui-menu > li { float: left; display: block; width: auto !important; }
        .ui-menu > li { margin: 5px 5px !important; padding: 0 0 !important; }
        .ui-menu > li > a { float: left; display: block; clear: both; overflow: hidden;}
        .ui-menu .ui-menu-icon { margin-top: 0.3em !important;}
        .ui-menu .ui-menu .ui-menu li { float: left; display: block;}
    </style>
</head>
<body>
 
<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
    <li><a href="#">Ada</a></li>
    <li><a href="#">Adamsville</a></li>
    <li><a href="#">Addyston</a></li>
    <li>
        <a href="#">Delphi</a>
        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a></li>
            <li><a href="#">Saarland</a></li>
            <li><a href="#">Salzburg</a></li>
        </ul>
    </li>
    <li><a href="#">Saarland</a></li>
    <li>
        <a href="#">Salzburg</a>
        <ul>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Perch</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
 
</body>
</html>

This is the final result:
jquery-ui-menu-revisited

Hope this helps! :)

Portable phpMyAdmin WordPress plugin

It’s been a long time since I haven’t checked WordPress plugins for security issues, but today someone asked me to check one out.

The plugin I’m talking about here is “Portable PhpMyAdmin” (http://wordpress.org/extend/plugins/portable-phpmyadmin/).

In case you have this installed, please go now and delete this plugin. Seriously, now. Then come back here and continue reading to find out why.

This plugin will act like a backdoor for anyone that knows about its issues, it has no validation for any of its internal pages, and any registered user of your blog/website will have full access to your database with super admin privileges. That means they can do whatever they want to the blog’s database. Yes, you read right, anything they want.

I sincerely wonder how could WordPress allowed this plugin to be hosted on their svn repository in the first place…

ok, so if I were a registered user of your blog (yes, regardless of the role assigned to me: no role at all, subscriber, author, etc…) I could just login to your blog, and then navigate to:
http://example.com/wp-content/plugins/portable-phpmyadmin/wp-pma-mod/ with or without index.php at the end of the url and the admin panel of this plugin would be displayed to me. I would have at that point full control over the blog’s databases. Yes, all of them!!!

If this is not a wake up call for you, then you should not be surprised if your blog is hacked or defaced.

The image bellow displays the results when visiting the following url: http://example.com/wp-content/plugins/portable-phpmyadmin/wp-pma-mod/
wpa

The following image shows how easy I can create a new database: http://example.com/wp-content/plugins/portable-phpmyadmin/wp-pma-mod/db_create.php?db=mydb
create-db

The following image shows you the whole list of databases I have on this machine:
list-dbs

Another important thing I want to point out is that deactivating the plugin will not protect you. Your website will still be vulnerable, just like when the plugin was activated.

One other thing to note here is that these hacks can only be performed by registered users (regardless their role assigned on your blog).
Unauthenticated requests will be blocked by WordPress.

As a final note, I cannot stress enough to make you aware of the risk you put your websites to if you have this plugin installed, so please DELETE IT from your server and wait for an official release that will fix this problem.

If you know others that have this plugin installed, do let them know about this and instruct them do delete the plugin as well.

I can only hope this post will be lucky enough to be read by as many blog owners as possible.

Stay safe!

Long time no see

It’s been way too long since the last post here on coderevision :( so I’m going to change that.

So many things happened since then and life has its own twisted way of making things worse exactly when you think all’s going to be alright…but we have to go on with our lives (someone would say)

Anyways, if anyone’s still watching over this blog, I just want to let you all know that I’m back and I’ll try to be a lot more active than I was until now :)

Have a great day all!

Photoshop 101: lets go metal and learn to create a robotic horse. Part one

This is what we will be creating. A fully robotic horse, made from all sorts of metal materials found online and by taking your own photos. :)


Ashkarok, A fully robotic horse.

This is Ashkarok. it took me about 3 days to get the design right.

A good few years back I found a tutorial from the Photoshop Lady that showed me how to create the face of a robotic horse. You can still see this tutorial here: Robotic Horse.

So firstly, decide on the horse you want to use, and the pose. For Ashkarok, I used a rearing horse. Cut it from its background, and press control, click on the horse layer to create a line of marching ants around the horse, and then create a new layer, and fill it with black (#000000). Hide the layer for now. This will be used as the base, so that in the end, the real horse will not be seen at all.

This tutorial taught me everything I needed to know about manipulating metal and creating something awesome with it. It shows you how to use the transform tool and forms the basis for the tutorial today. Give it a go and let’s create this one. :)

Following the first tutorial should give you the guidelines to create the face, but you need to get a little more creative when you look at the shape, and of course the fact that the horse has its nose in the air this time. Using the liquify tool comes in handy here, like when trying to create the mouth etc. but i also used it to create the “mantle” around the neck of the horse. Just don’t use the effects until the entire horse is created.

So, what are we waiting for :D Let’s get the rest of the horse done now. Starting with materials. For the rest of the horse, you need a few images of pipes, the motorcycle image you used to create the face, and some leg armor, (lol yes leg armor), and then lastly some tube covers. These you will add to the legs as “joints”.

Firstly, after working on the head and following the tutorial, create the face, minus the bridle. I also left out a few areas around the ears, like the large disc on the side and the large pipe over the eyes, and created 3 small pipes instead.

Ashkarok’s head turned out like this:

Also, after merging all the layers to create the mane, I bent it using the transform tool and while holding control, clicking on individual edges manipulating the mane to follow the neck of the horse a bit better.

Ok, let’s get to the body. This is where things get interesting and a tad more complex than the face. When you look at the horse, you can see that quite a bit is visible. The tummy, the legs from the other side, all of this needs to be given a metal coat. Here we use the leg armor, firstly using the transform technique used to manipulate the mane. Use the leg armor to cover the legs in pieces, when you look at ashkarok, you can see I have left the joints open.

When this is done, we use a blur tool, and basically smudge any reflections etc. from the armor, until it still looks like shiny metal, but nothing of its previous environment is left behind. In the image here, you can see the black showing through pieces of the metal. This is the effect I am trying to create, and I feel it’s an awesome backdrop for the metal exterior.

Working on the body, remember how you created the neck? Use the armor once again (not the leg ones though) and this time, transform the metal so that it fits across the horse’s back, but up to the beginning of its tummy. We are going to add piping and other bit for the tummy. Make sure the layers for the back are created one beneath the other, which gives you the same effect as the neck, but slightly bigger metal pieces. It should look like this when you’re done.

Where the side of the horse begins, leading to its tummy, take a piece of pipe, and create two or three duplicates of the pipe. Line them up, one beneath each other and highlight the first pipe layer, hold shift and click on the third pipe layer, all three layers should now be selected, press control and E, to merge the three layers. Holding control, click on the thumbnail image of the pipe to create the marching ants around the pipe, and let’s get tricky. For many who have not used the puppet warp in Photoshop, here’s your chance to try. While the pipe is selected, click on edit, puppet warp, and it loads a mesh around the pipe. our mouse then allows you to create “points” on the warp that will allow you to manipulate the pipe further, to mold it to the side of the horse.  Mold the pipe so that it follows the horse’s chest, and dips inward toward its back legs.

Create a new layer under the pipe layer, and to this add the image you used to create the side of the horses face, and under its eye, (the motorcycle engine piece). But cut it so that the long metallic piece is cut away and you’re left with a square of sorts. This way you will not need to mold or liquify too much to get these pieces to fit onto the horse’s tummy.

You can see in the previous image, how the layers are added one beneath the other, and then merged to create one layer, which is then transformed holding control and moving individual points.

To manipulate the back leg, took a bit of ingenuity.  Because it is bigger and wider as it tapers to the actual leg from the body, I took another piece of leg armor, and transformed it to fit the general shape of the leg. I then added a liquify filter to the leg so that it molded to the leg, but at the same time even when placed under the “back” layer, the leg still looks solid, and maintains its shape. By now, you have already manipulated the tummy to taper inwards at the top of the chest and inwards at the back legs, So, duplicate the back leg top layer already done, and cover the inner side of the second back leg. Carefully delete the excessive metal, until it takes the shape of the inner leg.

Now, you can finish the rest of the legs. Remember to keep them in pieces, and remember the liquify one point of the metal to be overlapped by the next leg layer, leaving the joints open. The joints will be covered with the hidden black layer to make it look like hard plastic beneath the joints.

This is the end of part one. :D Part two is here linked to the bottom of the page where you will learn how to create the shadow, the tail flame and its reflections, and of course its background.

Photoshop 101: lets go metal and learn to create a robotic horse. Part Two.

Part one to this LONG tutorial can be found here: Photoshop 101: Let go metal and create a robotic horse

Ok, we left off creating the legs, so lets have a look at the joints. Here I took tube covers, and simply transformed them to make them small and add them to the horse, i then took circular sections from the car lights used to make the eyes, and put these under the tube covers. Once you have placed the light under the tube layer, create another layer in between, and control click the glass light’s layer to bring up the marching ants. Fill the new selection on a new layer with blue, or the color of your choice, and play around with layer styles to find the effect you’re looking for. The blue on my lights were set to overlay.  Make sure you add these “lights” and covers to all the joints on the horse’s legs, and sit back and marvel at what you did :D Not far to go now.

Creating the tail was IMO the hardest part for me, I have never really been a fan of manipulating fire, so it was a huge challenge. I had a photo of a flame, and when I looked for pics of flames, I look for flames that specifically looked either like a horse’s tail, or a flame that could be manipulated into one.

The tail was broken into three parts. The first part was the entire flame, pasted, transformed and erased with a soft brush (hardness set to 50%) and then turned so that it look like it fitted onto the horse. Then I cut the flame in half. I used the top half of the flame on the top of the tail, and the bottom of the flame, is the piece you can see coming off to the side of the horse.

To create the reflection, you simply merge the layers of the tail, duplicate it and arrange it on the horse, set the layer opacity low, and then add a layer mask which is a gradient from black to white. You will see the black will fade the flame, giving it a reflected look. If you need to make it “fade” a little more, using a soft brush at an opacity of around 20, can help you add more detail to the reflection.

Well done, you have created the horse, so lets look at adding the detail.

Create a layer above all the metal and call it shadow. Go back to the original tutorial and follow what was said about creating the new layer, working in black, and setting the layer style. Create shadows on the horse, following where the light source you are using is coming from. You can also use the dodge and burn tool on individual layers to bring out a few more highlights.

The background was easy to create. I looked at my surroundings, and simply took photos of grass, clouds, and rocks. The images used in his background are all from different images manipulated to create one. the clouds have been given a hue and saturation, vibrance. I added vibrance to the grass, making it that bright green, and then cut out an image of a rock and placed it in the center of the grass for the horse to stand on. To make the rock “look real”, you would then use a soft eraser brush, alternating from a hardness of 100% for precision work, 50% hardness for distance and 0% hardness to erase unwanted areas of rock. When you’re done, you will see that the rock looks as if it belongs there, which was after all the effect we were trying to create :).

 

In the end, your image will look more or less like this:

Happy photoshoppin Y’all

Dreamrage

A simple rss reader widget with pagination

In today’s Code for Fun section I’ll present you a simple rss reader widget with pagination using PHP and the jQuery library.

The script requires:

  • jQuery library
  • DOMDocument class

Because the code behind is pretty long to post it here, I’ll show you only the content of the index.php file that displays the feed’s content.

<?php
/*!
| @ RSS Feed Paginator
|========================================================================
| @ Description : Paginates any feed
| @ Author      : kos
| @ Url         : http://coderevision.com/
| @ License     : Microsoft Public License (Ms-PL)
| @ License Url : http://www.microsoft.com/opensource/licenses.mspx#Ms-PL
|========================================================================
*/
	require 'feed-paginator.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Feed Paginator</title>
    <link rel="stylesheet" type="text/css" media="screen" href="feed-paginator.css" />
	<script src="jquery.js" type="text/javascript"></script>
	<script src="feed-paginator.js" type="text/javascript"></script>
</head>
<body>
 
<div id="rss-widget" class="widget x-rounded">
 
	<div id="rss-widget-title" class="widget-title x-rounded">
		<h3><a href="<?php echo $data['details']['link'];?>"
        	title="<?php echo $data['details']['description'];?>"
            target="_blank"
            ><?php echo $data['details']['title'];?> Blog</a></h3>
    </div>
    <div id="rss-widget-content" class="widget-content x-rounded">
    <div class="rss-inner">
 
    <?php if (empty($data['items'])) : ?>
 
    	<div class="entry">
        	<p>The feed could not be loaded.</p>
        </div>
 
    <?php else : ?>
    	<?php foreach( $data['items'] as $item )
		{
			$title = $item['title'];
			$link  = $item['link'];
			$content = $item['description'];
			$pubDate = $item['pubDate'];
			$category = $item['category'];
			if ( ! empty($category))
			{
				$category = "({$category})";
			}
			$numComments = $item['numComments'];
			$commentsLink = $item['commentsLink'];
			if ( $numComments <> 'N/A')
			{
				$commentsLink = '<span>';
					 $commentsLink .= '<a href="'.$commentsLink.'"';
					 $commentsLink .= ' title="View comments">Comments:</a> ';
					 $commentsLink .= $numComments;
				 $commentsLink .= '</span>';
			}
 
			//@ BUILD OUTPUT
			echo '<div class="entry">';
				echo '<h3><a href="',$link,'" target="_blank">',$title,'</a></h3>';
				echo '<div class="entry-content">';
					echo '<p>',$content,'</p>';
				echo '</div>';
				echo '<div class="entry-meta">';
					echo '<p>';
						echo '<span>',$date,'</span>';
						echo '<span>',$category,'</span>';
						echo '';
					echo '</p>';
				echo '</div>';
			echo '</div>';
		}
		?>
    <?php endif;?>
        </div>
    	<div class="pagination x-rounded">
        	<span id="rss-prev">Prev</span> | <span id="rss-next">Next</span>
        </div>
    </div>
 
</div>
</body>
</html>

Follow this link to download the source code.

Enjoy it!