So here's a newer, cleaner and hopefully easier to use version of my previous currently watching page. This version uses the plugin, Isotope, rather than just CSS and you can choose to use or not to images. It can also double up as a tags page if you want (empty links already added). I have also included a greyscale option, so only when you hover on images, the colours pop out.
I have also included a very customized example of this page from my own blog (it doubles up as my TV schedule) and will not be releasing this version because a) there's so much extra coding it'll be be hard to make customizable and b) it requires intermediate knowledge on HTML/CSS/Isotope.
- Live Preview: Codes Only • Example (with greyscale) • Customized Example (without images)
- Last Update: 14 September 2013
- Support: Installing • Customizing • FAQ
Install This Theme
By using my themes you agree to the following:
Do not remove the credits. You can move it a different place or a secondary page but it has to be somewhere visible. Not just in the source code.
Do not use my themes or pages as a base code for your own work. Do not take major chunks of my coding (for example, the whole sidebar or all the entries) and stick it with something else to then claim as your own.
Do not redistribute any of my themes or pages. Even if the credits are still in place. And especially not as an “edited” theme.
Agree And Continue To Codes
Direct Link | Hosted on Google Drive
Customize Options
Changing Colours:
Main Background - #F3F3F3 Main Links - #130912; Main Links Hovered - #F38335; Topbar - #FAFAFA; Current Shows - #EDD456; Hiatus Shows - #A0C1BA; Complete Shows - #45C0AB;
Images: Each of the images are automatically resized to 200px (width). As long as your image sizes are consistant you have have any height. You may need to increase the height under ".stylewrap" if you have large portrait images. In my live previews I use screencaps that are 200x112px.
How To Add More Shows: This is not formatted like a table so there are no columns and rows and no need to stick to a structure.
You may notice the way a show is changed from "Current" to "Hiatus" to "Complete" is by the first line of code in each show: <div class="stylewrap hiatus"> - you just have to change the world ater "stylewrap" to either "current", "hiatus" or "complete" to change the status of each show.
For those who are having difficulty with this method, everytime you want to add a new show just copy/paste the code and keep adding to the list.
To Add A New Current Show
Title of Show
Extra Details
To Add A New Hiatus
Title of Show
Extra Details
To Add A New Complete
Title of Show
Extra Details
Greyscale: To delete the greyscale function find this code and delete it:
.grey { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); -webkit-filter: grayscale(100%); -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; } .stylewrap:hover .grey { filter: none; -webkit-filter: grayscale(0%); }
