As promised, the bookshelf page I’m using on my own blog. Personally, I think there are quite a few flaws in this but alot of you still wanted it. Again, if you need help installing pages, there’s a tutorial here. If you need help using/editing anything, the help page is here.
Please read the info carefully before you download as there are two different versions based on what rating system you want to use.
The first uses CSS Sprites to Display Ratings (credit for tutorial) - as seen in the live preview on my own blog - it’s the red stars and you are unable to change the colour of that using HTML/CSS (you can remake them in Photoshop but I’m lazy), however this method allows half stars. The other version, just uses basic HTML stars - you can change the colours of these (I’ve set the default to a yellow-ish/gold) but there are no half stars. If you’re familiar with HTML/CSS you can feel free to change to whatever method you prefer.
There are three categories at the top (bookshelf, currently & to read, favourites) and each time you add a new book you will need to pay attention to what category you would like that book to be under (just like the watching page). For details on how to edit colours and add books read the FAQ here.
New year, new resolutions, new shiny film tables. So based on the original movie table idea, I’ve tried to make keeping track of more than one media type easier. Using Isotope I was able to include the filter function which you can see in action when you click “Sort by Media” in the sidebar - there’s your different types/categories. You can obviously use this as only a film table as well.
For those who have time or want to, you can add even more categories and keep track of more things (maybe albums, musicals, concerts even blog layouts) and hopefully at the end of the year we can all see where we wasted our time.
Please note, this may not work (properly) on screen resolutions smaller than 1200px.
How to install: Go to the Customize page, click Pages and then Add a Page. Type in a name for the page and make sure you select Custom Layout. Now you can paste the code in the box and edit it as you please.
How to add films: It should be pretty straightforward how to add films. You will need to edit the HTML, but I tried to keep it as simple as possible. In the following code, I have bolded the bits you need to edit. The bolded URL needs to be replaced with the url of the film poster, which should be 200x296px big. A single film starts with <li> and ends with </li>. If you want to add a new film, you can just copy the following code, and paste it directly in front of the </ul> near the end.
<div class=”linkjes”><a href=”imdb link goes here“>IMDB</a> - year - <a href=”trailer link goes here“>TRAILER</a></div>
Do not remove, change or move my credit in any way. Do not use it as a base. Do not repost and claim as your own. Send me an ask off-anon if you have any problems or questions. Like this post when using. Enjoy!
So here’s that blog page I promised. As I’m sharing the raw version of codes you will have to make/include all of the images yourself. I guess the main feature is the ability to filter when you click on the buttons at the top. So I asked for opinions about any changes people would have wanted and taking those into consideration I have decided to share the original version of codes. I may make some changes in the future and release an “updated” version. If there are any questions about changing colours/fonts or adding shows/info please have a look here first. Any other problems just message me. Feel free to edit as much as you like.
Uses: HTML, CSS3, transitions, tables, Tested in: Firefox, Opera, Safari, Chrome - DOES NOT WORK IN INTERNET EXPLORER!
1. Download the code. 2. Prepare your RP image using the PSD (or whatever coloring you want). The image should be 200 x 200 px. 3. Upload your picture to an image host like tinypic. 4. Search the code for <!-- RP #1 PICTURE -->. Immediately below is the code for the first image. Replace “http://i48.tinypic.com/a08r6.png” with your own image. 5. Search the code for <!-- RP #1 INFO -->. Immediately below is the code for the first roleplay’s info and links. Replace the code between the <div> tags with whatever you want. This will be the text that shows up when you hover over the image for RP #1. 6. Repeat this process for all of your RPs. Paste the image placeholder in for any leftover boxes and make sure there’s no content in the “RP INFO” section (between the <div> tags). 7. Now go to the customize theme page (http://www.tumblr.com/customize/). 8. Scroll down to “Pages.” Click “+Add a Page.” 9. In the pop-up window, change “Standard Layout” to “Custom Layout.” 10. Define the URL of the page but leave the title blank. 11. Paste your edited code into the box and hit “Create page.” Save your changes in the theme customization menu. 12. That’s it! I know it seems like a crazy amount of work but the result is pretty nifty, no?