Energize Your Static Website with This WordPress Conversion Tutorial (Part 2)

Posted in Coding, HTML & CSS, Tutorials • Posted on 2 Comments

Help!

That’s the first reaction you might have if you are trying to figure out your WordPress conversion tasks, right?

Even if you are just a beginner and not really a web expert, you can definitely create a WordPress theme for as long as you know how WordPress works.

If you’ve been using WordPress as your website platform, chances are, you’re tired of using generic WordPress themes for your site. You might even think of just doing your own theme to have your preferred styles and features.

Customizing Your WordPress site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Energize Your Static Website with This WordPress Conversion Tutorial (Part 2) Read More

Energize Your Static Website with This WordPress Conversion Tutorial (Part 1)

Posted in HTML & CSS, Tutorials, Web Design • Posted on 11 Comments

Web design and development are one of the most in-demand skills in last years. Agree?

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You’ve probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.

At first blush, there are a number of reasons why you would choose to have a static (HTML and CSS) website.

Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.
Energize Your Static Website with This WordPress Conversion Tutorial (Part 1) Read More

Image Caption Animation with CSS3 Transform and Transitions

Posted in Coding, HTML & CSS, Tutorials • Posted on 8 Comments

jQuery caption hover effects have been on the Web for a long time. There are plenty of jQuery libraries out there that can be used to obtain a cool and amazing image caption animation and hover effects.

That being said, it is now possible to do the same cool effects with CSS3 transitions and transform properties.

Today I want to show you how you can create cool animation hover effects with CSS3 animation. The images used in the demos were illustrated by Rudolph Musngi.

Image Caption Animation with CSS3 Transform and Transitions Read More

Dress Up Your Site: How to Customize WordPress Themes

Posted in Coding, Tutorials • Posted on 1 Comment

You’ve already installed your favorite WordPress theme on your site, but you feel that it needs to be tweaked a bit to make it look better, which leads you to  ask “How does one customize WordPress Themes?”

If you’re new to WordPress, you might think that it is hard to customize a WordPress theme because the thought about the codes scares you.

Although customizing a WordPress theme seems like rocket science, there are many simple ways to customize the look and feel of your site without breaking the theme. In fact, there are even some tools on Web that you can use to make the customization process easier and faster.

This article serves as a guide to teach you how to modify WordPress Themes the smart and easy way by using a child theme.

Dress Up Your Site: How to Customize WordPress Themes Read More

How to Create Anchor Tooltips Custom Shortcode in Minutes!

Posted in Coding, Tutorials • Posted on Leave a comment

Tooltips are very useful in displaying information. These are small hover boxes that contain information about the text or item being hovered over. It appears without clicking the text, something which is very handy on your site. In some previous tutorial, I showed you how to create and customize anchor link tooltips to display information. In this one, you will learn how to create anchor tooltips custom shortcode.

With just a few lines of pure HTML and CSS3, it can be done. But isn’t it would be great if you can also integrate this on your WordPress site?

Great thing there is a solution for that: WordPress shortcode. Shortcodes are WordPress-specific code that lets you do nifty things with very little effort. By just inserting something inside square brackets, it will replace that content with some other content and usually being driven by a series of PHP functions.

In today’s tutorial, you will integrate the anchor tooltips that you’ve made on the previous tutorial to WordPress shortcode. Let’s start.

How to Create Anchor Tooltips Custom Shortcode in Minutes! Read More

How to Create WordPress Widgets

Posted in HTML & CSS, Tutorials, WordPress • Posted on 1 Comment

WordPress widgets give you the ability to edit a certain part of your WordPress theme, usually on the sidebar. Using its drag-and-drop features, it’s really easy for beginners to add, customize or delete a widget.

Although there are a lot WordPress plugins available on the Web, the best way to get your exact desired output on the front end is coding it.

Coding WordPress widgets is just like coding a plugin but, this time, it’s more simple and easy. WordPress widgets provide user the options to fill out forms, include or exclude certain data information and some other features.

The order and placement is set by the WordPress theme in the functions.php file.

In today’s tutorial, learn how to create WordPress widgets by coding an Advertisement Banner  widget to display banners on your site. OK, let’s start.

How to Create WordPress Widgets Read More

How to Create a Music Player UI Using Adobe Illustrator

Posted in Tutorials, Web Interface, Web Interfaces • Posted on Leave a comment

There have been a lot of UI kits swarming around the market lately. Some include complete sets of User Interface elements and, some, focus on just one element. These kits often serve as a basis and template for web designers in creating wonderful web pages.

Because of these kits, web designers, now, don’t have to worry about running out of ideas. They can copy and use these UI kits and make them better.

Today, you will be learning how to create a Music Player UI using Adobe Illustrator. This trendy UI was built using the minimalist and flat design foundations.

How to Create a Music Player UI Using Adobe Illustrator Read More

Texturize It: How to Create Textured Text Using CSS

Posted in Coding, HTML & CSS, Tutorials • Posted on Leave a comment

Still remember the old days where in you are just starting out with Photoshop? You designed an image-based text and then just uploaded it on your website?

Instead of doing this with Photoshop, the good news is, it is now possible to create textured text using CSS3. Webkit now supports the background-clip CSS3 property that does exactly what Photoshop does.

Aside from that, you can also use the mask-image CSS property to do almost the same effect; however, this property clips the visible portion of an element according to the transparency of the mask images.

In today’s tutorial, you will learn how to apply these effects and create a cool textured text using CSS3 and HTML5.

Texturize It: How to Create Textured Text Using CSS Read More

How to Create a Simple WordPress Settings Page

Posted in Coding, PHP, Tutorials • Posted on 4 Comments

If you are a WordPress user, you might be familiar with the theme settings page. This page can be found under the Appearance Menu or in the Administrator Menu itself. Basically it allows the administrator to change specific settings like logo, text color, Google Analytics code and so on. Perhaps one of the first things you do is tweak that WordPress settings page, for sure.

Though there are some free WordPress templates that have theme theme settings page, a Premium WordPress theme commonly have this kind of options.

In today’s tutorial, you will learn how to create a simple theme options page for your WordPress theme.

How to Create a Simple WordPress Settings Page Read More

Don’t Be a Wimp with GIMP Tutorials

Posted in Photography, Tutorials • Posted on 3 Comments

GIMP is the GNU Image Manipulation program. It has been distributed as an open source, so therefore, anyone can easily download the software without any donation. It can easily work on different operating systems. It is also available in many languages as well. Are you ready for some awesome GIMP tutorials?

You can use GIMP in a variety of web designing activities such as:

  • Photo retouching
  • Image composition
  • Image authoring

GIMP is packed with plenty of awesome features.

  • It has a customizable interface that allows you to easily customize the view and behavior of the image as you like it.
  • GIMP saves you from other unnecessary details using the clone tool.
  • The hardware of the GIMP includes a unique support for the various input devices.
  • You can change the size, angle, or even the opacity of a brush while you are painting, binding your favorite scripts to buttons.
Don’t Be a Wimp with GIMP Tutorials Read More
184.73.72.163 - unknown - unknown - US