#code tutorial

The explanation, finally.

This explanation goes into both the code aspect of making the game as well as the art aspect. I suggest reading both sections as the art and the code does intertwine and you'll need to coordinate them both so that your dress-up game doesn't encounter any issues. The game uses only html and css (using draggable divs), as well as specifically placed images. You will need to know at least some html and css, and if you want your dress-up game to be played by others it will need to be hosted on a website of some kind (neocities is free!)

~ The code ~

There are two parts to this code, the css part which tells us what something is meant to look like (height, width, alignment etc), and then the html part which tells us what is actually on the page (the doll and the clothes, for example, which are all png images) and how it all acts. I'll start with the css first since it will give us context to what is happening in the html code.

.dragme { display: inline-block; } #field { height: 1000px; max-width: 800px; text-align: right; align-content: right; }

This simple code is doing two things:

We are giving a name to what will soon be the draggable div (we've called it "dragme")

We are specifying how big the "play area" of the dress up game is (called #field) and where all the clothes will default to being placed when their position isn't specified (they will be placed on the right side of the play area).

You'll notice that I made the height 1000 pixels high and 800 pixels wide. This is the exact size of the "doll" I have made, which is basically just a png of bruce in his underwear in front of a lavender background. So, the #field and the actual image used for the doll have to be the exact same size.

Now that we've gone over what the css code is doing, we can look at what the html code is doing. Here is a very basic example of two lines of html code in my batman dress-up game. We're starting with the play-area code first.

<div id="field" style="background:url('/graphics/dressup/batman/doll.png');>

This is rather simple to explain. We have a div which we've given the ID as being the play area (#field) and styled it to have an image as the background, which is our almost-naked bruce in front of a light purple colour. We do not close the div until we've put all of the clothing code into the page, which we're going to look at now.

<div class="dragme ui-draggable" style="position: relative; bottom: 180px; left: 64px;"> <img src="/graphics/dressup/batman/SHIRT-beyond.png" style="margin-left: -100px;"> </div> <div class="dragme ui-draggable" style="position: relative; bottom: 230px; right: 8px;"> <img src="/graphics/dressup/batman/SHIRT-grey.png" style="margin-left: -100px;"> </div>

As you can see, I have two lines of code that look very similar to each other. Each corresponds to an item of clothing. The first one is the batman beyond shirt and the second one is the basic batman shirt. They look like this.

The first line of code will show up as the black shirt, and it will be on the bottom-most layer. The grey shirt (the second line of code) will show up on top of it. So, you have to essentially make a list of clothing types, which layers you want them to be on, from bottom to top, and then place the code in that exact order to ensure that you don't get any weird clothing clipping going on (such as skinny pants ending up on top of big chunky combat boots, which isn't how clothing usually works lol).

But what is the code actually doing? Let's examine.

First, we've classified the clothing as a div that is draggable, by using div class="dragme ui-draggable" at the start. Then, we have the style, which dictates the exact position that each clothing will have on the page. Two things to note here:

Each clothing will have different positions. When you put in the clothing code without specifying where all of the individual clothes are meant to go, it looks like this.

You can see that all of the clothing to the top left is the code that came first, and the clothing to the bottom right are the last lines of clothing code. Which is why you need to specify for each individual bit of clothing where it's going to go- the amount of pixels that it has to move is being based on its "original position" as seen in the above image.

With the "bottom: ---px;" and "right: ---px;" code, you need to understand that despite the name "bottom" and "right", we are not actually pushing the image down or to the right. It's about how many pixels we have placed on the "bottom" and "right" of the image. Meaning, we're actually pushing the image UPWARDS and to the LEFT. It's like we put an invisible box that was a certain height of pixels, and placed the image on top of it, and then we placed an invisible box to the right of the image, which made the image move to the left. That's kind of what we're doing. You'll also notice that I pushed one of the images right instead of the left, and that is due to the fact that the piece of clothing was actually too close to the other shirt, so I wanted it to have some space.

Then, of course, we have the image code itself which is pretty self-explanatory:

<img src="/graphics/dressup/batman/SHIRT-grey.png"

- but we've added some more styling to it.

style="margin-left: -100px;">

You'll notice that unlike with the styling of the div, the styling of the image is the SAME for both of the clothing items. This is to ensure the clothing can overlap each other at an even rate when I'm putting the initial clothing code into the dress-up webpage. It pushes the images closer to each other and overlaps them before I add any additional positioning with the code we looked at earlier. Because otherwise it looks even worse and more chaotic than the image I showed before. The clothing goes off the entire page, basically. Almost all the clothes have the margin go left and be -100px except for the three capes which ended up being -200px because they are the largest clothing items in my dress-up game and needed more overlapping to occur so they would fit on the same page, lmao.

That's the gist of the code and how it works. The two lines of code essentially get repeated, with the url's for the code being different for each clothing article, and the positioning of each clothing being different. Below is a blank example of all of these bits of code put together. If you chose to use this as a template, just keep in mind you will probably need to edit it significantly to get all the clothes positioned correctly.

CSS - this can go in the css file, or in the html file with the <style> tag. If it's going in the html file, have it be placed before the <body> tag.

.dragme { display: inline-block; } #field { height: ----px; max-width: ----px; text-align: right; align-content: right; }

HTML

<div id="field" style="background:url('URL FOR YOUR DOLL GOES HERE');"> <!-- clothes go below this. the code below can be copied as many times as needed. --> <div class="dragme ui-draggable" style="position: relative; bottom: ---px; left: ---px;"> <img src="URL FOR THE CLOTHING GOES HERE" style="margin-left: -100px;"> </div> <!-- end of clothing. --> </div>

All of the "---px" is where you will have to figure out how big you want the field to be, or how you want the clothes to be positioned. Also, you may find that instead of using "left" you may need to use "right" instead, based on where you want the clothing to go. Just experiment and see what happens! This is where a coding program like phoenix code or something else can come in handy, since you can see all the changes that happen to your dress-up game in real-time (something I absolutely required for this project).

okay so that's the code explained to the best of my ability. Now onto the art.

~ The Art ~

As was mentioned before, the code for the play area (#field) was the same height and width as the "doll" that we're dressing up. The best way to go about making a dress-up game using the code above is to first plan out the basic sketch of the doll and the clothes, and where you want them all to go and how many you're going to have. Kinda like this picture here.

Once you're certain of the canvas size for your dress-up game, keep a note of its height and width (in pixels). Those will be the numbers you put in the #field area of the css code.

The first thing you should draw is the doll itself. The character and the background should be one png image, like this.

Then, it's onto the clothes. I suggest drawing the clothes over the top of the doll, so you know that the clothes will fit the doll. I also suggest making the clothing somewhat larger than the doll itself, so you do not have to be ultra precise when you're dressing up the doll. This is a mistake that I made with the Batman dress-up, which annoyed me greatly and made it harder for players to place clothes as they had to be very accurate for it to look nice and not weird.

Each clothing article will need to be its own png image, with a transparent background. I suggest ensuring that you've cropped it so that there is no extra canvas beyond the lines of the clothing. If you're a crazy person like me and want to add shading and lighting to the clothes…just remember that you will be combining the layers at the end to create the png, so be prepared for a lot of work.

You also don't really "need" to draw the art if you don't want to. The person who created the original code, sillybeanies, did so using pictures of their beanie babies and finding images of clothes online which they then photoshopped in order to fit the beanie baby dress-up doll. You can kinda just do whatever you want. But I'm an artist so I chose to draw my game instead.

After you've drawn all of the art, you need to save it all as pngs and then host them somewhere. Either the website itself or on a place like file.garden. Do not host your shit on discord, those image urls are temporary and you will quickly end up with an empty webpage. Then, it's as simple as putting the image urls into the code that I showed above into your dress-up webpage. But uhhh I'm not gonna get into the details of how you run/code a website, I just figured if you're reading this you probably already have one or are going to make one at some point.

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.

Com exceção dos meus codes mais antigos, as cores devem estar no início, prontas para editar. Algo assim:

--line-color: #181818; --line-text: #dadada; --bg-color: #f0f0f0; --text-color: #131313;

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 é?

 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. 

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;}

Unless the code is older, the colors should be in the beginning, ready to edit. Something like this:

--line-color: #181818; --line-text: #dadada; --bg-color: #f0f0f0; --text-color: #131313;

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?