Skip to the content
Jeffrey T. Kastner
Freelance Web Designer
0
  • Home
  • About
  • Weebly Themes
  • WordPress Themes
  • Website Design
  • Blog
  • Contact
  • Guestbook
Find me here:

Paragraph with a background and border.

Jeffrey T. Kastner | April 7, 2012

Updated: 12/23/2015

There is now a Border Box element that can be found in the Weebly App Center. This makes the HTML instructions below outdated and no longer necessary but for the time those instructions will remain. 


Old HTML instructions:

I have saw multiple people asking if there it was a way to add text or a paragraph to their Weebly site that had a box around it, or a background color with a border. Even if you are not familiar with custom HTML and CSS, there are a tools to help.

Below you will find a short video to demonstrate this example, 
and to show you how to add it to your Weebly website. 

This is a bit of text, that you will add to your site to explain the content of the page or product.
You may want this area to stand out. This is roughly 95% of the width of the area it is in, and it uses the content area default font styling.
You can use a column elements to adjust it’s width and positioning.

To add a line break you simply add a ‘greater than sign’, the letter B the letter R than a ‘less than sign’ To learn more about CSS and HTML please visit Visit W3Schools! You can use the search feature in the top right corner to find what you’re looking for if you’re unfamiliar with the website. Don’t Miss the demonstration video below!


I will start with the basics.


The CSS:
.featurebox {
  width: 90% !important;
  background: #323232;
  border: 1px solid #F50;
  border-radius: 10px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  margin: 0 auto;
  padding: 15px 10px 15px 10px !important;
}



You may even want to add: 
text–align: left;   

if you ‘center’ the Custom HTML Element
using the elements’ toolbar,
it will center the text too


The HTML:

<div class="featurebox">
This is a bit of text, that you will add to your site to explain the content of the page or product. You may want this area to stand out. This is roughly 95% of the width of the area it is in, and it uses the content area default font styling. You can use a column elements to I just it's width and positioning.<BR><BR>To add a line break you simply add a 'greater than sign', the letter B the letter R than a 'less than sign' To learn more about CSS and HTML please visit <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> You can use the search feature in the top right corner to find what you're looking for if you're unfamiliar with the website. Don't Miss the demonstration video below!
</div>
<BR>

Here’s an example

Remember, the HTML div ‘class’ name was the only thing that changed, make sure to have the same title as the new css for this box. 

This is a bit of text, that you will add to your site to explain the content of the page or product.
You may want this area to stand out. This is roughly 95% of the width of the area it is in, and it uses the content area default font styling.
You can use a column elements to adjust it’s width and positioning.

To add a line break you simply add a ‘greater than sign’, the letter B the letter R than a ‘less than sign’ To learn more about CSS and HTML please visit Visit W3Schools! You can use the search feature in the top right corner to find what you’re looking for if you’re unfamiliar with the website. Don’t Miss the demonstration video below!


Need Help?
Weebly’s Theme/Design help section:  http://kb.weebly.com/html-css.html  
The Weebly custom HTML element:
http://kb.weebly.com/custom-html.html 
W3Schools CSS Tutorials:   http://www.w3schools.com/css/default.asp

Don’t forget to like and share!

Tweet
Categories: All, Weebly | Comments

5 Comments

  • Jeffrey Kastner says:
    April 8, 2012 at 7:34 am

    Oops, looks like the “menu button” generator I used in my example doesn’t work in IE I’ll have to find an alternate..

    ~didn’t think I’d have to make sure ‘their’ code worked first;)

    Reply
  • Janice Weisler says:
    October 23, 2014 at 1:16 am

    Your movie does not play.

    Reply
    • Jeffrey Kastner says:
      October 23, 2014 at 1:31 am

      Hi Janice,

      I’ve tested the video from my computer and phone and it looks like it is working and should be working for you.

      Let me know if you have any questions.

      Reply
  • Nina says:
    August 4, 2015 at 9:46 am

    Thank you! I am very excited that I am able to do this. I’m coding!

    Reply
  • Sahil kumar says:
    April 23, 2016 at 11:27 am

    Thanks for this information, in am using html mode to write posts in my wordpress blog.

    Reply

Write a Reply or Comment Cancel reply

Your email address will not be published. Required fields are marked *

  • Blatherings

    • All
    • Music Review
    • Random
    • Recipes
    • Weebly
  • By Date

    • August 2024
    • May 2024
    • June 2023
    • April 2023
    • October 2022
    • July 2022
    • March 2022
    • February 2022
    • December 2021
    • October 2020
    • September 2020
    • May 2019
    • January 2019
    • October 2018
    • March 2018
    • February 2018
    • September 2017
    • July 2017
    • May 2017
    • August 2016
    • June 2016
    • January 2016
    • July 2015
    • June 2015
    • May 2015
    • April 2015
    • January 2015
    • September 2014
    • August 2014
    • July 2014
    • June 2014
    • May 2014
    • April 2014
    • March 2014
    • January 2014
    • December 2013
    • October 2013
    • August 2013
    • June 2013
    • May 2013
    • March 2013
    • January 2013
    • November 2012
    • August 2012
    • June 2012
    • May 2012
    • April 2012
    • February 2012
    • August 2011
  • Recent Posts

    • Roasted Garlic Habanero Hot Sauce
    • Floating bed
    • Five Gallon Bucket Planter
    • Weebly To WordPress Importer
    • Camping Canvas Wall Art
  • Recent Comments

    1. Jake B on Floating bed
    2. Jeremiah on Roasted Garlic Habanero Hot Sauce
    3. chunbyn on Guestbook
    4. Tom B on Floating bed
    5. DanielDurne on Guestbook
Top [Terms Of Service] [Privacy] Contact
© 2025 Jeffrey T. Kastner

No products in the cart.

Search...

Search for: