Articles > CSS

CSS

Automatically generating a table of contents with a smooth scroll effect

Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
CSS

Adding a “You might also like” overlay to another WordPress post using scroll events

How do you encourage users to stay on your site and how do you let them know about the rest of the great content you have on your site? If a user has read or is reading and article on your site, they may like to know about similar content. You could have a series of thumbnails or related articles, but why not give a specific post a little more priority? In this tutorial we'll be using jQuery to detect when the user has scrolled to or near the bottom of the article. Once they are near it, we'll display a small overlay...
CSS

A WordPress slider template (with CSS3 animations and minimal jQuery)

Almost every site you see these days has an image slider on the front page. They come in all sizes and depending on who you ask, they have limited benefit to a sites traffic or navigation compared to the amount of space they take up. But they look pretty and when used correctly can be fairly effective. This tutorial aims to create a simple WordPress page template with a slider that allows you to include a few posts that have been added to a slider category. To make it more interesting, we're going to make it book-markable,...
CSS

CSS3 and the nth-child

How many times have you seen a piece of JavaScript or PHP code that's only purpose is to add a specific class to the first, alternate or last element of a list or row of table? With CSS3 you can easily get rid of all of that logic and replace it clean and simple CSS selectors. This will help tidy up your code and depending on what exactly the code is doing reduce CPU load by removing unnecessary recursions (This is of course a minimal gain, but every little bit counts) What is the nth-child ... The nth-child is a pseudo-class...
CSS

5 Quick and Easy Tricks To Improve Your WordPress Theme

There are a few behaviors I normally change when I'm writing a WordPress theme. Some of them are pretty basic, but they can really enhance the theme my making it go that extra mile. Customize The Login Page ... Even though you can't include a custom login page in your theme, it's actually quiet easy to customize the existing one. If it's just changing the logo or giving it a completely different layout, the place to start is the login_enqueue_scripts action. Here you can decide to output a simple piece of...
CSS

GitHub Plug-in for WordPress

For the last few years I've run my own Subversion (SVN) server on either a spare box and more recently with a paid for server. This was mainly because my work was private and I was familiar with SVN, and I found that the TortoiseSVN client was excellent and easy to use. My needs have changed and evolved over the years, particularly in the last few months since I started these tutorials. So I have decided to start moving new projects and some of my tutorials to GitHub. I've been watching GitHub progress over the...
CSS

My “Go To” Font List

There are a few font's that I almost alway find myself using when it comes to WordPress themes, graphics or marketing materials. I tend to use them because they are clean, flexible, easy to read and alway enhance the end result. In no particular order they are: Open Sans Archive Bariol Blanch Nexa Print Clearly Manteka Open Sans ... Open Sans is a great font, it looks great in pretty much all media formats and comes in a range of different weights. I tend use it primarily for large blocks of text rather than...
CSS

OAuth2 and the Twitter API – A WordPress plugin

Building on the last few WordPress related tutorials, this week we'll being using the Twitter API to display a users most recent tweets using a shortcode. Several of the existing tutorials and code examples out there use the old version of the API or the search API that do not require authentication. This API has been deprecated and been replaced with version 1.1. Although it still works, Twitter can disable it at any time. One of the main changes to the API with the introduction of the 1.1 API was the implementation...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress