#tumblr theme tutorial

[lyrasthemes]

Coding Tutorial - Permalinks, Tags and Notes

I found this helpful so I wanted to share

Source: https://themesbyeris.tumblr.com/tutorial07

I couldn't reblog so I'm reposting.

Permalink

We are going to start this part of the tutorial by adding in the permalink. If you don’t know what that is already, it is the thing you click to go to view a post on an individual page. Tumblr makes this really easy. All you need is the following piece of code:<a href="{Permalink}">Text</a>

You can replace the word “Text” from the example above with an image, a note count, the date, or anything else text-based. For example, if we wanted the permalink to be displayed in dd/mm/yyyy format, we would write:{block:Date}DayOfMonthWithZero}/{MonthNumberWithZero}/{Year}{/block:Date}

Tip: Always wrap the date in the “block:Date” tags otherwise the date will show up on ask/submit pages too.

Here are a few other formats:{MonthNumberWithZero}-{DayOfMonthWithZero}-{Year} = 04-10-2012 {DayOfWeek}, {DayOfMonth} {Month} {Year} = Tuesday, 10 April 2012 {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, '{ShortYear} = Apr 10th, '12 {12Hour}:{Minutes}{AmPm} = 3:00pm {12HourWithZero}.{Minutes}.{Seconds}{CapitalAmPm} = 03.00.00PM {24HourwithZero}{Minutes} = 1500 {TimeAgo} = 1 hour ago

[Click here for all the ways you can format the date]

I will be using the {TimeAgo} tag for this example. But I also want to include in the permalink the notecount. This one is easier because there’s only two options for it.{NoteCount} = 1,938 {NoteCountWithLabel} = 1,983 notes

Naturally, this is also wrapped in those pesky block tags. This time it’s “block:NoteCount”. So if we put both the date and notecount together with the word “with” between them, it will look like this:<a href="{Permalink}"> {block:Date}{lang:Posted TimeAgo}{/block:Date} {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount} </a>

What we’re going to do with this piece of code is wrap it in a div and call it “permalink”, then put that div right after our main content, inside the “block:Post” tags (this is important).{block:Posts} ... [All your post types here] ... <div id="permalink"> <a href="{Permalink}"> {block:Date}{lang:Posted TimeAgo}{/block:Date} {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount} </a> </div>

Now that it is wrapped up in a div, we can style it. We don’t need to do much for this theme, since we did a lot of the styling in the content tag. The only things we need to specify here is the size of the font, and use the margin property to make a space between the permalink and the post above it.#content #posts #permalink { font-size:9px; margin-top:10px; }

Tags

The basic code for tags is this:{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}

Tumblr also gives us an extra block tag called “block:HasTags” since not all posts have tags. If you add in a pretty box or image for tags, it is not a good idea to have it still display when there are no tags at all. In this case I will be adding a div with the label “tags”, and putting this inside the secondary block tags.{block:HasTags}<div id="tags"> {block:Tags} <a href="{TagURL}">#{Tag} </a> {/block:Tags} </div> {/block:HasTags}#content #posts #tags { font-size:9px; }

Now I am going to show you a little trick. At the moment we have formatted the tags so that they will show up like this:

#tag one #tag two #tag three

But what if I want them to show up like this?

tag one, tag two, tag three.

Do you see the problem there? The last tag ends with a fullstop instead of a comma. The following would not work:{block:Tags} <a href="{TagURL}">{Tag}</a>,  {/block:Tags}.

(Take note of the full stop outside of the “block:Tags” tag.)

tag one, tag two, tag three,.

Here’s a little trick to get around that. Just copy this code:{block:Tags} <a href="{TagURL}">{Tag}</a><span class="comma">, </span> {/block:Tags}.#content #posts #tags .comma:last-child { display: none; }

It’s the “last-child” bit in the CSS that tells the browser not to display the comma if it’s the last one in the line. We also used “span” instead of “div” because if we’d used div, it would have made a line break, which we don’t want in this case.

tag one, tag two, tag three.

Note Container

The note container is the bit where it lists everyone that has liked or reblogged a post, along with their comments if they made any. Naturally it only shows up on the permalink pages.

This one is going to be done a little differently to the previous two, and be placed outside the “posts” div we created (but it still has to be inside the “block:Posts” tags).{block:Posts} <div id="posts"> ... [A lot of stuff in here.] ... [Permalink] [tags] </div> [<--closes the "posts" div] Note Container {/block:Posts}

Note that you don’t HAVE to put the note container outside the “posts” div, it can be inside if you want. This is just how we’re doing it for this theme. All this means is that it won’t be inside those white boxes we made for each post.

The HTML part for this is simple. Just some block tags, and {PostNotes}. I have wrapped this in a div so we can style it using CSS.{block:PostNotes} <div id="notecontainer">{PostNotes}</div> {/block:PostNotes}

Now since we took the note container outside of the “posts” div, we need to re-establish the width and margins. A font size also needs to be specified here since that isn’t specified in any parent tags.#content #notecontainer { margin: 20px auto; width: 500px; font-size: 11px; }

Now if you look at the theme, you will be able to click through to the permalink pages and see the notes as a list. If there are a lot of notes, they will be labelled 1-50, and number 51 will contain a “Show More Notes” link. Having it numbered is the tumblr default, but it doesn’t actually look nice. We are going to go ahead and access the list using a built in tag called “ol.notes” (ol = ordered list, numbered list), and apply a property called “list-style-type” to remove the number system. I am also going to get rid of the default margins and padding that comes with the list, but padding can be added if you prefer to have the lines more spaced out.#content #notecontainer ol.notes { list-style-type: none; margin: 0; padding: 0; }

Lastly I am going to edit the little avatar next to each note. At the moment there is no space between the avatar and the name of the blogger, so I’ll be adding in a 10px margin. Plus just to be on the safe size I will include the size of the images.#content #notecontainer img.avatar { margin-right: 10px; width: 16px; height: 16px; }

Click here to see the code so far, and here for the live-preview.

In the next tutorial we will be finishing up this basic theme with adding in pagination and infinite-scroll. Then I will move on to tricks to make things look pretty like transition-effects.

[swordofmoonl1ght]

Tutorial: Stylizing Your Pinned Post in your Tumblr Theme

This tutorial is really old and ALSO I didn't know much about css and html so there are some pretty laughable mistakes in here. Please hang tight while I get this updated.

As of May 2020, we’ve been able to pin posts on our blogs. Cool! The problem is that any themes made before May 2020, and maybe even some made after, don’t have any indicators as to whether the first post is a pinned post or not. So, in this basic tutorial, I will be explaining how to stylize a pinned post, which will take us from this:

No indication whatsoever it’s pinned, oh no!

to this:

Clear indication it’s the pinned post!

STEP 1: HTML

Go to Edit Theme, then Edit HTML.

Paste the following into your code after <div id=”entries”>, <div id=“posts”> or <div id=“articles>, <entries>, or <article>. If you don’t know where that is, try pressing CTRL+F and typing {Block:Posts} and you will be taken close. If none of those div’s are there, then simply put this after {Block:Posts} but before {Block:Text}:

here it is on the theme I was using: 

{block:IndexPage}

{block:PinnedPostLabel}<hr><div class="pin-post"><img src=‘YOURIMAGEURLHERE’></img> {PinnedPostLabel}</div><hr>{/block:PinnedPostLabel}

{/block:IndexPage}

Tweaks: Paste a permalink to the image you want to use next to the “Pinned Post” label in place of YOURIMAGEURLHERE, leaving the quotation marks in tact. You can use whatever image you like, but I advise it be square and transparent, otherwise you will need to alter part of the code in the next step so it will fit.

Remove both instances of <hr> if you do not want the horizontal lines above and below the “Pinned Post” label.

Take out <img src=‘YOURIMAGEURLHERE’> if you don’t want to insert an image and would like the label to be text-only.

Make sure any addditions are made to the HTML here (bolding text, adding a link, etc) are made within the confines of {block:PinnedPostLabel) and {/block:PinnedPostLabel}; otherwise, they will affect every post on the index page. For instance, I tried to make mine bold, and when I did, I forgot to put </b> before {/block:PinnedPostLabel} and all the text on all the posts became bold! Not what I wanted to do ^^’. But when I moved </b> before {/block:PinnedPostLabel}, the bolding stopped after “Pinned Post” and things proceeded as necessary.

STEP 2: CSS

Paste the following into your code before </style> (again, you can use CTRL+F to find where that is):

.pin-post {

   text-align: center;

   font-size: 1.2em;

}

here it is on the theme I was using:

.pin-post img {

   width:1.5em;

   height:1.5em;

   vertical-align:middle;

   display:inline-block;

}

Tweaks:

Add 

color: (hex code of whatever color you want); 

under .pin-post to change the color of the text of the “Pinned Post” label, and add or alter any variables as you see fit.

Change the width and height of .pin-post img to suit the ratio of your image (e.g. have them both 1.5em for a square image)

Update the preview to make sure it works, and stylize as you wish from here using basic CSS.

Please keep in mind I’m still learning when it comes to CSS, so I have a lot to learn. If you have any tips on how to make this look prettier, note them in the reblogs! Happy coding! 

Please leave a like and/or a reblog if you found this helpful. If any questions or concerns arise, pleae don’t hesitate to ask them.

[lyrasthemes]

Tumblr theme coding tutorial - Popup ask box

1. Find this

<a href="/ask">

Replace it with this

<a href="javascript:open('askbox');">

2. Find this

<body>

Add this, right AFTER it

<script type="text/javascript"> function open(askbox) { var askcontainer = document.getElementById(askbox); if (askcontainer) {askcontainer.className=(askcontainer.className=='closed')?'open':'closed';} } </script> <div id="askbox" class="closed"> <a id="askboxbg" href="javascript:open('askbox');"></a> <div id="ask"> <h1>{AskLabel}</h1> <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/__________.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--> </div> </div>

3. In the code above, replace the blank __________ with your username. For example I would replace the blank with lyrasthemes.

4. Next, find this

</style>

Add this, right BEFORE it

#askbox {position:fixed; z-index:20; width:100%; height:100%; background-color:rgba(0,0,0,0.75);} #askbox.open {display:block;} #askbox.closed {display:none;} #askboxbg {display:block; width:100%; height:100%; position:absolute; z-index:1;} #askbox #ask {width:500px; padding:20px; position:absolute; z-index:2; left:50%; margin:100px 0 0 -270px; text-decoration:none; color:black; background-color:white;}

Source

[lyrasthemes]

Sparkle cursor tutorial

Just paste the following code right before the part of your HTML under the customize section in Tumblr

https://www.snazzyspace.com/tumblr/mouse-sparkles.php

[smolthemes]

Another Music Post Tutorial

There are a lot of good music tutorial posts out there,so I thought I’d toss mine in this nice pile as well. I’m going to try a new style (new to me). Let me know if this is more or less confusing.

This is what we’ll be creating

There’s a few components to this music player:

The album art

The actual music

the information

We’re going to store the three aforementioned information in divs. Divs can be best thought of as boxes. You can store boxes on top of each other, next to each other and inside of each other. The main div/box is going to house the music and the information about the music. Inside the main div will be a div for the music and ul for the music information.

<div class="musicmain"> <div class="musiccontent" style="{block:AlbumArt} background:url({AlbumArtURL}); {/block:AlbumArt} -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> {AudioPlayerWhite} </div> {block:TrackName}* <span class="info">{TrackName}</span> ` {/block:TrackName} {block:Album}* {Album} {/block:Album} {block:Artist}* {Artist}

`Think of this as a basic framework of a house. The main div is “musicmain”. It is helpful to give your divs a name that you will understand a few months from now. This is the room that contains music. Inside this is “musiccontent”. This includes the album art and the audio play {AudioPlayerWhite}.

The style is quite literally what we use to make our divs look nice. It is called CSS, which stands for Cascading Style Sheet There are a few ways to add the CSS style. You can add it in a < style > tag, which looks like this:

`<style type="text/css" scoped="scoped"> your styles here </style>

You can link to an external file:

<pre>`link rel="stylesheet" type="text/css" href="your style link"/> `</pre>

Or as in the code way above, you can use inline (that’s when you style things in the div tag). Generally speaking, you don’t want to do this but for Tumblr, we have to. Why? Because album art is only applicable to music posts. We specified in the inline style that we want the album art to be the background of this div and that we also want the album art to stretch through the entire div.

With CSS, we’re going to tell the Divs and Uls how to behave.

.musicmain {clear:both; background-image: linear-gradient(to right top, //creates a linear backround #e89cac, #fad6ab); display:flex; //were going to use flexbox /*** read about it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ***/ } .musiccontent { width:50%; /*** this div is only half as wide as the maincontent div it is an element in musicmain It will be automatically aligned to the right because it is a flex object. All elements in musicmain will be automatically distributed in the div ***/ padding:10%; margin:none; position:relative; -webkit-background-size: cover; //here we reiterate what was already in the inline CSS. -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .music_menu { margin:0px; padding:0px; list-style:none;//gets rid of the bullets padding-top:5%; padding-bottom:5%; width:50%; /** music_menu is the name of the unordered list. It is half the size of musicmain. Similar to musiccontent, it will be automatically floated because it is a flex object ***/ background-image: linear-gradient(to right top, #e89cac, #fad6ab); } .music_menu li { list-style:none; //gets rid of bullets margin: 0px; //gets rid of default padding margin-bottom:4px; text-decoration:none; //gets rid of default styling font-size:18px; font-family:verdana; padding:3%; } .audio_player {width:90px; height:27px; padding-top:30px; padding-bottom:60px; padding-left:20px; background:#f2f2f2; border-radius:50%; margin:0 auto; } .tumblr_audio_player {width:60px; }

Let’s take care of the music information. The set of information doesn’t depend on order so we are going to stick it in < ul >. The UL stands for unordered lists. We need to make sure the width is 50% that way the music player and information will sit next to each other.

Now let’s style the music player.

The default player is a long rectangle To get the end result, we need to squish the player to make it less wide. We can’t actually get it to be round so we’re going to put it on top of a circle (that’s the same color as the music player).

Let’s put all this together: Here’s what you’ll want between your < style > tag:

<style type="text/css" scoped="scoped"> .musicmain {clear:both; background-image: linear-gradient(to right top, #da677f, #fad6ab); display:flex; } .musiccontent { width:50%; padding:10%; margin:none; position:relative; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .music_menu { margin:0px; padding:0px; list-style:none; padding-top:5%; padding-bottom:5%; width:50%; background-image: linear-gradient(to right top, #da677f, #fad6ab); } .music_menu li { list-style:none; margin: 0px; margin-bottom:4px; color:{color:link hover}; text-decoration:none; font-size:18px; font-family:verdana; padding:3%; } .audio_player {width:90px; height:27px; padding-top:30px; padding-bottom:60px; padding-left:20px; background:#f2f2f2; border-radius:50%; margin:0 auto; } .tumblr_audio_player {width:60px; } .info {background:white; padding:2%; } </style>

And here’s what you’ll want between your audio block {block:Audio}.

{block:Audio} <div class="musicmain"> <div class="musiccontent" style="{block:AlbumArt} background:url({AlbumArtURL}); {/block:AlbumArt} -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> {AudioPlayerWhite} </div> {block:TrackName}* <span class="info">{TrackName}</span> {/block:TrackName} {block:Album}* <span class="info">{Album}</span> {/block:Album} {block:Artist}* <span class="info">{Artist}</span> </div> {block:Caption} {Caption} {/block:Caption} {/block:Audio}

Let me know if anything is confusing or if the code isn’t working! Hope you found this useful

For further information visit the Tumblr theme documentation page

[axialthemes]

How To Make a Tumblr Theme

If you don’t want to use any of the thousands of existing tumblr themes made for you to use (including my themes) and want to try your hand at making one for yourself, then I have prepared a helpful guide for people with no knowledge of web development whatsoever. 

To make a Tumblr theme from scratch the first things you must know about are coding languages HTML and CSS. They are what Tumblr themes and most of the web are made out of and you really aren’t going to get far without them. HTML is basically the structure of a website and CSS gives it colours, borders, spacing and other styling. A site I would recommend for learning HMTL and CSS is Codecademy. Create an account and do the “HTML & CSS” course to begin with to get your head around what they’re all about. The cool thing is you’ll have learnt a super transferable skill in learning those languages as like I said, most of the world wide web is made out of them so you’re not only learning how to make a Tumblr theme but a lot of the internet as well.

Once you’ve done that you should have enough knowledge to start putting together a basic theme. Go to your blog (creating a sideblog to play around with might be a good idea), click “Edit theme” in the top right hand corner and then click “Edit HTML”. You probably have a theme installed on that blog so delete all the code that’s there and voilà - you have a blank canvas on which to construct your own tumblr theme. In the Codecademy course you should have learned the basic structure of a website is something like this:

<!DOCTYPE html> <html>

<head>    <title></title> <style>

</style> </head>

<body>

</body>

</html>

So now’s a good time to put that code in. The way that you insert things like blog titles and actual tumblr posts is using the special operators tumblr has made for us, for example {Title} will insert the title of the blog using the theme. Read through tumblr’s theme documentation to learn about this. Now you can go through putting in all the things you want and styling them how you want. Here’s a simple base code you can use if you want to skip ahead:

<html>    <head>        <title>{Title}</title>        <link rel="shortcut icon" href="{Favicon}">        <link rel="alternate" type="application/rss+xml" href="{RSS}">        {block:Description}            <meta name="description" content="{MetaDescription}" />        {/block:Description} <style> body { } h1 { } blockquote { } #description { } #posts { } .post { } .caption { } #footer { } </style> </head>    <body>        <h1>{Title}</h1>        {block:Description}            <p id="description">{Description}</p>        {/block:Description}        <di id="posts">            {block:Posts}{block:Text}                    <div class="post text">                        {block:Title}                            <h3><a href="{Permalink}">{Title}</a></h3>                        {/block:Title}{Body}                    </div>                {/block:Text}{block:Photo}                    <div class="post photo">                        <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>                        {block:Caption}                            <div class="caption">{Caption}</div>                        {/block:Caption}                    </div>                {/block:Photo}{block:Panorama}                    <div class="post panorama">                        {LinkOpenTag}                            <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>                        {LinkCloseTag}{block:Caption}                            <div class="caption">{Caption}</div>                        {/block:Caption}                    </div>                {/block:Panorama}{block:Photoset}                    <div class="post photoset">                        {Photoset-500}{block:Caption}                            <div class="caption">{Caption}</div>                        {/block:Caption}                    </div>                {/block:Photoset}{block:Quote}                    <div class="post quote">                        "{Quote}"                        {block:Source}                            <div class="source">{Source}</div>                        {/block:Source}                    </div>                {/block:Quote}{block:Link}                    <div class="post link">                        <a href="{URL}" class="link" {Target}>{Name}</a>                        {block:Description}                            <div class="description">{Description}</div>                        {/block:Description}                    </div>                {/block:Link}{block:Chat}                    <div class="post chat">                        {block:Title}                            <h3><a href="{Permalink}">{Title}</a></h3>                        {/block:Title}                        <ul class="chat">                            {block:Lines}                                <li class="{Alt} user_{UserNumber}">                                    {block:Label}                                        <span class="label">{Label}</span>                                    {/block:Label}{Line}                                </li>                            {/block:Lines}                        </ul>                    </div>                {/block:Chat}{block:Video}                    <div class="post video">                        {Video-500}{block:Caption}                            <div class="caption">{Caption}</div>                        {/block:Caption}                    </div>                {/block:Video}{block:Audio}                    <div class="post audio">                        {AudioEmbed}{block:Caption}                            <div class="caption">{Caption}</div>                        {/block:Caption}                    </div>                {/block:Audio}{block:Answer}    <div class="question"><div class="asker">{Asker}</div><div class="asker-question">{Question}</div><img class="asker-avatar" src="{AskerPortraitURL-96}" alt=""></div>    {block:Answerer}        <div class="answer"><div class="answerer">{Answerer}</div><div class="answerer-answer">{Answer}</div><img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt=""></div>    {/block:Answerer}    <div class="replies">        {Replies}    </div> {/block:Answer}{/block:Posts}        </div>        <p id="footer">            {block:PreviousPage}                <a href="{PreviousPage}">« Previous</a>            {/block:PreviousPage}{block:NextPage}                <a href="{NextPage}">Next »</a>            {/block:NextPage}            <a href="/archive">Archive</a>        </p>    </body> </html>

Remember there’s a lot more stuff you can put in than is in this code though - for example custom links and post sources. Do read through the linked documentation. I would also recommend checking out w3schools for loads of cool stuff you can do with CSS.

Once you’ve played around with it and really gotten to grips with how HTML and CSS work there are many ways to make your theme cooler. For example:

You can learn Javascript and Jquery (Jquery is essentially Javascript but made easier). With Javascript you can do things like make pop-up menus and make smooth scroll “back to top” buttons. Codecademy have courses, however, I found that it’s not a super nice course, so perhaps do some of it to get the gist and then turn to other sites for tutorials on how to do what you want to do with it.

Learning how to make responsive websites that adapt to different screen sizes is really a must in the days of smart phones and tablets - although most people have the default mobile theme switched on so when it comes to tumblr it doesn’t matter so much. It is cool having something else other than the default theme though, so you might want to learn about the whole @media(min-width:500px) { } thing. Searching “How to make a responsive website” might be good place to start. You can also learn about Bootstrap which makes it easy to create slick looking, responsive websites/themes.

Another thing that’s usually on a web developer’s mind is coding so that the website loads as fast as possible. No-one wants to be sitting there waiting for your blog to load. Things like reducing the size of your image files and optimizing JS and CSS files can make your page load faster, check out some tips here. 

Also check out my tumblr theme making tips for how to best use tumblr’s built in operators.

There’s much more in the world on web development so don’t be afraid to go out and explore all possibilities and remember that when all is said and done the main thing is that coding and design are all about trial and error and googling your problems. I hope this guide has been at least somewhat helpful in your quest to build your own tumblr theme.

[vipercute-blog]

HTML Basics

Bold Text: <b>text</b> Italic Text: <i>text</i> Underlined Text: <u>text</u> Strike Through : <s>text</s> Image: <img src="url goes here">

Center text : <center>text</center>

Change color : <font color="htmlcolor">text</font>

Changing size : <font size="2">text</font>

Changing color AND size : <font size="2" color="htmlcolor">text</font>

Making a link open in a SAME window : <a href="http://url.com">name</a>

Making a link open in a NEW window : <a href="http://url.com" target="_blank">name</a>

[learntocodewithme]

GA Dash introduces a Tumblr theme tutorial that doesn't totally blow. But it still could have been done a bit better.