I was looking to highlight certain text inside my blog posts by placing it in gray boxes.
After searching for the best way to accomplish this I found a solution that works for me. This is not the only way to make certain text stand out.
You could use Blockquote or create a content box, but I like the simplicity and the look of the simple gray box.
How to create a gray text box
This example is simple HTML code to be placed inside your blog posts.
- Start by editing your blog post and then select the HTML view. This will of course display the whole post in HTML. If you are not familiar with editing this it’s okay, you are only going to copy and paste.
- Locate the place or text you want to be highlighted.
- Copy and paste the code below into your post.
- Insert your custom text to replace the line that says ‘Insert Text Here’.
That’s all there is to creating a gray text box.
Below is the code to copy and paste.
Insert Text Here >
How to adjust the background color and size
You can change the gray text box to suit your needs. Make the box larger or smaller, change the color, etc.
To change color locate this code: background-color: #f0f0f0
The f0f0f0 is the Hex color code. Changing this will change the background color.
Either play around with different color codes or lookup hex color codes to locate the one you want.
To change the border size: padding: 1.2em
The 1.2em is a ratio size. Making the number smaller makes the box smaller, and vice versa.
Bonus
If you ever are in need of a solid horizontal line across a blog post, copy the code below.
This code will draw a solid line 80% across the page. Adjust that number to suit your needs.
I hope you found this useful, I like to use both these in my blog articles from time to time.
