#blscoding

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 :)

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 */

Hello!

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