In an effort to learn more, I have decided to teach more. Today's lesson ? How to make an object float up and down in css. In this case, we'll make this cute "window popup" float up and down like shown above. First I'll be showing you the general set up and then getting into the floating css properties. Feel free to skip part one and two if you don't need it.
.resources.
-> github
-> font used
-> more info on css animations
.part one. -> general set up
First, you'll start by creating a folder. You can name it what you'd like but I chose "floating" (as it's inside a css tutorial folder). Then open up VS code and open that folder. Now you'll create two files ! one "index.html" and one "style.css". Perfect !
Here's a step by step of what to do next
☐ Type in html and choose "html boilerplate"
-> this will generate a standard html template, mine had some extra comment stuff i just deleted (to be honest)
☐ Look in between the <head> and </head> tags and look for <link rel="stylesheet" href" "> Now add style.css in between the empty " "!
.part two. -> adding your object
I won't be showing you a step by step of this part today. Instead I left plenty of comments within the code that you can use as a guide if you need. We're going to focus on the css animation instead.
You can add your own object if you'd like to, but it isn't necessary. Style it however you'd like. I do recommend having it's position as "absolute" which is css for "i can do whatever i want and you can't stop me". The github has the complete code for you to copy and paste. Here's what is important for this particular example.
^ The window that is holding everything (or your main div for whatever is floating) needs to have the class="floating". Because we will be using that class in our css to make it float!
and finally... once you have your object positioned where you want and styled..
This is what will make it float up and down. That's literally it. You may have to watch out for different conflicting things and debug if your project is more complicated. But this is what made my little popup window float ~!
You can change this to a horizontal "float/ease" by using "translateX" instead. And to control how fast it goes, change the "3s" to whatever you'd like. Want it to move higher or lower? fiddle with the "10px" !
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.
Guia indicado para: qualquer nível de dificuldade, incluindo iniciantes.
Nesse tutorial vou dar umas dicas para mudar as cores de um template, incluindo a forma como eu própria os edito (e que não vivo sem). O tutorial é feito tendo em conta os meus templates, mas algumas dicas podem ser aplicadas em vários outros.
Com exceção dos meus codes mais antigos, as cores devem estar no início, prontas para editar. Algo assim:
Repare em todos os símbolos #. Isto é um prefixo para qualquer cor. Se vir um # no código, o conteúdo a seguir por norma são 6 ou 3 letras e/ou números. Ou seja, essa é a representação de uma cor.
Para saber como escolher uma nova cor, de uma roleta de cores ou copiar a cor de algum ponto na página, incluindo imagens, continue a ler.
01. Escolher cores manualmente
Pode usar uma ferramenta para escolher cores como a seguinte: https://htmlcolorcodes.com/color-picker/
No topo da página, há um valor semelhante aos que falei acima, em que há um # antes de letras e/ou números.
Pode escolher qualquer cor que quiser, copiar esse valor e colar no código para o substituir. Se estivesse a editar a --line-color no código acima para esta cor que escolhemos, tornava-se:
--line-color: #FF5733;
Fácil, não é?
02. Copiar a cor de um ponto na página, incluindo imagens
Às vezes, você quer saber a cor específica de uma parte da página, como a cor de fundo. Ou então quer combinar a cor de um template com a cor de uma imagem (muito útil para assinaturas).
Para isto, é útil ter uma extensão que escolhe cores da página, como esta: eye dropper (para o Chrome)
Se clicar no botão da extensão, pode escolher com o cursor qualquer cor em que clicar. Se clicar no botão da extensão outra vez, pode lá ver a cor que escolheu.
03. Escolher e visualizar cores diretamente no template
Esse é para os corajosos (juro que não é difícil, só assusta no início) e é a forma como eu edito as cores. É a forma mais prática e inclui AMBAS as formas que eu falei acima. Se clicar com o botão direito na página do seu navegador e escolher a opção Inspecionar, vai abrir um menu do seu navegador.
Eu sei, ficou um pouco assustador. Calma que eu vou te guiar.
Clique no botão destacado na imagem abaixo ou aperte as teclas Ctrl + Shift + C. Isso vai abrir uma ferramenta que te permite selecionar um elemento da página.
Não clique em nada depois disso. Dá para ver que a ferramenta está a funcionar se mostrar cores azuis, verdes e/ou laranjas na página, seguindo o seu cursor. Agora tem de selecionar uma parte dentro do template. Tipo assim, em que eu selecionei o título do template.
Agora eu preciso que foque um pouco no código que aparece lá em baixo. A parte que você selecionou está destacada com um fundo azul e você só precisa de olhar um pouco para o que está ACIMA disso. Procure por o que diz id=" ... logo abaixo do e clique nessa coisa com id. É sempre isso. Sempre um id por baixo de um
Depois de clicar nesse id, o código que está do outro lado vai mudar.
Se você não percebe de códigos, isso não deve ser nada bonito. Mas repare que tem aqui uma estrutura semelhante àquele que vimos logo no início do tutorial e temos cores indicadas pelo mesmo #. Repare que antes desse # tem um quadradinho colorido. Essa é a sua cor! Clique nesse quadrado. Vai abrir um seletor de cores.
Então, você pode usar esse seletor para escolher a melhor que quiser. Assim que mudar a cor, vai reparar que no template ela também muda em tempo real. Fantástico para ver exatamente qual a melhor cor a usar, não é?
Mas fique avisado: mesmo que mude a cor, isso não vai ficar gravado no template. Copie a cor tal como antes e cole ela no seu código. Isso é bom, porque você não precisa de ter medo de editar nada que não devia. Quaisquer mudanças que fizer serão apagadas se refrescar a página.
hi. i'm using the Outlaw theme and I'd really like the notes/reblogs to show up when i click the post. how can i get that?
it’s actually pretty easy, but i personally didn’t learn how to code it in until my third theme code.
tumblr has standard blocks that are what is the components of their html that is styled by that lovely css that tends to get miles long. you want to use the post html down at the bottom, the part that’s all between {block:posts} and {/block:posts}.
to make it easier for you, i’ve updated the base code to contain it, but to add it to your own blog, here’s how.
first, replace your current permalink page css ( it looks like this. ) with this / add the following to it in the css section:
.notes { font-family: ‘font’; font-size: px; color: #000000; /* et cetera, it’s pretty easy to edit css */} of course, if you copy the above, you’ll have to edit in that css, but the link to pastebin is what i used to update outlaw.
next, after you have that, you replace your current html ( it looks like this ) with this / or add in
{block:PostNotes}{PostNotes}{/block:PostNotes}
you can edit the notes further, by using .notes a, .notes a:hover, .notes ol / .notes ul, .notes li and more or less other text stylings. it doesn’t really work with i or b, due to how the code works. i haven’t really tinkered with the permalink styling.
Guide indicated for: any level of difficulty, including beginners.
In this tutorial I will give some tips to change the colors of a template, including the way I myself edit them (and that I can't live without). The tutorial is done for my templates, but some tips might be applied to other templates.
Unless the code is older, the colors should be in the beginning, ready to edit. Something like this:
Notice how all these include the # symbol. This is a prefix for any color. If you see a # in the code, you can try to change what is after it, since it is a color.
To know how to pick a new color, either from a color picker or from anywhere in a page incluidng images, keep reading.
01. Manually pick colors
You can use a color picker like this one: https://htmlcolorcodes.com/color-picker/
You can see there in the top there is a value similar to the ones above since it has the # before the letters or digits.
So you can just pick a color you like, copy that value and then paste it in the code to replace it. If you were editing --line-color in the code above to this one we picked, it would become:
--line-color: #FF5733;
It's that easy!
02. Pick colors from anywhere in a page, including images
Sometimes you need to know a specific color from the page, like the background. Or you want to match the color of the template to a color in the image (useful for signature templates!).
For this, it's useful to have a color picker extension like this one: eye dropper (for Chrome)
When you click on the button for the extension, your mouse will pick any color you click on. If you click the button again, you can see the color there.
03. Pick and visualize colors directly on the template
This one is for brave souls (I swear it's not hard, just scary) and it's the way I edit colors. This is the most practical form once you get the hang of it and it includes both forms I talked about above. If you right click on your browser page and select the Inspect option, it will open a menu for your browser.
I know, it might be looking a little scary now. But I'll guide you through all the steps.
Click on the button highlighted on the image below or press the shortcut Ctrl + Shift + C. This will open a tool that allows you to select an element on the page.
Don't click anything else for now. You can see that this tool is working if it's showing blue, green and/or orange colors on the page, following your cursor. Now select a part inside the template. Like the print below, where I selected a part of the title.
Now I need you to focus a little on the code that is showing below. The part you selected is highlighted in blue and you need to look a little ABOVE it. Look for where it says id=" ... right below a and click on the id thing. That's always it. Always an id before a
After you click this id, the code on the other side will change.
If you don't know anything about codes, this isn't too pretty to look at. But notice how there's a structure similar to the one we've seen above, right in the beginning of this tutorial and we have colors represented by a # symbol. Maybe you saw this # has a colorful square right before it. That's your color! Click on this square. It will open a color picker.
So, you can use this picker to select a color again. But this time, when you click on a new color, it will change the color on the template immediately to match it. This is great to see exactly what the best color to use is, right?
But be warned: even if you change the color, it won't be saved to the template. Copy that color and paste it in the code, just as before. This is good, since you don't have to be scared to change anything here. If you refresh, all the changes you made will be lost.
