resources & design
Resources blog. Angel, 14, China. I code, I write, and I sleep a lot. That's about it. Here, you'll find resources of all kinds, from writing to coding to photoshop! I hope you'll find something that will be useful for you.
I’ve received a lot of messages asking how I made the SlideUp menu from my current theme, so I decide to make this tutorial. This effect involves html, css and JavaScript. I suggest you have at least a basic html/css knowledge.
Difficulty: CSS (easy) | HTML (easy) | JS (easy)
Preview:xx
An ongoing tutorial series for those who already have a basic understanding of making tumblr themes and hopefully find something new or different to try.
A while back I said I was going to post a tutorial on how to use custom fonts on tumblr. And what better time than now, after that latest update from Chrome is messing up font rendering.
Difficulty: CSS (easy) |HTML|JS
Extra Reading: @font-face rule, base64 encode, fallback fonts
Through this tutorial, I would like to teach you how to create an automatic slideshow. Implementing the slideshow is fairly easy, but if you want to achieve more developed effects, you should be comfortable with manipulating javascript. I will be using the files and scripts created and shared by ResponsiveSlides.js, credit goes to them.
TUTORIAL: FULL TRANSPARENT PERMALINKS
I’ve received quite a few asks about the hovering permalinks on my theme Rhea. So here is a quick and easy way to achieve this.
INSTRUCTIONS
Firstly you must add position: relative; into your #entry (it could also appear as #posts or something similar).
Then add one of these codes anywhere between <style type=”text/css”> and </style>
Finally, add one of these codes at the beginning of your posts. It should look something like this:
<div id=”content”>
{Block:Posts}
<div id=”entry”>
Code Here
{block:Text}COMMENTS
That’s it! You’re finished! Just be sure to change the width in #perma_hold to your post size and you should be fine. Feel free to customize it more if you feel comfortable, but be aware that I won’t be helping if you mess something up.
Please make sure that you read the tutorial fully, and also all the notes that I have in the folders. If you’re still confused just ask me.
But do not ask me how to create themes, how to create div containers, how to change colors, add pictures, etc. If you any have knowledge about css and html, then you really shouldn’t be asking me any questions
EDIT: You have to name your main div layer #content. YOU HAVE TO!
Necessary files | Ask box | TUTORIAL | Preview
HOW TO MAKE AN ARROW WITH CSS AND HTML:
An example can be seen in the header and questions on my Underwater theme.
Difficulty: Easy
SHOW AN ELEMENT ON SCROLL USING JQUERY:
Difficulty: Easy (though it is suggested you understand basic CSS and HTML)
Unfortunately, I am lazy and can’t be bothered to find which application on my computer records screens and then gif it, so please refer to this example. I recently used this technique in my Underwater theme, and was pleasantly surprised to find that it wasn’t as complicated as I thought it to be…
<meta name=”if:Enable Know Anon” content=”0” /><script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script><script type=”text/javascript” src=”http://media.pixellab.co/ka/script.js?user_id=1383302445&type=71214331{block:IfEnableKnowAnon}&enabled=true{/block:IfEnableKnowAnon}”></script>
Above is the “Know Anon” code that allows you to expose any hateful anons you wish at your own whim. If you know anyone who’s struggling with anonymous hate, reblog this for them.
- How to install
Simply copy the above code and paste it right after the <head> portion of the HTML coding on your blog. This is with the jQuery script included, so everything should be covered. Once you’ve done this, update and save, then exit your customize page.
Re-enter your customize page, and under “appearance” should be a button called “Enable Know Anon”, which may be on or off automatically, depending. Flip the switch to enable or disable it, then save.
- How to use
When you get anonymous hate or anon messages you find offensive, simply exit your Inbox, enter your Customize page, flip the switch to “on”, then save and exist. Re-enter your inbox, and any and all anonymous messages will be exposed with a URL, if they have one. Note that this includes everything, not just the hate. Another thing to note is that, once you expose anons in the inbox, you can’t un-expose them. Flipping the switch back to “off” does nothing.
Answer a message people thought was on anon, and gee, they’ll get a nasty little surprise, hmm? It’s better than a fake anonymous button because while you still can’t control who it exposes, you can control when to do so.
Remember though, that this isn’t the only way to stop anonymous hate. As always, there’s simply the “turn anonymous asks off” button. And thanks to the update from a few months ago, anons CAN be blocked.
That little hand right there? That’s the ignore button. It’s present on all asks sent, whether anon or otherwise. When you block an anon, you have the option to report them for spam or harassment, and it will permanently block them. It also blocks the IP address and computer, so that person can’t take advantage of extra accounts to continue sending you hate. It effectively wipes that person right out of your Tumblr life. They cannot contact your blog again, ever.
For the website that gives you the Know Anon code, with or without jQuery script, in case that causes trouble (most themes come with it pre-installed, but not all), go here.
[ Goodness, wow thank you very much for letting me know this existed! That was very considerate of you! ]
EVERYONE WHO HAS BEEN GETTING LITTLE NO-LIFE SHITHEADS BOTHERING THEM.
Here you go. <3
I completely forgot how the actual tutorial went so this is my own remake of it. Also sorry for the late replyLinks: All codes and instructions | Preview | Buttons
- Replace the tumblr controls codes with this. They can be found above </style> or CTRL+F tumblr_controls (image):
{block:IndexPage} #tumblr_controls {display:none;} {/block:IndexPage} {block:PermalinkPage} iframe#tumblr_controls { position: fixed !important; right:0px !important; -moz-transition: all 0.8s ease-out; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.8s ease-out; transition: all 0.8s ease-out; opacity: 0.5;} iframe#tumblr_controls:hover { -webkit-transition: opacity 0.7s linear; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; opacity: 1;} {/block:PermalinkPage}- Make a div id so we can position them. Put this anywhere in between <style> and </style> (I suggest above </style>). You can change “top” “right” to “bottom” “left” or just adjust them if you want them positioned elsewhere:
#tumblrcontrols{
position:fixed;
top:0px;
right:0px;
}- Now to make it visible. Put this under <body>. Replace the asterisks with quotation marks!:
{block:IndexPage} <div id=*tumblrcontrols*> <a href="https://www.tumblr.com/follow/blogname"> <img src="https://64.media.tumblr.com/tumblr_me6mt14hR81r66uyo.png"></a> <a href="https://www.tumblr.com/dashboard"> <img src="https://64.media.tumblr.com/tumblr_me6mt8NxMB1r66uyo.png"></a> </div> {/block:IndexPage}(NOTE: Change blogname to your URL)- Voila! Hope this was useful :)
