Jeffrey T. Kastner
  • Home
  • About
  • Weebly Themes
  • Website Design
  • Facebook Tabs
  • Blog
  • Contact
  • Guestbook
  • My Hidden Stuff
    • thank you >
      • Your Site Here
Find me here:

Paragraph with a background and border.

4/7/2012

5 Comments

 

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. 

​Border Box Element ($5.00)
Picture
 

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!
5 Comments
Jeffreytkastner.com link
4/8/2012 07:34:35 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
10/23/2014 01:16:56 am

Your movie does not play.

Reply
Jeffrey
10/23/2014 01:31:24 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 link
8/4/2015 09:46:08 pm

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

Reply
Sahil kumar link
4/23/2016 11:27:14 pm

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

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    By: Jeffrey T. Kastner
    Web Log

    Blatherings

    All
    Music Review
    Random
    Recipes
    Weebly


    By Date

    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

    Jeffrey T. Kastner


    Enter your email to receive updates:





    RSS Feed


    Web hosting

    US - Avast!

    The Easiest Way to Create a Website. Weebly.com



© 2013 Copyright  All Rights Reserved. By: Jeffrey T. Kastner
Top [Terms Of Service] [Privacy] Contact

Search...