Hello there! I'm Georgi Demirev - a web developer with over 10 years of experience, specialized in web design and front-end development. Since early 2014 I've started developing premium Tumblr themes (such as this one) and I love every single bit of it :-) On this blog I'm publishing some interesting articles concerning Tumblr so if you are one of those kind of people that learn stuff be sure to follow me.
Hi George, I recently updated my blog to the Orenda theme - so much more fun and user friendly than my previous one. I tend to post snippets and various character designs from things I work on - I write both original and fan fiction. I tag everything, and was wondering if there was a way to embed a drop-down or buttons in the nav bar to filter tags for my followers?
Hey, there’s no easy way to do that without editing the HTML. I would suggest either creating a dedicated Custom Page for the tags or trying another theme. My free theme Basic or the premium Ultimate Pro do have such feature. Basic has a lot less options, however Ultimate Pro is the big brother of Orenda with even more settings (240+) :)
Hi Georgi, I was wondering if you ever came across making custom LIKE buttons. Say when you are injecting content via Tumblr API. I have been basically staling the iFrame Like code and adapting it. It works here and there but is inconsistent. Have you had any luck?
Hi, you should take a look at Optica theme. It is the only theme that comes to mind that has custom like button. If you dig into it you should be able to find how they’ve done it.
I’ve released the Social Image Feed plugin used in many CubThemes themes for the public. It’s available on GitHub for free with MIT License. Now it also includes Instagram!
What is SIF? SIF is a JQuery plugin that reads RSS/JSON feeds from social networks and art galleries such as Instagram, Tumblr, Pinterestm, Flickr and more and outputs your images for all the nice people visiting your website/blog.
You’ll need to be a little HTML/JQuery savvy to implement it on your blog, but it will be worth it :-)
If you have ever used the “redirect” feature of Tumblr’s custom pages you might have noticed that after you arrive at your destination your URL has a weird #_=_ at the end of it.
For most pages that is not an issue, but if you want to link to a page that uses AJAX to display content (using # hash symbol, e.g. http://this.com/#page#_=_) the page is going to have a hiccup because it can’t understand what you’re trying to do.
There’s is a workaround - simply shorten your URL with goo.gl
When installing a new theme note that all boolean options (those are the ones that have ON and OFF state) are reversed. Options that are OFF are visualized as ON and vise versa.
How to fix it
Simply go through all options and switch them once:
- If it’s ON - switch to OFF and back to ON
- If it’s OFF - switch to ON and back to OFF
Now your options should display correctly until the next time you install a new theme.
Oh and by the way, if you happen to talk to Tumblr support, please ask them to fix this, it’s really annoying.
SSL security, which has been available on the dashboard for a while, is now here for blogs. To turn it on, go to your blog settings and enable “Always serve blog over SSL.” Mmmmm, security. Check out our help docs for more info.
Adding security is a vary nice edition to Tumblr blogs and since the beginning CubThemes’ themes are built to work with SSL certificates so crank that Encryption option ON.
But what could that mean for the long run? Can we expect to see transactions happening directly on blogs? Store features maybe? Only time will tell.
So I've purchased this app and on ios mobile it doesn't look good , the photo used in the scroller at the top, doesn't allow for anything else to be viewed underneath it. Can I get some help on this. Thanks
Hello, these messages are not checked regularly. Please open a support ticket at https://cubthemes.com/ticket so we can help you out. Cheers!
hi Demirev, what do you think about SEO on tumblr blog?
There are a couple of cases where SEO on Tumblr is not necessary:
1. You are not using custom domain - the .tumblr.com domain has very good Page Rank on its own and is going to list your blog high on the search engines regardless of your code and content.
2. You reblog a lot - search engines do not like duplicate content anyways, so there's little value in worrying about SEO.
In every other case it will be a smart thing to have SEO in mind, but never get obsessed with it. Your content is what matters and SEs will find a way to index it high if they think it has quality.
If you want to know more on how to structure your content and code take a look at this WordPress SEO Tutorial by Yoast (a leading WP SEO plugin author). It covers the basics and is relevent to Tumblr as well.
Hey! Do you know how I could make tumblr links -- Permalink / Source / Notes / (maybe tags) / Share/Reblog/Like buttons -- ease in only when hovering over posts? I know this won't have a quick answer... it may be too much to ask. So, no rush, and anything you can provide -- links to explain basics, etc -- would help. Thank you so much. Your blog's awesome.
Hello! The modern way to do that is with CSS3. Here’s a simple code I patched together to give you the basics http://codepen.io/nicotinell/pen/zGeVEL I hope that helps :)
Are you using Firefox? Do you have difficulties editing your blog because the theme is not working correctly on the customization page? Is your theme with more than 1 column? There is a big chance you’ve encountered the Firefox bug - something fairly minor for most of the Internet but a big deal here on Tumblr because of how the customization page is made. Because of a single error your theme’s code gets broken and you can’t see it right...
What is it technically?
The customization page is a holder with options and your blog on the right is a frame with a preview of what it will look like. Every time you update an option a new frame is opened and hidden from you until it is fully loaded. Hiding then showing that frame makes the JavaScript go all ape s**t unable to get important values. This is a bug in Firefox known for a few years, but hadn’t been fixed yet.
So how to fix it?
Simple. Use a different browser to customize your blog, preferably a web-kit one such as Chrome, Opera or Safari.
But I like Firefox, isn’t there another solution?!
There’s is - either make Tumblr to use CSS visibility to hide the frame and not the display attribute or hope in vain for Firefox to finally get to it :)
I want to know more!
Go ahead and read the bug tracker, though I can guarantee it’s boring as all hell :)
Until now most of you used to highlight tags by manually adding links in your description - that’s old news.
Here’s how to create a tags option built in directly in your theme:
1. Go to your customization page and hit Edit HTML
1.1. IMPORTANT: Make sure your theme includes jQuery - hit the Gear button -> Find and Replace -> type in jquery. Search for a line of code that looks similar to this:
I was looking for a way to put a feedback form on my blog that would send messages directly to my e-mail, has lots of features and does not require Tumblr login when I found this very descriptive answer on Quora by Dan Goodswen.
He's suggesting an online service by JotForm which is FREE and has every option you would ever need plus a bunch of cool templates if you don't feel like styling your own form.
Moreover the service is not limited to contacts / feedback form - you can also make registration, payment, order and whatever-your-heart-desire form!
Changing Like and Reblog button colors (revisited)
I wrote an article about this in the past and for the time and though it was a clever idea. However, it came to my attention that there is a better if not perfect solution (well to be fair it would've been perfect if the like button wasn't an iFrame, but anyway...).
The Reblog Button
This is the easier of them two and is pretty straight forward.
Create a parent element (div), call it .reblog-button and put the button code inside it
Now with CSS we are going to position the like button above the SVG image and make it invisible when it's not liked.
.like { /* Make a parent element */
position: relative;
}
.like svg path { /* Select your color of choice */
fill: #563d7c;
}
.like .like_button { /* Position like button above your custom one */
position: absolute;
top: 0;
opacity: 0;
}
.like .like_button.liked { /* Keep the functionality active */
opacity: 1;
}
That's it! :) And the cool part is that the functionality of the like button is still there and it will go red once liked or be red if it is liked already.
Once again a huge credit to @mikedidthis for the general idea of this solution.
Recently I've made and submitted a little code for "FontAwesome icons with animation" (HTML & CSS3) that was featured on CodePen and got a lot of positive reactions. Check it out on codepen.io, you might like it and use it on in your theme ;)
Javascript/Jquery in post notes? Why are the docs so unhelpful?
I've been trying to add JQuery to post notes and it turns out it's much more confusing than it should be! There's very basic info on Tumblr docs and almost nothing on the web. An example wouldn't hurt now would it?
Anyway - here's how to do it:
There are 2 functions used for such occasions tumblrNotesLoaded(notes_html) and tumblrNotesInserted()
First function is triggered when notes are loaded (and before the "load more notes" button is pressed), but are not yet inserted in the DOM and the second one is triggered after everything is done.
More here: https://www.tumblr.com/docs/en/custom_themes#notes
Now first of all you need to define each function and what should happen when triggered
function tumblrNotesLoaded(notes_html) {
/* You JS/JQuery goes here */
}
function tumblrNotesInserted() {
/* You JS/JQuery goes here */
}
Now after you've defined the functions and added your custom code all you need to do is call them in a document ready function
