How to add slide effect in Bootstrap 3 Navbar Dropdown items

Like many of you, I don’t like the abrupt opening/closing effect of the Dropdown items in Bootstrap 3 Navbar. Today, we’ll add a slide effect in those to make them behave in a pleasing manner.Read More »


Basic Windows Console Commands

Terminal or console commands are always important if you want to take your web designing or developing skills to advanced level. Whether you are using a SASS for designing, Git for version control, or Composer for a PHP project in Laravel, you just cannot bypass these console commands if you want to work efficiently. If you are using Windows and are new to terminal commands, this post is for you. The basic console that comes with Windows is the good old Command Prompt (cmd.exe) and in this post, we’ll go through the basic commands for Command Prompt.Read More »

WordPress: How to make tables responsive

Many of the WordPress themes (even some really good ones from Envato Market) do not have the necessary styles to make the tables responsive. I often see clients coming with a purchased theme complaining that the pages are not behaving as they should for smaller screens. And most of the times I find that the problem is caused by the presence of a table that lacks the responsive styles. The following two snippets are the CSS fixes I use to solve this problem. If you just want to add responsive capability for the tables inside your WordPress page editor, then use the Basic one. But if you want to make those tables look more modern and eye-catching, then use the Stylized one.Read More »

CSS3: How to vertically center align HTML elements for variable heights

Let me put it this way, it is just a nightmare for front-end developers who have faced the situation for the first time without knowing a proper way to do it. For fixed height elements, vertically center aligning is really easy with some calculation and adding some padding in the parent element or some margin in the child element. But when the heights of those elements are not fixed (a regular case in responsive front-ends), that margin-padding method does no good rather than complicating the situation even more. You can use JavaScript, but who wants to use unnecessary scripting, especially if you are like me who cannot tolerate unnecessary scripting and is a fan of elegance and performance. display: table-cell; ? No, it will not work as you expect in cases where absolute positioning is involved.

Actually, there is a very easy way to vertically center align elements and once you see how easy it is, you’ll never use anything else for this task. CSS3 transform property will do the job for us. Here is a pen I made for you to demonstrate the vertical center aligning with CSS3 transform.Read More »

WordPress: How to keep the line breaks in meta box text area field

If you have worked with the text area field in meta box for WordPress themes or plugins, you already know that the line breaks in these text areas do not show up in the front-end with a regular output of get_post_meta() function. Those of you who haven’t yet figured out how to keep and display those line breaks in front-end view, this post is for you.

So, what exactly happens in the text area field of a meta box when you make a new line and save? These new lines are saved in the database and you can see that there is nothing wrong in the output at editor view in the back-end. The problem is that when you use get_post_meta() function to output the text data written inside the text area field, the line breaks do not show up in the front-end view although they are still there. Here are two easy ways of displaying those line breaks in front-end (for the purpose of easy understanding, let’s assume you have text area my-meta-field in a meta box and you going to echo it): Read More »

How to use Font Awesome icons in Photoshop or Illustrator

This week, Tafsirul, a designer from my team asked me how to use Font Awesome icons in Photoshop. At first, I was a bit surprised thinking about what might be the issue here that was causing him trouble. But then I noticed that, although it is clearly instructed in the website, if someone goes to Font Awesome Homepage, it gets a bit confusing to find out the instruction page. I felt like sharing the process here so that others can do it easily as well.Read More »

Bootstrap 3: How to create a new grid option for 480-767px

I have been working with responsive frameworks for quite a while and without any doubt, Bootstrap is my favorite responsive framework so far. But there are always a few occasions when you need to extend the capability of Bootstrap yourself to meet your special requirements. For example, creating an extra grid for 480-767px. But why would I need this extra grid? As of Bootstrap 3, the smallest grid, Extra Small (class prefix .col-xs- ) extends from 1 to 767 px in width. That is a very large range compared to other grids: Small (class prefix .col-sm- ) extending from 768-991px, Medium (class prefix .col-md- ) extending from 992-1199px and Large (class prefix .col-lg- ) extending beyond 1200px. Now, consider two scenarios:

1. If you want to create more than one columns for Extra Small, they may look great in screen width close to 767px, but when you go below 480px, they look really clumsy.

2. If you use small (e.g. 500px wide) preview images with 100% width that look good in smaller resolution, then they start looking too big and not to mention, pixelated. Again, if you use max-width and center align to adjust for them, the space on both sides ruins the aesthetic value of the design.

Those being said, I once got into a situation where I needed to define an extra grid for 480-767px to avoid adjusting the widths of elements with unnecessary media queries at every step. So, if any of you want this extra Bootstarp grid as well, here is how to achieve this. Read More »

PrestaShop: How to create a custom page without CMS

Recently, I had a Project where my client wanted a page with a custom form in their existing PrestaShop based eCommerce site. As of my experience in working with WordPress, my first obvious preference was to create a new CMS page and write the HTML tags and the JavaScript part in the page using the HTML editor provided in the page creator tool. This is where the problem showed up. Unlike WordPress, the HTML editor (known as TinyMCE) in PrestaShop does not accept JavaScript and some HTML tags. Doing a bit of research, I found this article which shows how to enhance the capability of this TinyMCE by adding a few lines of code in a TPL file. But when I went to the FTP location mentioned in the article, I found no such TPL file. This left me no choice but to manually create a custom page, a situation of which you are not going to get any useful tutorial or resource online. This is why I felt like sharing the way of performing this task.
Read More »