I have written in the code where you can change colours and for which part of the page, so just look out for the notes. :D
Please like/reblog if you’re using the theme!
BOOKSHELF #1 BLOG PAGE
↳ Preview: Codes Only / Example • Help/FAQ
Download: (Pastebin) CSS Sprites Stars or HTML Stars / (Ge.tt) CSS Sprites Stars or HTML Stars
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.
VIII - SCRAPBOOK/FILM PAGE 2013
↳ Preview: Codes Only / Example • Help/FAQ • Download: Pastebin / Ge.tt
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.
Hiatus/Blank blog layout!
I’ve had a few people ask me how to make their blogs blank so that people can’t see their posts. This simple layout will let you do that, and I’ve also coded in a few extra features:
- You can include some text to explain why your blog is blank or why you’re on hiatus.
- You can allow people to follow you so that your posts still show up on their dash (delete that section of the code if you don’t want this feature).
- People can still send you messages.
You’ll need to make a few small changes, which I’ve noted on the installation page. Please feel free to message me if you have any questions or need help!
Live preview: here
Code and installation instructions: here
Redirect Theme 02
picture/gif should be 200px wide :)
any problems with it, just message me in my ask box
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.<li><div style=”width: 200px; height:296px;”><div class=”image-hover”><span class=”desc”><div class=”titel”>filmtitle goes here</div><div class=”linkjes”><a href=”imdb link goes here“>IMDB</a> - year - <a href=”trailer link goes here“>TRAILER</a></div>★★★★☆</span></div></div></li>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!
about page #1
Pictured: codes preview (left) and effective preview (right).
- This is an about page theme. You’ll have to put the colors and images in yourself, but I’ve labeled everything to make it easier for you to know what to change.
- Keep your description text short and don’t worry if you can’t see some of it when the petals are in their regular state, the rounded corners go away when you hover.
- You can have any combination you want - 4 images, 3 images and text, 2 images and 2 texts, 1 image and 3 texts, no images and all texts, whatever you want.
If you have any questions feel free to ask me on my themes blog.Okay enjoy, don’t remove the credit/steal code/claim as your own/generally be a dickbag/etc.
Update: now with editing guide!
{Family 2} Code | Live preview
- sidebar image auto 200x200
- add links
- works best in google chrome & firefox
Like or reblog if you take it :)
CURRENTLY WATCHING BLOG PAGE • PREVIEW: Codes Only • Example • HELP/FAQ • DOWNLOAD: Pastebin / Ge.tt
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.
Sometimes we have a beautiful image that isn’t a pattern to put in the background, but in different resolutions, the image doesn’t fit perfectly in the screen. Here the solution to this problem!
In the CSS, put this code:
html { background: url(images/bg.jpg) no-repeat center...
redirect theme 01: {live preview} + {code}
- 100x100px image
- customizable colors
do not remove or alter the credit, please and thank you!
{Fic Rec Theme 1} Code | Code preview | Personal preview (+ sidebar)
- no side image
- add links
- works best in google chrome and firefox
- link of the fic in the title
- add boxes
Like or reblog if you take it :)
The Ridiculously Elaborate Roleplay Directory Page
Live preview: here
Get the code: mediafire/pastebin
RP image PSD: mediafire
Image placeholder: tinypic
Uses: HTML, CSS3, transitions, tables,
Tested in: Firefox, Opera, Safari, Chrome - DOES NOT WORK IN INTERNET EXPLORER!
Instructions: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?Credit: I was inspired by Manatopia’s role play page to make this.
about page #1
Pictured: codes preview (left) and effective preview (right).
- This is an about page theme. You’ll have to put the colors and images in yourself, but I’ve labeled everything to make it easier for you to know what to change.
- Keep your description text short and don’t worry if you can’t see some of it when the petals are in their regular state, the rounded corners go away when you hover.
- You can have any combination you want - 4 images, 3 images and text, 2 images and 2 texts, 1 image and 3 texts, no images and all texts, whatever you want.
If you have any questions feel free to ask me on my themes blog.Okay enjoy, don’t remove the credit/steal code/claim as your own/generally be a dickbag/etc.
