• Add any field in your search database as a search filter
• Powerful Admin. Customize without any code change
• Simple 3 step installation

An efficient and accurate product search is a key feature in any successful ecommerce website. If a user visiting your website has a budget of $5000 and wants to look for a left hand drive car that is between $4000 – $5000 and made after 1998,  your website search should be able to display only the relevant results. This is achievable using a great extension named Advanced Product Search 1.0 for OpenCart version 1.5.x . That’s the only extension of it’s kind and very useful one if your OpenCart store have products with multiple options.
ex:

Cars (Make, model, price range or above/below a certain price , transmission, year, etc…)
Computers (Manufacturer, price range, laptop/pc, color, used/ new)

This OpenCart product search extension features:

• Add Custom filters to open cart product search without changing code
• Add any field in your product database as a search field with few clicks
• Product search with custom product filters (Manufacturer, Model, price range etc).
• Simple, 3 step installation
• Customize and add new search fields without any code changes.
• Excellent for products with multiple options ( cars, computers, electronics, building material / construction, clothing / fashion, home decor etc..)

Installation Instructions

1. Execute the ProductSearchTables.sql database script in your OpenCart database. 2. Copy the content of upload folder to your web site document root directory
3. Go to Extensions -> Modules in the admin panel and install the “Search” module.


Configuration

1. Go to Extensions -> Modules -> Search -> Edit
2. Add new module and select your display configuration and save.
3. Go to System – > Users -> User Groups in the admin panel 4. Select the user group you belongs to
5. Check Access and Modify permissions for catalog/search
4. Save your settings.
5. Go to Catalog -> search in the admin panel.
6. Click Insert button to insert new search fields.
7. Enter your new field details in the form appear on screen and save.
Please feel free to try out our demo site at demo.blissfulinterfaces.com/ advanced_search
You can access the admin panel at demo.blissfulinterfaces.com/advanced_search/ admin. Please use the user name and password as below.

User : guest password: guest
Do not hesitate to send your questions to support@blissfulinterfaces.com and we are always available to help you.
Thanks
Blissful Interfaces team. blissfulinterfaces.com

Blissful Interfaces - Web design & development studio

This is plugin to make embedded videos from youtube, vimeo, dailymortion, hulu, blip… responsive.

Download link:  http://wordpress.org/extend/plugins/responsive-video-embeds/

This a cool plugin (http://wordpress.org/extend/plugins/responsive-video-embeds/), automatically resize  embedded videos in wordpress to the screen size.

Supported formats

• YouTube
• Vimeo
• DailyMotion
• Blip.tv
• Viddler
• hulu.com
• Revision 3
• Funny or Die
• WordPress.tv
• Scribd

Test link: http://www.kevinleary.net/responsive-video-embeds-plugin-example/ .
(Resize the browser and watch the videos automatically scale to fit the browser resolution)

Blissful Interfaces - Web design & development studio

I have All in one events calendar Version 1.2.4, I love this plugin and it may be the best events calendar plugin for Wordpress.
However, It did not work properly in my site.

The warnings I received when I create a new event and publish it.

On the wordpress admin:

My events page kept on showing a loader.

The following warning was on the Browser on every page of my site:

Fix:

As of PHP 5.3.0 call-time pass-by-reference has been deprecated.
Open the file : Plugins/all-in-one-events-calendar/app/helper/class-ai1ec-events-helper.php in a editor.
Locate line 851

Change the line 851 in class-ai1ec-events-helper.php to:

it will start working again (note the ampersand is gone)

Blissful Interfaces - Web design & development studio

Click here for demo

Rename or Create the .htaccess file

The opencart installation gives you a file named .htaccess.txt Rename it to .htaccess and upload to your site’s root where opencart is hosted.

It can be located in the upload folder.

Sometimes the .htaccess file is hidden by your operating system. You will have to

To see hidden files on a Mac:

http://www.mikesel.info/show-hidden-files-mac-os-x-10-7-lion/

If you cannot locate your .htacccess file, Create one.

• Open a text editor like Note pad or TextEdit
• Copy the following code OR download it as a .txt (compressed to a .zip file) here: htaccess.txt
• name the file .htaccess instead of .txt or .rtf and save it, and then upload to your server.

# 2. In your opencart directory rename htaccess.txt to .htaccess.

# For any support issues please visit: http://www.opencart.com

Options +FollowSymlinks

# Prevent Directoy listing
Options -Indexes

# Prevent Direct Access to files

Order deny,allow
#Deny from all

# SEO URL Settings
RewriteEngine On
# If your opencart installation does not run on the main web folder make sure you folder it does run in ie. / becomes /shop/

RewriteBase /
RewriteRule sitemap.xml /index.php?route=feed/google_sitemap
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^?]*) index.php?_route_=$1 [L,QSA]

### Additional Settings that may need to be enabled for some servers
### Uncomment the commands by removing the # sign in front of it.
### If you get an “Internal Server Error 500″ after enabling any of the following settings, restore the # as this means your host doesn’t allow that.

# 1. If your cart only allows you to add one item at a time, it is possible register_globals is on. This may work to disable it:
# php_flag register_globals off

# 2. If your cart has magic quotes enabled, This may work to disable it:
# php_flag magic_quotes_gpc Off

# 3. Set max upload file size. Most hosts will limit this and not allow it to be overridden but you can try
# php_value upload_max_filesize 999M

# 4. set max post size. uncomment this line if you have a lot of product options or are getting errors where forms are not saving all fields
# php_value post_max_size 999M

# 5. set max time script can take. uncomment this line if you have a lot of product options or are getting errors where forms are not saving all fields
# php_value max_execution_time 200

# 6. set max time for input to be recieved. Uncomment this line if you have a lot of product options or are getting errors where forms are not saving all fields
# php_value max_input_time 200

Enable the ‘Use SEO URLs’ option in your admin settings

• Go to Admin –> System Dtropdown –> Settings and click ‘edit’.
• Go to server tab and select ‘Yes’ for   ‘Use SEO URLs’
  
  

Finally, Add some SEO friendly tags to your products and categories in the admin. (it’s under the ‘data tab)

Visit your store and test your page. Click here for demo

Blissful Interfaces - Web design & development studio

Make responsive slideshows in WordPress

This plugin converts a WordPress built in image gallery  into  responsive slideshow. It uses the FlexSlider jQuery image slider, and requires no configuration from the user.

You can customize the look of the slideshow by coping it’s CSS file (gallery-to-slideshow.css) in to your theme. That way you will not loose your customized looks when updating the plugin in the future.

Responsive Slideshows: Gallery to Slideshow

Download

Make videos in WordPress responsive

Make your videos in Wordpress responsive using the FitVids jQuery plugin for WordPress

Responsive Video content : FitVids for WordPress plugin

Download

Blissful Interfaces - Web design & development studio

I recently came across this nifty google tool to find what are the most popular search terms. It dynamically show information on most searched terms in a period of time. It’s called Google insights for search.
Using that tool, You can get a detailed description on the increase or decrease in popularity of a certain term.

As an example, the amount of people who was looking for “”web design” has decreased over the years.. It’s going down down and down…

Now check the term Responsive web design.. It’s going Up, Up and Up

It shows us that responsive designs are more in demand and desktop only web sites are no longer appealing.
Finding the popular search tearms are  very helpful when doing SEO for a page or a web site. It also give you a clue on what you should be doing, if you need to do well in the present and the future.

Blissful Interfaces - Web design & development studio

Web Fonts Doesn’t have to be boring.

Use the following web sites to find / generate the fonts you want in your web site. No compromising.

1.Google Font:

Google font have hundreds of free web safe fonts that are beautiful. Thin web fonts, Ultra bold web fonts, narrow fonts.. it’s there!
You simply have to select the thickness, width etc you want in this google online font app and google font automatically filter the results to match. It’s a must to have tools if you are serious about typography in your web site.
Go to Google font
 

2.Generate a @FontFace Kit using your favorite fonts in Font squirrel

Terminal Dosis, 7 Styles by Pablo Impallari

Font squirrel is a free service to make @Fontface kits that you can embed into your CSS file. That way you can use any font you prefer on your web site!

 My Favorite Free web fonts from Google font

Josefin Sans, 10 Styles by Santiago Orozco

How to use:
Paste this code on your website:

And paste this CSS on your stylesheet:

The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles like above.
 
La Belle Aurore, Kimberly Geswein

Coda, by Vernon Adams

Blissful Interfaces - Web design & development studio

Method 1:

The CSS

Add the following code to your CSS file. That will make the images scalable according to screen size.

Removing automatic height and width in WordPress <img> tags

Now drag the window to see the image scaling in action. You’ll notice that the images in your WordPress blog scale weirdly. They horizontal scaling fine but vertical scaling in WordPress images are all wrong.
To make the images resizable proportionately in WordPress, We have to remove the automatic width and height values WordPress add for < img > tags.

As an example, We have to change this:

To This:

For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. That’s it!
But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.

Add the following function to your functions.php file.

Then when you call for those post thumbnail images in you template.php page, replace,

With This:

That’s it. Drag and resize the browser to see your responsive WordPress images in action! Here’s a demo.

Method 2:

The above will not work for some themes.
If you are one of the few that  it did not work, you can still get your image issue solved using below function.

Add the following function to your functions.php file.

This removes inline width and height attributes from images retrieved with 

,
and prevents those attributes from being added to new images added to the editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
return $html; }

Blissful Interfaces - Web design & development studio

Blissful Interfaces - Web design & development studio

The Result:

1. Open photoshop and Create a new file. 8px wide and 1 px in height.

2. zoom it to get a closer look, and using the retangle marquee tool select 6 pixels, leaving 1 px on each side.

3. fill the selection with the color you want the ‘stich’ or ‘dash’ to be.

4. Click Edit –> Define Patteren

5. Now, on the document you want the ‘stitch to be, create a selection using ‘single row marquee tool’.

6. Click Edit –> Fill and, in the fill dialog box, select pattern

7.Select your custom pattern, and wola! You’ll have a stitched line /  dashed line.

Blissful Interfaces - Web design & development studio