#blscoding

[todorokiscute]

Hello, I was wondering if you could a tutorial on how to make the ask as bubbles as yours and tumblr's :) thank you

Hi! I was a bit vague in this reply, right? sorry. I’ll try to make a simple tutorial.

Tutorial: Asks as bubble chat with arrows

First of all, search in your theme for {block:Answer} and delete everything to {/block:Answer} including this line. Paste this code instead:

{block:Answer}

{Asker}: {Question}

{Replies}

{/block:Answer}

Now, Let’s add the css before (if you had any question css, delete it, because if the divs name are the same it can cause some trouble):

/* question start by todorokiscute */.question{width:100%;position:relative;display:flex;}.ask{width:calc(100% - 70px); /* distance between the icon and the question*/background:;/* bubble/ask color*/padding:20px;position:relative;border-radius:3px; /* rounded bubbles*/}.ask::after{content:' ';display:block;border:13px solid transparent;border-left-color:; /* arrow color */position:absolute;right:-26px;top:12px;}.asker-avatar{width:50px; /* avatar width */height:50px; /* avatar height */object-fit:cover;position:absolute;right:0;border-radius:100%; /* rounded corners */}.asker b,.asker b a{color:black;/* color of the asker’s name*/font-family:''; /* font if you want to change*/} .replies{margin:1em auto; /* make the reply block a bit distant*/}/* question end */

You can edit as much as you want to. I advice to not edit or delete the lines in bold, though. They’re very important to make the whole bubble responsive or to work altogether with the arrow. Also do not remove the credits, since I came up with this alone :)

I hope this is easy to understand though. Any doubts don’t hesitate to send me asks.

[todorokiscute]

the problem is not the dark background (i think is charming), the problem is the new buttons controls (reblog/like/follow), that are blurred and the last button i can’t read what it is. Like the color is transparent the same as the background.

[todorokiscute]

Me: receives an ask. Write a big text (in english) replying, run to google translate and check if everything is correct.

[todorokiscute]

Hey! I've seen that the optica theme, the official, use its own captions blocks, which are not available in the docs. But a tumblr user did took that blocks and made a post but I seem to not understand where I should put the codes. Do you perhaps know that code and how to use? it seems I can't remember the user now. thank you.

Hello, I’ve received your ask weeks ago but only have the knowledge to reply now. 

Yes, I’ve seen people commenting on how tumblr has its own caption codes to not look ugly with all those blockquotes and it won’t update the documentation for us to use. The user you’re talking is bychloethemes and this is also the link to the undocs. 

I’ll try to explain how to use, let me know if you can’t understand or if I explained a bit vague. 

The default caption code is this:

{block:Caption}{Caption}{/block:Caption}

There are four block posts that use that caption block:

{block:Photo}{block:Photoset}{block:Audio}{block:Video}

So for these four blocks, all you have to do is search for the {block:caption} {caption} {/block:caption} code and replace with the following code:

{block:Caption}{block:NotReblog}

{Caption}

{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}

{block:IsActive}{/block:IsActive}{block:IsDeactivated}{block:IsDeactivated}{block:IsActive}{Username}{/block:IsActive}{block:IsDeactivated} {Username}{/block:IsDeactivated}

 {Body}

{/block:Reblogs}{/block:RebloggedFrom}{/block:Caption}

This code has to be followed by the end tag of the blocks mentioned above. ex: {/block:Photo} {/block:Video} etc…

For the Links posts (search for {block:Description} and delete until {/block:Desciption}) , you’ll use the same as the code for the photo, photosets, audio and video (above code), but you’ll have to change the

{Caption}

to:

{Description}

To add the captions to the answer block, use the same first code, and like the link post, change the

{Caption}

to:

{Replies}

Text posts are different, because they don’t have a caption block, they have a {Body} line. So search for the {block:Text} and find {Body}, delete and use the same previous code, just delete the first line {block:Caption} and the last line {/block:Caption} and instead of {Caption} change for {Body}. The code will be like this:

{block:NotReblog}

{block:AskPage}{/block:AskPage}{Body}

{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}

{block:IsActive}{/block:IsActive}{block:IsDeactivated}{block:IsDeactivated} {block:IsActive}{Username}{/block:IsActive}{block:IsDeactivated} {Username}{/block:IsDeactivated}

{Body}

{/block:Reblogs}{/block:RebloggedFrom}

To style the captions, the classes are:

.reblog-info{ } /* the wrapper to the icon and the name */

.reblog-info img{ } /* to apply css to the icon/avatar*/

.reblog-name{ } /* the name/link of the user who made the comment */

I tried this same codes in this blog and in my example blogs. But if anything goes wrong, let me know. Also, if the preview look funny, save and check the blog, because I was having an issue with the preview, and I thought it was some unclosed div, but when I checked the blog, it was normal. The captions will not show in the preview, only in the blog!

[todorokiscute]

How did you make the blog name has an arrow? Which tutorial you used, can you share it?

Hello, I just used ::before pseudo element to created a little square and rotate to appears like an arrow. Here’s an explaination.

[todorokiscute]

Hi, I used your tutorial on how to use instagiffer, but no matter what I do, the gifs are still heavy and tumblr won't post it.

Hello!

Have you tried turning off the ‘enhance’ effect on fx & filters? If you have, try to delete some frames, or turn on the extra gif compression at the settings tabs. If you are increasing the lenght (sec) number, your gif will probably be heavy. Try to keep 3 seconds and the maximum of 24 frames. You can also make the gifs 500px wide or less.

[todorokiscute]

Correct me if i'm wrong, but you used pseudo elements to make the arrow on your github page, right? But how did you make with borders?

Yes I used pseudo ::after. I’ll share some example codes, you can copy them and paste it in this editor to see them live.

You can try to use both ::after and ::before and make one of them as the same color as your box border color, a little bigger and position behind the first pseudo element so it will make a border. 

code

Or you can use one pseudo element and make a square with border, and use transform rotate do rotate it until it’s a pointing arrow. Making only to borders and letting two witouth so will merge with the box background color

code

Altough I’m used to use the first method first, the second is more cute and less blurry. 

[todorokiscute]

I remember years ago, when I tried to add the like and reblog buttons on my themes and used floats to make it look good, which never happened. I’m so glad flexbox exist, to be very honest. whoever made that possible, thank you.