Latest articles.

Custom scrollbars with jQuery (cross-browser)

Written by: Rick Lamers Posted on: August 11, 2010

Something I stumbled upon a while ago was the whole scrollbar thing, you could set a div to overflow:auto; and it would create a scrollbar when the content in it exceeded the given height or width.

 

Now, I wanted to customize this scrollbar because it had to match the design we built for our client. At that time I wasn't able to find a solution but later on I finnaly got it.

 

 

It's called jScrollPane it's a plugin for the jQuery library and it works really well. You just follow the very simple steps on the documentation and you get a nice scroll bar that you can tweak with colors width height, use images and lots more.

 

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

 

If you have problems implementing this thing or if you have any questions about it, just ask in the comments below, I will check them to answer any questions you have.

 

This was Code-Spot.net till next time!

Read more...




WordPress: Theme structure

Written by: Rick Lamers Posted on: July 22, 2010

In a (standard) wordpress theme you will find the following files, underneath each file's a basic explanation:
 

- index.php

Serves as the home-page when in the Settings>Reading Your latest posts is selected under Front page displays.

 

- page.php

Serves as a template for the default pages created under Pages > Add New. So if you change something in this file all regular WordPress pages will be changed.

e.g. You add <a href="/">Back to Home</a> at the top of the page.php. Then each page will have the link on it.

 

- single.php

Serves as the template for all posts created in WordPress, but only when the post is viewed as a single post. Not when you for example click on a categorie and it shows the list of posts in that categorie. That's what the archive.php is for.

 

- archive.php

This one will be used if people click on a tag or categorie from a post. It shows a list of all posts in that categorie or with that tag. Try adding something to the archive.php that's recognizable and try to find out for yourself when the archive.php is used.

 

- search.php

Will be used if people use the searchform.php to search for something, and this will then return the list of results in the way specified in this file.

 

- searchform.php

This files is included (often in the sidebar) when you want the search box to show up. Inside this file is a <form>.

 

- comments.php

This is the file you include when you want a (page.php) or (single.php) to be able to receive comments. Inside this is a bunch of <form> and PHP checks to make sure that page/post has comments enabled, it displays the comments and lots more. Short version: provides the comments system.

 

- 404.php

This is an error page, it will show up when people go to a URL on your WordPress site that does not exist. Mostly it will have an include header.php include footer.php (and sometimes sidebar.php) and between that something like: "Nothing found on this page". Also sometimes people include the searchform.php to provide search when people land on such a page. Best practice is to make sure when people land on this page they have enough options to find what they were looking for.

 

- footer.php

Contains the closing-tags (</body>) (</html>) for a page and often something like © Code-Spot 2010 for branding purposes. 

 

- header.php

This file is very essential in a WordPress theme, it's always included on every page because it contains the opening tags (<html>) (<body>) and includes the style.css and all other external files that need to be included.

 

- sidebar.php

This contains the sidebar which is definitely not required. It's usually a default part of a WordPress theme but in my opinion not always necessary.

 

- style.css

The cascading style sheet which contains all styling for the WordPress theme, it's included in the header.php file. And it's required for every theme because it contains the information about a theme like author, theme name and version.

 

- screenshot.png

This is a 300×225 image that contains a preview for the template. This is used on the admin panel when picking a theme.

 

I hope WordPress theme structure is now a little bit cleaner for you, ofcourse you won't know everything after reading this but atleast you'll have the basic understanding of a WordPress theme.

 

Till next time on Code-Spot.net

(Make sure you leave your questions in the comments below!)

Read more...




Latest Video Tutorials


Comming soon!