Wizzley HTML Borders and Backgrounds

by almirah

HTML codes that match Wizzley backgrounds

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?

   Login
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.

MuminBusiness on 01/24/2012

I did not know this could be done. Thanks for the wizz!

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.

Updated: 01/08/2012, almirah
 
Thank you! Would you like to post a comment now?
24

What do you think of HTML?


   Login
Rose on 11/27/2013

I'm bookmarking this page - I can see myself using the borders to highlight key points for example. Thank you for this

Sheri_Oz on 09/21/2012

Thanks for this. I have bookmarked it for future reference.

Bhavesh on 01/22/2012

Excellent tutorial and reference for Wizzley HTML. Thank you so much for putting it together.

JoHarrington on 01/21/2012

Wow! I didn't know about any of this. Thanks!

I really should experiment more in the source box, instead of being lazy. :)

lakeerieartists on 12/23/2011

The information is good, but I do not think it is necessary. See my comment above.

almirah on 12/22/2011

@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>

almirah on 12/20/2011

@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

emeraldmile on 12/20/2011

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?

Michaela on 12/19/2011

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! :)

sheilamarie on 12/17/2011

Whether we use these borders or not, it's nice to know how it's done. Thanks for the information.


You might also like

Tips and Tricks After 500 Pages on Wizzley

The traffic is down, but the sales are up! And here I am with half a millenn...

Tips and Tricks After 400 Pages on Wizzley

After a year on Wizzley, I've amassed a lot of articles which are starting to...


Disclosure: This page generates income for authors based on affiliate relationships with our partners, including Amazon, Google and others.
Loading ...
Error!