Netvivs » Web Design

Use a CSS Alternated Print version

Administrator — Mon, 21 Jun 2010 22:53:00 +0000

When printing web documents we sometimes need to setup a css alternate print version so we can use a different CSS stylesheet for printing.

The method to achieve this in a webpage is easy, we just need to add a new CSS line inside tags.

This is the easier way to add your specific rules for printed media.

Using a PNG Image as Favicon

Administrator — Tue, 23 Mar 2010 23:42:14 +0000

Favicon as PNG image can easily added into any existing webpage by using the following snippet.

You can use generators to automatically create the icons from an image, or if you use Photoshop then you can download a free plugin for ICO support.

Favicon from Dyanmic Drive

FavIcon from Pic

Webpage Design Programs

Administrator — Sun, 14 Feb 2010 14:04:19 +0000

Designing professional webpages requires some skills of HTML/CSS as well as Internet knowledge. Web pages are hosted in web servers, and web servers are connected to Internet. Also, designing webpages proficiency may require some other design skills since you will be responsible to layout the page and split it into sections like Header, Body, Sidebar and Footers.

There are many webpage design programas available in Internet. Some are free and other costly, but the important thing here is not the software itself, but your knowledge. You can even use the Notepad if you have HTML/CSS skills. But you can also use Adobe Dreamviewer or (awful) Frontpage if you need a paid software. There are other free and costly tools as well. Adobe for example has been focusing on web editor and design packages.

For basic webpages in HTML/CSS there are many resources on Internet where you can find free layouts: fluid, flexible, fixed, so you can download and that will made the things easier since you have a code base for start with your project. Also these basic webpages may growth to more complex webpages later.

Cool Captcha design with AJAX

Administrator — Tue, 10 Nov 2009 03:24:09 +0000

Today, I found this fancy AJAX Captcha that validate the user is a human by letting him to move elements into a drop box.

It is really a nice Captcha design.

… Read the rest

Simple CSS Menu

Administrator — Mon, 31 Aug 2009 02:03:16 +0000

Here is a simple CSS menu that you can use in your web projects.

… Read the rest

Prototyping Web Applications

Administrator — Sat, 30 May 2009 03:21:24 +0000

Balsamiq is a prototype tool that is gaining a lot of popularity nowadays. The idea is really brilliant IMHO, and these guys made a very useful tool that worth every penny.

You can build mockups quickly and communicate your ideas to the development team or for business purposes. You can try it for free before considering to purchase. The evaluation test is not for download, instead you need to try it online.

Switch Display Options with CSS & jQuery

Administrator — Fri, 29 May 2009 22:28:20 +0000

Swith Display Options is a jQuery library that allows to switch the view in a List. You can easily toggle betweek list type or icons type. See an example here.

… Read the rest

How to create a Categories page in WordPress

Administrator — Mon, 18 May 2009 23:21:44 +0000

Usually categories are listed in the sidebar of a WordPress installation. However,we can do a lot of things with Categories.

In this case we will create a Categories page using Multi Column Category List plugin. By this way, we will create a new page with a custom category template, and then list each category under alphabetic order using 3 columns.

Preparing a custom template

We can create a custom page template very simple. Just create a categories.php file and add the following tag at the top:

Upload your categories.php to your theme directory. Also you may create a sidebar-category.php in case you wan to display a different sidebar for that page. If yes, duplicate your sidebar.php and create sidebar-category.php and also upload that file.

Then, we are ready to create a new Page and name it Categories. We need to choose the just created categories page template so we can customize it with our own design.

So, go to create new Page and write something like this:

Then, choose the uploaded categories.php as Page Template.

Using Multi Column Category List Plugin

In our case, we are using Multi Column Category List plugin, so if you want to follow the same steps, you need to install it and activate it in your WordPress installation. After you install it, you will see a new configuration option in the wp-admin sidebar. Go there and choose how many columns you want to use, and if you want to group categories in alphabetic order (grouping under the first letter).

Remember to upload the .css file under your theme directory.

Other things you can do with categories

There is a great article under JTPratt’s blog describing other ideas how to tweak or hack categories in WordPress.

Continuous Image scroller in jQuery

Administrator — Thu, 14 May 2009 19:10:49 +0000

simpleScroll. This jQuery library allows to create image scroller effect with images and/or HTML.

… Read the rest

jQuery Resizable Textarea

Administrator — Sun, 12 Apr 2009 23:51:39 +0000

You can use jQuery Textarea Resizer plugin to create a dynamic height for textarea controls in web pages. Thsi makes possible to resize the textarea control by moving a handle. So, the user can control the Textarea height for its own convenience.

Visit website | Example