Brandon Himpfen helps make the Internet better by providing free tutorials, code and themes to website owners, website administrators and digital marketers, and by contributing to the open source community since 2001.

Welcome to Himpfen.com. Brandon Himpfen is an experienced digital professional with over 13 years of experience. He discusses and solves complex challenges faced by website owners, web designers, web developers, website administrators and digital marketers. In addition, Brandon Himpfen provides free resources these individuals could use to create, build, optimize and tweak websites.

Sass Bootstrap Theme

The Sass Bootstrap Theme is an SASS language inspired Twitter Bootstrap theme. It features a primary pink and grey colour scheme with clan typography. It is a great theme for web designers, web developers, fashion websites or blogs, or other design website. Bootstrap's glyphicons are not included. If you wish to use font icons, I would highly recommend Font Awesome. This theme comes in minified or unminified assets, plus the ability to make the components gradients, instead of the default »

How-to Install phpMyAdmin on CentOS 7

In my previous blog post, I showed you how-to install LAMP (Linux, Apache, MariaDB and PHP) on CentOS 7 and in this tutorial I'm going to show you how-to install phpMyAdmin on CentOS 7. If you don't know what phpMyAdmin is; phpMyAdmin is free software written in PHP, intended to handle the administration of MySQL over the Internet. Add Fedora EPEL Repositories Since phpMyAdmin is not included in the CentOS default repositories, we need to get it from the Fedora »

How-to Install Git on CentOS 7

Git is a free and open source distributed version control system, that is designed to handle any project; from small to very large projects with speed, data integrity and efficiency. In this tutorial, I'm going to show you how-to install Git on CentOS7, using Yum and from the source. I'll be using a 512 MB VPS from Digital Ocean. It's only $5 per month and CentOS 7 is pre-installed! Install Git Using Yum First, we will make sure existing packages »

How-to Install LAMP on CentOS 7

The LAMP stack is commonly used for web servers. LAMP stands for Linux, Apache, MySQL and PHP (Python and Perl could also be included as the "P"). The following steps will show you how-to install Linux, Apache, MySQL and PHP on CentOS 7. I'll be using a 512 MB VPS from Digital Ocean. It's only $5 per month and CentOS 7 is pre-installed! Install Apache To install Apache, type and enter the following command: sudo yum install httpd Now let's »

Apply Transparency to Images Using CSS

In this tutorial, I'm going to show you how-to apply transparency to your images using CSS3 filter property's opacity function. Making your images transparent can be useful for hero / jumbotron headers where you want to put text over or where you want an image to be transparent until an event happens, like being hovered on or scroll activated. The Results Not transparent: Transparent: The HTML and CSS The opacity function uses a percentage, from 0% to 100%; where 0% leaves »

Sepia Images Using CSS

In this tutorial, I'm going to show you how-to convert images to sepia using CSS3 filter property's sepia function. Converting the image to sepia leaves your image with an effect similar to the aging of old photographs and of older photographs chemically treated either for visual effect or for archival purposes. The Results Not sepia: Sepia: The HTML and CSS The sepia function uses a percentage, from 0% to 100%; where 0% leaves the image unchanged and 100% leaves the »

Blur Images Using CSS

In this tutorial, I'm going to show you how-to blur your image using CSS3 filter property's blur function. The blur function applies a Gaussian blur to the image. The Results Normal: Blurred: The HTML and CSS The blur function uses pixels. The more pixels, the more of a blur will happen. If the value is 0px, no blur effect will be applied. Here is the HTML you would use to blur the image: <img src="image.jpg" class="blur" »

Grayscale Image Using CSS

In this tutorial, I'm going to show you how-to convert your image to grayscale using CSS3 filter property's grayscale function. Converting your image into grayscale will leave your image with a nice black and white image effect. The Results Normal: Grayscale: The HTML and CSS The grayscale function uses a percentage, from 0% to 100%; where 0% leaves the image unchanged and 100% changes your image into grayscale. Here is the HTML you would use to grayscale the image: < »

Ghost Bootstrap Theme

The Ghost Bootstrap Theme is a Ghost blog theme that uses the Twitter's Bootstrap front-end framework. The default layout includes a navbar with a left and right menu and a jumbotron right below the navbar, plus the theme allows you to have a sidebar which you can easily customize. Download (zip) Features The Ghost Bootstrap Theme currently features the following: The latest version of Twitter Bootstrap with gradient theme option; Latest version of Font Awesome; Custom error page; Default template »

Invert Image Colours Using CSS

In this tutorial, I'm going to show you how-to invert colours of an image using CSS3 filter property's invert function. Inverting the colours of an image leaves a nice effect, which many say is like a photo negative. The Results Not inverted: Inverted: The HTML and CSS The invert function uses a percentage, from 0% to 100%; where 0% leaves the image unchanged and 100% leaves the image fully inverted. Here is the HTML you would use to invert the »