Posts Tagged "wordpress"

If you need to complete quick project and you are ready to spend some money for it, this premium WordPress portfolio theme showcase will definitely interest you! This is follow-up article to previous one about free themes, check it out – 24 Free Portfolio And Photo Gallery WordPress Themes.

I think it’s okay to spend few bucks for great theme with full support and many features for fast projects. I just bought one as well, just because I needed to set up site rapidly fast, but I had specific requirements for that blog. I visited several premium theme sites and found good looking theme I was happy with in 30 minutes.

It was interesting experience for me and this research was quite exciting as well – when I went through these themes I found out several modern jquery features many sites do not offer just yet, interesting designs..really premium like! Even if I didn’t buy anything this time, I got a lot of inspiration and new ideas just while browsing! Enjoy and let us know which was your favorite theme?

1. Twicet (37.00$)

Theme Features (few of them):

• Valid XHTM Strict1.0 and CSS 2 .1, tableless Design
• jQuery support
• Fading Portfolio/Item slider
• Dropdwon Menu, improved with jQuery
• jQuery 100% unobtrusive wich degrades gracefully if javascript is turned off
• Gallery Page with lightbox
• Working ajax/php contact form
• Newsticker

2. Display ( 42$)

DISPLAY is a WordPress Theme, best suited for Business and Portfolio sites. It comes with a fantastic 3D Image slideshow that can be controlled from your backend with a custom tool. The Theme has a huge wordpress custom backend (8 additional Admin Pages) that make customization of the Theme easy for those who dont know much about coding or wordpress.

The Theme also comes with a more subtle fading image slider. You can use this slider as your main slider, otherwise it will be used as a fallback if the users browser doesnt support flash.

Read more »

I kind of got lost a little bit in creating Monthly Deviantart web interface features, but at least I loved to do research and get inspired every month, and since our blog is focused mainly on web design, I am sure you enjoy it as well. Let’s get started, get inspired and watch how trends are slowly changing from month to month.

More and more visually appealing and image heavy websites are being created, and of course we’ve got a reason – days with slow Internet speed are going to past and technologies are evolving every day! Let’s get started – shall we?

1. Art-Label.net Board Skin by DouglasEltz

2. Environment information pages by SneakyOne1990

3. Angel by miko434

4. Green Palacy Theme by DouglasEltz

Read more »

I got one fresh, small project, where I needed small portfolio site for a friend. It got me thinking and lead to research what WordPress can offer to me, with its great CMS platform. I was a little bit surprised, because I got even better results than I expected- theres was a plenty of interesting portfolio, photo gallery themes, where homepage was static, but still you can tie together static with dynamic content and add blog as well. Maybe it’s nothing new or signifunt for most of you, but I wasn’t aware there is possible to get such theme so easily, where of course my friend could manually change it’s content without touching or learning any code knowledge.

It was commercial theme I tested, but since most of people look just for free stuff, I gave it a try and searched for free Portfolio, photo gallery type themes. Maybe results aren’t too bright, but those themes are completely free for using. Don’t worry, if you are searching for more quality and wider sortiment, I will follow up with Commercial Portfolio and Photo Gallery WordPress Theme article in next few days!

1. ViewPort

Viewport, a free WordPress theme created by Paul Bennett is focused around a clean and simple, content based layout. The aim is to grab the user’s attention and draw them straight into the content.

View Demo

2. WordPress The Unstandard

View Demo

3. Gallery 1.2

Gallery is a beautiful, free, gallery-style Thematic child theme for WordPress, designed by Christopher Wallace especially for Smashing Magazine and its readers. It is extremely flexible and can be used as a starting point for design galleries and portfolios.

View Demo

4. wpFolio – Free CMS / Portfolio WordPress Theme

View Demo
Read more »

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we’d like to present 10 smart javascript techniques for showing and hiding content using different JS libraries.

1. Simple Toggle with CSS & jQuery

A simple toggle tutorial with an explanation of how to switch the “open” and “close” graphic state. The markup is pretty straight forward, where the h2 tag is a link that “trigger” the toggle effect. Below the h2, we will have our container where we hold the content.

Toggle Header

2. jquery-fade-infade-out

A nice fade in fade out effect you can add to your website. The effect fades an element to 30% on arrival of the website, then when you hover over it, it fades to 100%. The effect can be assigned to basically anything in a website wether it be an image, text, a link or even a div.

$(document).ready(function(){
$(“ELEMENT HERE”).fadeTo(“slow”, 0.3);
$(“ELEMENT HERE”).hover(function(){
$(this).fadeTo(“slow”, 1.0);
},function(){
$(this).fadeTo(“slow”, 0.3);
});
});
3. How to Mimic the iGoogle Interface

In this tutorial you will learn how to create a customizable interface with widgets. Each widget can be collapsed, removed and edited. The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique). The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications using jQuery’s UI library and specifically the “sortable” and “draggable” modules.

4. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login/signup panel for your website using Mootools 1.2

5. jQuery pageSlide

jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.

The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.
6. Liquid expandable section with rounded corners using CSS

This tutorial explains how to design a nice liquid expandable section with rounded corners (top-left, top-right, bottom-left, bottom-right) using some lines of CSS, HTML and JavaScript code.

7. How to Make a Smooth Animated Menu with jQuery

This menu has a smooth animation using “easing” effect. There are two actions in the code used here. When the mouse moves over a menu item, that item starts an animation where it expands to 150px tall over 0.6 seconds. The easing applied through the plugin is ‘easeOutBounce’ which causes the box to “bounce” a little as it reaches the end of the animation (”out”). When the mouse is moved off the animation to the starting size is triggered.

8. Lazy Load

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of view port (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

9. MOOSLIDE – AJAX CONTENT SLIDE

MooSlide’s functional solution is to present any contentis. It is a small and slim ajax based extension or replacement of the common “lightbox” that can be found on nearly every page. It is based on the mootools framework.

10. The Sexy Curls jQuery Plugin

Sexy Curls jQuery plugin is an open source solution which lets you share in the beauty of the page fold feature with ease. It uses the jQuery UI & its resizable package.

WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme.

1. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

2. jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. The length of a breadcrumb menu may be very long, jBreadCrumb is a great solution for this issue. It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. You can also use this great plugin or this interesting one to automatically create breadcrumbs in your blog.

3. Sliding Boxes and Captions with jQuery

The basic idea of the sliding box animations is very simple. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. I can see this script works great for a CSS gallery, really interesting.

4. How To Create An Amazing jQuery Style Switcher

Add a nice style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

5. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

6. MooTools Link Nudging

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.

7. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

There are many tutorials out there for creating a WordPress drop down menues. You might want to check here and there.

8. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your blog. I can see this very useful if you are having a news submission are on your website and want to display your user’s contributed links in a nice and fancy way in your sidebar.

9. Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.

10. J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.