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.
Wizzley HTML Borders and Backgrounds
HTML codes that match Wizzley backgrounds
How and when to use borders and background in Wizzley?
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>
Advertisement
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>
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?
Yup, used appropriately will help!
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.
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.
I think it does help to use some html, as long as it's not overdone and done with taste.
I did not know this could be done. Thanks for the wizz!
I like the way you have used it and I love having the mystery taken out of these things for me.
Nope, I'm a simple one
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.
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!
Add your argument
Log in to add an argument to this debate.
What do you think of HTML?
RoseNov 27, 2013
Sheri_OzSep 21, 2012
BhaveshJan 22, 2012
JoHarringtonJan 21, 2012
I really should experiment more in the source box, instead of being lazy. :)
lakeerieartistsDec 23, 2011
almirahDec 22, 2011
almirahDec 20, 2011
emeraldmileDec 20, 2011
MichaelaDec 19, 2011
I've often wished I could use borders to highlight certain areas of my article.
Thanks! :)
GuestDec 17, 2011
fanfrelucheDec 17, 2011
almirahDec 17, 2011
JimmieDec 17, 2011