A pretty text box

Apr 27, 2022 0 comments

In this article I will show you how to create a beautiful text box.

To do this you will need to add the following code in the theme settings, under Custom CSS:

.nice_textbox {
   padding: 0px 10px 0px 10px;
   border-left: 4px solid black;
   font-style: italic;
}

Then, in blog posts, you can use the following syntax to create text boxes:

<div class="nice_textbox"><p>This is a nice textbox</p></div>

to achieve this result

This is a nice textbox

If you need to add such a text box to the current blog post only, then you can edit the HTML code of the blog post and add the following lines, without modifying the custom theme CSS:

<style>
.nice_textbox {
padding: 0px 10px 0px 10px;
border-left: 4px solid black;
font-style: italic;
}
</style>
This is a variation of the above CSS code I use for the photo credits at the end of some blog posts:

<style>
.photo-credit {
padding: 0px 10px 0px 10px;
border-left: 3px solid #0076a1;
font-style: italic;
font-size: 80%;
}
</style> 

In blog posts, you can use the following syntax :

<div class="photo-credit"><p>Photo credit by...</p></div>

The result looks like this:

Photo by Teng Yuhong on Unsplash

Comments

Related Posts

{{posts[0].title}}

{{posts[0].date}} {{posts[0].commentsNum}} {{messages_comments}}

{{posts[1].title}}

{{posts[1].date}} {{posts[1].commentsNum}} {{messages_comments}}

{{posts[2].title}}

{{posts[2].date}} {{posts[2].commentsNum}} {{messages_comments}}

Recent Comments

Contact Form