How and when to use borders and background in Wizzley?
It's all about your creativity with Wizzley. The most obvious use of borders and backgrounds in Wizzley is to highlight important texts and messages to your readers. Those highlighted texts will stand out from the rest of the texts, so readers will see it immediately. You can apply these codes when you create your text using the text module. You just need to activate the html button indicated in your Wizzley text editor.
Solid border HTML
Codes for solid and colored border
Here are examples of different solid borders with different colors and thickness. Each code used for each border is given inside the border itself to indicate you what is behind the border. You can try yourself to change the value in the code see what happen to the border. You may need to do that to find that border is matched with the text. You can change border type, border thickness, border color, padding, margin, text alignment in the border, etc. Here in Wizzley, you can change the background of your page using the available colors provided by Wizzley. Here are colored borders you can use that matches your Wizzley page background.
<p style="border: solid 10px #D0DBE1; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #B0B083; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #7D9175; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #CC99A8; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #BF3030; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #6E2424; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #1E1E1E; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: solid 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
Dotted border HTML
Dotted and colored border HTML
<p style="border: dotted 5px #D0DBE1; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #B0B083; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #7D9175; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #CC99A8; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #BF3030; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #6E2424; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #1E1E1E; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dotted 5px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
Double borders HTML
<p style="border: double 10px #D0DBE1; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #B0B083; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #7D9175; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #CC99A8; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #BF3030; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #6E2424; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #1E1E1E; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: double 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
Dashed border HTML
Dashed and colored border HTML
<p style="border: dashed 5px #D0DBE1; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #B0B083; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #7D9175; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #CC99A8; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #BF3030; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #6E2424; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #1E1E1E; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: dashed 5px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
Wizzley background HTML
HTML codes for Wizzley background
<p style="background: #D0DBE1; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #000000;"> Your Text Here </p>
<p style="background: #B0B083; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #000000;"> Your Text Here </p>
<p style="background: #7D9175; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #ffcc00;"> Your Text Here </p>
<p style="background: #CC99A8; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #ffcc00;"> Your Text Here </p>
<p style="background #BF3030; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #ffffff;"> Your Text Here </p>
<p style="background: #6E2424; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #ffffff;"> Your Text Here </p>
<p style="background: #1E1E1E; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #ffffff;"> Your Text Here </p>
<p style="background: #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #333333;"> Your Text Here </p>
Inset, outset, and ridged border HTML
See the difference among them
<p style="border: inset 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: outset 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: ridge 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border: groove 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
HTML Tshirt
 |
Left border HTML
<p style="border-left: solid 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border-left: double 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border-left: groove 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
<p style="border-left: ridge 10px #C0DB64; padding: 15px; margin: 10px; text-align: justify; line-height: 23px; color: #666666;"> Your Text Here </p>
What do you think of HTML in Wizzley?
Nope, I'm a simple one
wrylilt
on 01/22/2012
I like Wizzley because it has some color (unlike the dullness of Hubpages) but doesn't go to the loud extremes that Squidoo does. I prefer to keep it that way!
lakeerieartists
on 12/23/2011
While I appreciate that you have taken the time to show us these colored borders, I do not think having all the extra html on a page is a good idea, because it will burden the page with extra unnecessary code. One of the things that I love about Wizzley is the fact that we do not need any of this and we can create pages quickly. I think by adding all of the jazzing up it just distracts the reader from what you have on the page.
Yup, used appropriately will help!
Sheri_Oz
on 09/21/2012
I like the way you have used it and I love having the mystery taken out of these things for me.
Bhavesh
on 01/22/2012
I think it does help to use some html, as long as it's not overdone and done with taste.
Sam
on 01/21/2012
Lakeerieartists
You might not deem it necessary for you, but we others appreciate this and just for the record, code like this does not add to page loading speed. HTML code is html code, so if you just use the standard one or a more sophisticated one like this doesn't make a nano second of difference in page load speed. What does make a difference is overuse of Amazon modules etc that have to be loaded from a third source etc.
Othercat
on 12/31/2011
I'm a big fan of html. I'm struggling with Wizzley though. For some reason, I can't center a captioned image. I have to either float it left or right. And that's frustrating.
You might also like
Tips and Tricks After 500 Pages on WizzleyThe traffic is down, but the sales are up! And here I am with half a millenn...
Tips and Tricks After 400 Pages on WizzleyAfter a year on Wizzley, I've amassed a lot of articles which are starting to...
Lovely Eraser Designs for Kidson 01/05/2012
How to Create a List of Tables in Microsoft Word 2010on 01/03/2012
How to Create Your First Google Siteon 12/27/2011
How to Create Links to Your Wizzley Pageson 12/22/2011
What do you think of HTML?
I'm bookmarking this page - I can see myself using the borders to highlight key points for example. Thank you for this
Thanks for this. I have bookmarked it for future reference.
Excellent tutorial and reference for Wizzley HTML. Thank you so much for putting it together.
Wow! I didn't know about any of this. Thanks!
I really should experiment more in the source box, instead of being lazy. :)
The information is good, but I do not think it is necessary. See my comment above.
@emeraldine: I'm sorry not giving you the best answer. The answer to your question is actually to press Shift+Enter from your text editor (not html mode) at the end of each paragraph, or from html mode insert </br>
@emeraldine: the technique is just similar. The code will apply to all the texts as long as they are before </p>. Make sure to check with in your html mode text editor
How would you add a border on Wizzley if you wanted the entire border to cover two or more paragraphs. I find each paragraph has to have a separate border. Can you share any tricks?
Thank you for all the effort you put into this article - I find it very helpful.
I've often wished I could use borders to highlight certain areas of my article.
Thanks! :)
Whether we use these borders or not, it's nice to know how it's done. Thanks for the information.