Archive for the ‘Web Designing’ Category

Notepad++ (Notepad Plus Plus) is one of the most popular text/code editor for Windows users. It’s really fast and reliable, it has many features built-in but lacks others you might expected it to have. Luckily, there is a vivid plugin development community that has created plugins to help us make Notepad++ even more powerful!


Nearly all of the plugins mentioned below are available through the Plugin Manager that comes with Notepad++. To install the plugins simple open Notepad++, go to Plugins > Plugin Manager, check as many plugins as you like and click “Install”. Instructions on how to manually install plugins and a full list of available plugins can be found on the official wiki.


A full-featured FTP Client within Notepad++ with the ability to save files directly to your server. You can set up multiple profiles for different FTP servers and either open/save files immediately to the server or download a copy and load it in Notepad++. It also has SFTP/FTP(E)S support.

HTML tag

This plug-in provides two core functions to Notepad++:

  • HTML and XML tag matching, like the built-in brace matching. For example you may hit Shift+Ctrl+T on an HTML tag and have the whole block until its closing tag selected.
  • HTML entity encoding/decoding

Compare plugin

A very useful plugin to show the difference between two files side by side.


AutoSave allows to automatically save the currently open files based on a timer schedule (default is 1 min) and/or upon the application losing focus.

JSON Viewer

A simple plugin to view JSON string in a dockable treeview control. Just select the JSON string and open the JSON Viewer plugin.


It’s really simple and just run Douglas Crockford’s JSMin algorithm on current Javascript document. Also JSMin can puts minimized js code in a new document. It can also format already minified Javascript code.


A Notepad++ plugin that allows users to run JSLint (The Javascript Code Quality Tool) against their open Javascript files.

Zen Coding – Python

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions -similar to CSS selectors- into HTML code.

For example:


…can be expanded into:

<div id="page">
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>

Some help on the available selectors can be found here.


(Manual install only. It can’t be installed directly by the Plugin Manager)

Quicktext is a Notepad++ plugin for text substitution with multi field inputs. It allows you to create custom quicktext tags and easily replace them with the corresponding code snippets. It’s similar to Tab Triggers in TextMate, Resharper/CodeRush in Visual Studio. Watch a short video that explains how to use Quicktext.

Light Explorer

A really light explorer plugin that brings up a simple file-manager to the side of the Notepad++ window when pressing Alt+A. There is also a fork of the Light Explorer plugin which allows you to create files and folders.

Hex Editor

Turns Notepad++ into an excellent Hex Editor.



This guide came around as the result of a post I previously wrote for YOUmoz, which in itself came around as a result of a night of drinking and being sent an interesting Google SERP. That post focused on the URL parameters you can feed into Google to generate SERPs.This time, however, I’m looking at Google Maps.

On its own, this created an interesting problem, since Google doesn’t actually update the URLs when you go to new pages. As a result, this research was conducted by individually tweaking every option I could find on the Google Maps interface. So appreciate it!


A big thank you to everyone who helped compile this, and to Teifion, who smells, and Huw, who doesn’t.

Google Maps XML

To understand what we’re going to be seeing, it’s helpful to understand what’s going on under the hood, so I’ve copied an example of the XML Google uses to geocode their maps. You can see this below.








<Placemark id=”p1″>

<address>London, Greater London, UK</address>

<AddressDetails Accuracy=”4″>






<SubAdministrativeAreaName>Greater London</SubAdministrativeAreaName>














As you can see, I’ve done a search for London. It’s presented the response code from the server (200 – found and valid), the address, how likely it is that this is the place I’ve queried (AddressDetails Accuracy), the country name code, and most importantly, the longitude and latitude values.

Just as a quick aside, if you want to view this yourself, you can do so with one of the URL strings below, but you’ll need to sign up for a Google Maps API key. Now, on with the guide…

The Google Map URL. If you didn’t know that bit, you’re shouldn’t be reading this. Moron.


This sets what kind of display the user is presented with. Can be set to q (the standard layout), d (for directions) or l (for local). Defaults to q.


The query string. Words are separated by + signs. You can enter an address, a town, city or village, postcodes, variables of latitude and longitude (in either decimal form or as degrees, minutes and seconds) and landmarks.

Everything from here on in is preceded by an & sign, as it’s tagged on to the end. Again (if you have no girlfriend), things get interesting…


Used to specify the location instead of putting it into q. Also has the added effect of allowing you to increase the AddressDetails Accuracy value by being more precise. Mostly only useful if q is a business or suchlike.


Zoom level. Can be set 19 normally, but in certain cases can go up to 23. More information on the super-high zoom level images can be found here.


Sets the span width and height that the geocoder will compute. Basically, it limits the number of degrees long/lat that will be shown.


Sets the boundaries for the search span. Used for local searches, near as I can tell.


Specifies the type of search (left blank by default, which searches everything). Can be set to:

  • all – all results
  • loc – locations based. Requires q to be filled.
  • yp – the business search. Also requires q to be set, and works better with loc as well.
  • kmlkmz – searches the community maps. Requires a location set either in q, loc or near.
  • websearch – searches webpages that Google has given a geographical position.
  • realestate – gives real estate based results. Obviously.


Latitude and longitude of the map centre point. Must be in that order. Requires decimal format. Interestingly, you can use this without q, in which case it doesn’t show a marker.


Similar to ll, only this sets the lat/long of the centre point for a business search. Requires the same input criteria as ll.


Sets the kind of map shown. Can be set to:

  • m – normal  map
  • k – satellite
  • h – hybrid
  • p – terrain

Don’t ask me why those letters were used, I don’t know why either.


Turns overlays on and off. Can be set to t for traffic or c for street view, or tc for both at the same time.


Controls the view type. Set to text for text, or map for map.


Sets the starting point for directions searches. You can also add text into this in brackets to bold it in the directions sidebar.


Sets the end point for directions searches, and again will bold any text added in brackets.You can also add “+to:” which will set via points. These can be added multiple times.


Allows you to add additional destination addresses. Just as a quick aside, you can use saddr=, daddr= and mrad= instead of “+to:” if you want.


This controls the route that will be planned. Can be set to h for no motorways, r for public transport only or w for walking directions.


Allows you to insert via points in directions. Must be in CSV format. For example, via=1,5 addresses 1 and 5 will be via points without entries in the sidebar. The start point (which is set as 0), and 2, 3 and 4 will all show full addresses.


Changes the units used to measure distance (will default to the standard unit in country of origin). Change to ptk for metric or ptm for imperial.


The latitude and longitude values for Street View.


Alters the Street View window. Controls (in order) window size, bearing, tilt, zoom and pitch.


Skips the first match for search


Controls how many matches are displayed. Will accept values up to 10.


Set to 1 to open the overview map, or anything else to close it.


Sets the input character encoding, e.g., ie=UTF8.


Sets the output character encoding, e.g., ie=UTF8.


Sets the output format. Can be set to:

  • html – standard
  • js – gives you object literals and function calls
  • kml – an XML file like the one from the start
  • nl – XML formatted NetworkLink wrapper, which links to a URL for information to be used with Google Earth and Google Maps
  • embed – for embedding maps into other sites (also note that this requires the s= param which is obfuscated)
  • dragdir – outputs a JSON object containing the reverse geocode and an encoded polyline for a given route


Controls the form style. Can be set to d for the directions form, l for the local version, or q for the normal one.


Not sure. Inputs as 3 figures in CVS format, but only uses the last one. Seems to have something to do with business locations. Must be used with valid data for other operators. Also, must have q=. Outputs a teeny map.


Same as latlng, but allows you to specify map size.


Geocoding service for embedded maps.


Does funky things with the info window. Can be set to:

  • A-J – opens the info window over a business marker
  • near – puts it over the green arrow (when shown)
  • addr – places it over a set address (the default value)
  • start, end and pausex – for use in driving directions, where x is the number of the point in question


Sets the info window to expanded view when set to 1.


Puts the infowindow into various edit modes. Can be set to:

  • sscorrectthiscard – standard edit mode
  • sscorrectthiscard:ssmovemarkercard – for marker position edits
  • sscorrectthiscard:ssedithistorycard – allows you to view a marker’s history


Sets print mode.


Does stuff with My Maps. Set to 0 show defined My Maps, b to turn the My Maps sidebar on, 1 to show the My Maps tab on its own, or 2 to go to the new My Map creator form.


Specifies My Maps identifiers. Use it with ms and msa=0 to show particular My Maps.


Activates Copyright Service mode. Returns information about the copyright ownership in Javascript format. Only works when the spn= and z= are set. Can also include t for map type and key for setting an API key.


Controls the language. Can be set to:

  • eu = Basque
  • ca = Catalan
  • hr = Croatian
  • cs = Czech
  • da  = Danish
  • nl  = Dutch
  • en  = English
  • fi = Finnish
  • fr  = French
  • de  = German
  • gl  = Galacian
  • el = Greek
  • hi  = Hindi
  • id  = Indonesian
  • it  = Italian
  • ja = Japanese
  • no  = Norwegian
  • nn  = Nyorsk
  • pt  = Portuguese
  • rm = Raeto-Romance
  • ru  = Russian
  • sr  = Serbian
  • sk  = Slovak
  • sl = Slovenian
  • es  = Spanish
  • sv  = Swedish
  • th  = Thai
  • tr = Turkish
  • uk  = Ukrainian
  • vi  = Vietnamese

I hope you’ve found this at least vaguely useful. As always, if something’s missing, leave a comment.

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.


The color of this box will change on different os/browsers:

  • Internet Explorer – yellow
  • Internet Explorer 7 – orange
  • Gecko Engine on Windows (Firefox, Mozilla, Camino) – red
  • Gecko Engine on Linux (Firefox, Mozilla, Camino) – pink
  • Gecko Engine on Other OS (Firefox, Mozilla, Camino) – gray
  • Opera – green
  • Konqueror – blue
  • Safari – black
  • Chrome – cyan

If the box is white, and you are using one of browsers above, something is wrong :-/
Help us in this case!

Source of this example:

<style type="text/css">
.ie .example {
  background-color: yellow
.ie7 .example {
  background-color: orange
.gecko .example {
  background-color: gray
.win.gecko .example {
  background-color: red
.linux.gecko .example {
  background-color: pink
.opera .example {
  background-color: green
.konqueror .example {
  background-color: blue
.webkit .example {
  background-color: black
.example {
  width: 100px;
  height: 100px;
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

Screenshots on Browsercam

Chris Preece contributed with some images


I need to update this script every time a browser is released with new UserAgent string.

This is a little effort, but certainly with your donation I will do it happier 🙂

Click here to lend your support to: css_browser_selector and make a donation at !


git clone git://


1. Copy and paste the line below, inside <head> and </head> tag

<script src=”css_browser_selector.js” type=”text/javascript”></script>

2. Set CSS attributes with the code of each browser/os you want to hack


  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win – Microsoft Windows (all versions)
  • vista – Microsoft Windows Vista new
  • linux – Linux (x11 and linux)
  • mac – Mac OS
  • freebsd – FreeBSD
  • ipod – iPod Touch
  • iphone – iPhone
  • ipad – iPad new
  • webtv – WebTV
  • j2me – J2ME Devices (ex: Opera mini) changed from mobile to j2me
  • blackberry – BlackBerry new
  • android – Google Android new
  • mobile – All mobile devices new

Available Browser Codes [browser]:

  • ie – Internet Explorer (All versions)
  • ie8 – Internet Explorer 8.x
  • ie7 – Internet Explorer 7.x
  • ie6 – Internet Explorer 6.x
  • ie5 – Internet Explorer 5.x
  • gecko – Mozilla, Firefox (all versions), Camino
  • ff2 – Firefox 2
  • ff3 – Firefox 3
  • ff3_5 – Firefox 3.5
  • ff3_6 – Firefox 3.6 new
  • opera – Opera (All versions)
  • opera8 – Opera 8.x
  • opera9 – Opera 9.x
  • opera10 – Opera 10.x
  • konqueror – Konqueror
  • webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 – Safari 3.x
  • chrome – Google Chrome
  • iron – SRWare Iron

Extra Codes:

  • js – Will be available when js is enable, so you can show/hide some stuffs


Original idea by 37signals.

Sunrise – Premium Joomla Template – $40


Motion Corporate Template for Joomla! – $40

Motion Corporate

Asongkem – Premium Joomla Template – $35


Genesis – Business and Portfolio Joomla Template – $35


Technik – Modern Corporate Template for Joomla! – $40


L-Ardi Responsive Joomla Template – $40


NORTHER – Professional Business Joomla 1.6 Theme – $35


L-Maximus Joomla Theme – $40


Simple Business – Premium Joomla Template – $35

Simple Business

Intermezzo – $40


Helix – Joomla business template – $35


Anne – Business Joomla Template – $35


Phoenicis – Premium Joomla Template – $35


Scorpii – Corporate and Business Joomla Template – $35


New Business v2 – Business Joomla Template – $30

New Business v2

Levante – Corporate and Business Joomla Template – $35


New Technology – Joomla eCommerce Site Template – $25

New Technology

New Business – $35

New Business

WordPress is most popular among online community. Web Developers are making themes rapidly. Thus, not all wordpress themes are developed equally. Having a quality design and being bug-free, the biggest issue facing web designers is the growing number of mobile and tablet users. That’s where responsive WordPress themes come in. A high quality wordpress responsive theme will work on any browser (any screen size) all while keeping the overall style and functionality.

Since a numerous gadgets are coming up these days with rapid innovation. We bring a business responsive high quality and premium wordpress themes that are designed according to view of clients requirements. This showcase consists of 25 high quality business responsive wordpress themes that can be bought from ThemeForest and use them instantly. It can save your extra money for high web developers and designers. Below all themes are customized according the tasted of new trends of Browsers and smart phones.

Modernize – Flexibility of WordPress


Alyeska Responsive WordPress Theme


Classy Business & Portfolio WordPress themes


ELOGIX – Responsive Business WordPress Theme



Swagger Responsive WordPress Theme


Office Responsive Business Theme


Flare – Responsive Business & Portfolio WP Theme


Barely Corporate Responsive WordPress Theme

8-Barely-wp-business-responsive 9-Akita-wp-business-responsive

Clearly Modern WordPress by Cudazi


ProMotion Responsive WordPress Theme


NewOffer 20-in-1 Business WP Theme


Rising – Fully Responsive WordPress Theme


Qreator – Responsive Premium WordPress Theme


WP Pro Real Estate 3 Responsive WordPress Theme


Modulo – Responsive premium theme


Durable 5 in 1 – Business & Portfolio WordPress


Kraken Business & Portfolio WordPress Theme


Oakland – Premium Responsive WordPress Theme


Styx Responsive Design for Business Portfolio


WP Avatar WordPress Theme


Brave Responsive Business WordPress Theme


Lulu – Responsive WordPress Theme


Synapse – Corporate WordPress Theme


Goode – Responsive Business WordPress Theme


JavaScript sliders, especially jQuery are used a lot in web designing now a days. Various ways are present in which sliders can be utilized and displayed. So today we have a list of 20 websites that use JavaScript sliders amazingly. If you want ideas and inspiration for your own website, then you should definitely check these sites out.

These Are Things

JavaScript Sliders Web Design


JavaScript Sliders Web Design

Mathieu Clauss

JavaScript Sliders Web Design

The Daily

JavaScript Sliders Web Design

Puma Running

JavaScript Sliders Web Design

Gimme Money, I can do it!

JavaScript Sliders Web Design


JavaScript Sliders Web Design

Orange Sprocket

JavaScript Sliders Web Design

Brave Nu Digital

JavaScript Sliders Web Design


JavaScript Sliders Web Design



JavaScript Sliders Web Design


Jeremy Church

JavaScript Sliders Web Design



Print Mor

JavaScript Sliders Web Design


David A. Molanphy

JavaScript Sliders Web Design


Tuscarora Tackle

JavaScript Sliders Web Design


Helms Workshop

JavaScript Sliders Web Design


Hugo & Marie




JavaScript Sliders Web Design



JavaScript Sliders Web Design


Work at Play

JavaScript Sliders Web Design

Pricing page of any website is a very crucial component because it features the prices of goods and services that are being offered through that particular website. Visually appealing design of a pricing page certainly increases the chances that prospect customers will buy your goods or services. This is the reason why every web designer pays close attention when it comes to designing a pricing page.

An effective page design can certainly influence the buying decision of a customer. Therefore, we thought to compile a collection of some inspirational and creatively designed pricing pages for you. Let us take a close look at this collection and feel free to share your opinion with us. Enjoy!















































Big Cartel

Big Cartel