header, 5 links with optional dropdown links, search box, slider with 3 images, updates calendar
insertable: post size, permalink post size, post bottom margin
optional: infinite scroll, manual loading (infinite scroll must be enabled too), header
extra: custom font family / size, photoset gutter (0 - 4px), like & reblog buttons, back to top, white / black tiny cursor
Information about payment, theme customization, code acquisition - right under Keep reading.
Payment & Code acquisition
There are two ways you can purchase this theme:
1. by leaving your PayPal email in my inbox; I’ll send you an invoice and when I receive the payment, I’ll send you the code in .txt format to your email address.
2. or by donating $12 $9 to my PayPal account first, then letting me know which PayPal email address you used to make the payment. After the transfer is verified, I’ll send you the code to your email address.
Theme customization
I’ve included tons of options you can play around with directly from the Theme Options panel. The only two features that require a bit of code editing is the Updates Calendar, which I already have a detailed tutorial for here, specifically on how to add your updates, and the dropdown menu links, which you’ll have to uncomment so that they become visible on your page. I’ll help you with that :)
Notice the bold properties in the table.calendar selector. You can adjust them to your liking or you can replace top with bottom and / or left with right.
4) Copy / paste the following right after the code from the previous step:
/************************ calendar updates ************************/
/*** update day ***/
table.calendar tr:nth-child(row) td:nth-child(column) {
border:1px solid #ccc;
-webkit-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
-moz-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
box-shadow:3px 3px 0px 0px {color:Calendar Accent};
color:#000;
}
/*** hover text on update day ***/
table.calendar tr:nth-child(row) td:nth-child(column):hover:before {
content:'my first update';
}
table.calendar tr:nth-child(row) td:nth-child(column) is the selector that styles the update day.
table.calendar tr:nth-child(row) td:nth-child(column):hover:before contains the text that appears when you hover over the update day. Make sure to keep the quotation marks intact when you edit the hover text in the content property.
The image below shows how to find the right row and column for each day. As you can see, the first two rows contain the month and weekdays titles, so we won’t use 1 or 2 in tr:nth-child(row).
Example: Say we want to add an update on June 20th, which is located on row 6, column 3. We’re going to edit the code from step 4) like so:
/*** update day ***/
table.calendar tr:nth-child(6) td:nth-child(3) {
border:1px solid #ccc;
-webkit-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
-moz-box-shadow:3px 3px 0px 0px {color:Calendar Accent};
box-shadow:3px 3px 0px 0px {color:Calendar Accent};
color:#000;
}
/*** hover text on update day ***/
table.calendar tr:nth-child(6) td:nth-child(3):hover:before {
content:'my first update';
}
To add more updates, copy / paste the code from above and change the row and column numbers accordingly.
Click Update Preview > Save, then go back to your Theme Options panel to edit the Calendar color options.
insertable: post size, permalink post size, post padding, post side / bottom margin
optional: infinite scroll, manual loading (infinite scroll must be enabled too), number of columns, blog title, sliding effect for blog title, show caption, unnest caption, header bg opacity
extra: dual color tags, caption icon size (18 - 24 - 30px), font family / size, photoset gutter (0 - 4px), header / caption icon shape, like & reblog buttons, back to top button, gray / black tumblr controls, white / black tiny cursor
up to 8 links
sidebar image size min. 50 x 50 px
icon credit: @sirxusblack
General theme rules apply. It is recommended that you follow these steps before installing the theme. Thank you and enjoy!
Note: re-type the quotation marks when you copy/paste codes from this tutorial into your HTML Editor
Find the post in the source code
We have to find the code for the post we want to pin in the source code, then copy/paste it into our HTML Editor, right before {block:Posts}, located below <body> .
{block:Posts} is the html block that generates posts on your blog. Theme makers use div tags (<div class="className">...</div>) to style this element.
Most themes have a div for the entire posts container
e.g.: <div id="posts_container">...</div>
and a wrapper div for each post
e.g.: <div class="entry">...</div>
The {block:Posts} block is located between these two divs, and it is visible only in the HTML Editor.
The post wrapper div has one general instance in the HTML Editor and several instances in the source code for each post, which will make it easier for us to find our post.
So, these are the codes we need to find:
the opening wrapper div tag
the actual post code
the post info, tags, reblog/like, notes, etc. code
the ending wrapper div tag
The following examples are based on my themes. Each theme maker names their ids/classes differently, so before proceeding to the next step, find out the id/class title of your post wrapper div tag.
Example 1
1) Go to the page of your blog where the post you want to pin is located > right-click > View Page Source. I don’t recommend using permalink pages, sometimes the permalink and index page styles can differ.
Use keywords from your post to find the code faster by using ctrl+f, e.g. caption words, tags, the number of notes, the date, any info that makes that post unique on that page. In this case, I typed "i love you" in the search box.
If your post has no info or caption, open the HTML Editor, click on the gear icon in the upper left corner, select Find and Replace, type in {block:Posts} in the Search for box. Find the post wrapper div located immediately after {block:Posts} and copy that tag into the search box, e.g.: <div class=“entry”. If you want to pin the third post from the page, find the third <div class=“entry” in the source code.
The green text in <!-- ... --> tags are invisible html comments.
Copy the code right before {block:Posts}
2) Open the HTML Editor on the Customize page and find the {block:Posts} block. It should be located somewhere below the <body> tag. We’re going to copy / paste the code from the blue and red boxes from Example 1 source code between the posts container <div id=“posts_container”> and {block:Posts}.
3) Update Preview > Save.
Make it visible only on the index page
4) If you want the pinned post to appear on every single page of your blog, including permalinks, tagged / search pages, you can leave the code as it is. But unless it’s a really important information for your blog visitors, they might find it a bit annoying to see the same post at the top of every page they visit. In order to prevent that, you can make the pinned post visible only on the first page of your blog by including the following script right before </body>:
Again, don’t forget to re-type the quotation marks.
5) Add a1s2d3f4 beside the other class title(s) in the post wrapper div that your pasted from the source code. a1s2d3f4 is a random class title I made up; you can come up with your own, just make sure it’s unique in your code.
Add a ‘pinned’ icon or text
5) We’ll use Font Awesome’s ‘thumb-tack’ icon in this tutorial, but you’re free to use whichever one you like. First, add the FA CDN right after <head>:
In this example, we’re going to pin the ghibli gifset.
1) Right-click > View Page Source.
The “ghibli” tag makes the post unique on the page, so we’re going to type that in the search box using ctrl + f.
Not every source code will be legible, but no worries. In the image from the link below, if we look carefully through the code, we’ll find the opening wrapper div tag a few lines above our keyword (first red box). The closing </div> tag (second red box) should be near the next opening wrapper div instance (blue box). Notice the <div id="notecontainer"></div> between them. That’s the wrapper div for post notes on permalink pages, meaning we don’t need it for our pinned post.
Open full-res image.
Now we’re going to copy the code starting with the first red box and ending with the second red box, and paste it before {block:Posts} in the HTML Editor.
2) Update Preview > Save
I hope this tutorial was helpful! Sorry if it was too verbose, I wanted it to be as clear as possible for anybody :)
- v1 (insertable number of columns) / preview / code
- v2 (unicolumn only) / preview / code
Features:
insertable: post size, permalink post size, post padding, post bottom margin, etc.
extra: infinite scroll, rounded post corners, post shadow / on hover, post border, top / bottom caption, caption icon size (18 - 24 - 30px), font family / size, photoset gutter (0 - 4px), sidebar / audio / caption icon shape, like & reblog buttons, top / bottom search bar, back to top button, gray / black tumblr controls, white / black tiny cursor, subtitle animation / on hover
up to 6 links
sidebar image size min. 60 x 60 px
icon credit: @evngelion, @luciosbeats
how to change the icons
General theme rules apply. It is recommended that you follow these steps before installing the theme. Thank you and enjoy!
forget-me-not : preview I (live), preview II > pastebin
Features:
insertable: post size, permalink post size, number of columns, post padding, post side margin, post bottom margin, sidebar top margin
optional: infinite scroll, manual load (infinite scroll must be enabled too), fade in on refresh, left / right sidebar, caption, 4 link hover bounce effects
custom: body font family, body font size, text alignment (left / right / center), photoset gutter (1 - 4px), sidebar icon shape, audio image shape
up to 6 links
post notes on index page
sidebar image size - min. 50 x 50 px
like & reblog buttons, search bar, back to top button, gray / black tumblr controls, white / black tiny cursor
option to set location + mood
icon credit: @evngelion
General theme rules apply. It is recommended that you follow these steps before installing the theme. Thank you and enjoy!
Another Updates Tab I decided to post separately. It’s a slightly modified version of “shortcake”, taken from my theme “el psy ko”. The sections open separately. Credit isn’t mandatory, but very much appreciated. Installation tutorial under the cut.
✎ Preview
1) Paste this code anywhere after <head> and before <style>, preferably near the other meta tags.
2) Paste this code right before </style>.
3) Paste this code right after <body>.
4) Paste this code right before </body>.
5) Now you can edit the Updates Tab content. It has 4 sections that look like this:
<!-- section 1 -->
<div class="uparent">
{block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
{block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
<div class="ui"><div class="updates_icon">
<!-- paste your new selected icon title over "moon" -->
<i class="lnr lnr-moon" aria-hidden="true"></i>
</div></div>
{block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
{block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
<div class="container_content">
<div class="updates_title">
title 1 <!-- your title here -->
</div>
Hello. <!-- your text here -->
</div>
</div>
<!-- end section 1 -->
Where it says title 1 <!-- your title here -->, type your tab section title.
Where it says Hello. <!-- your text here -->, type your tab section content.
The text between <!-- and --> are html comments and they’re not visible on your blog, so there’s no need to delete them. You’ll find instructions on how to add / change icons directly in the code.
6) Click Update Preview > Save, then go back to your Theme Options panel, where you’ll find a new set of color, font and toggle options for the Updates Tab.
Note: There’s a bug on the Customize page that displays disabled options as enabled and vice versa. You’ll have to disable all the options first, even the already disabled ones, then enable the ones you need.
The Reveal Updates tab on click option hides the Updates Tab sections on refresh and displays them when the icons are clicked.
If you’re using one of my themes and installing the last part of the updates tab messes up the whole layout / your blog appears blank, please see this post.
