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