Styling of the reply text in a post

Hosting on Micro.blog
1

I just noticed the “Add reply text box on post page” options in Micro.blog and enabled it. However the look and feel of that section on a post is not in sync with the rest of the site. I have checked the themes settings to identify where I can style it, but I am unable to locate.

Could one of you help me in styling that section. Thanks.

1 Like
2

Most themes haven’t been updated to provide a good default style for the reply box, but I checked out your blog and pasting in this CSS should make it look better. Under Design → Edit CSS.

.microblog_reply_textarea textarea {
	border: 1px solid lightgray;
	width: 100%;
	padding: 8px;
}

.microblog_reply_button input {
	background-color: rgba(var(--dark), 0.05);
	padding: 8px;
	border-radius: 5px;
}
3

Thanks @manton, it definitely looks better. I will play around and see how to tweak it further. Thanks.

4

I have used the following code to style the text for my theme - Paper

.microblog_reply_signin { 
    font-size: 2.2rem;
	line-height: 1.8;
}

.microblog_reply_signin a {
 --   color: #007BFF; 
    text-decoration: underline;
--	font-weight: bold;
}

.microblog_reply_signin a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.microblog_reply_textarea textarea { 
	border: 0.25rem solid lightgray; 
	width: 100%; 
	padding: 1rem; 
	border-radius: 0.5rem
} 

.microblog_reply_button input { 
    display: inline-block;
    font-weight: 500;
    line-height: 5rem;
    color: var(--lit);
    background: rgba(var(--dark), .05);
    border-radius: .5rem;
    padding-inline: 2rem;
}
5

Is it possible to move this reply section above the post navigation? Like what should I add in the /layouts → single.html template?

6

The position on the page is controlled with the {{ if .Site.Params.include_conversation }} section of code. That shows any existing replies to your post as well as the reply text box. You should be able to move those few lines including the <script> tag anywhere in the template.