January 30, 2014

Weebly Tricks #14 - Adding Code Box for HTML examples

Posted by Domingo Tambasacan at 1/30/2014

Adding Code Box to Weebly Post

A code box is very useful specially for tutorial websites rendering topics regarding CSS and HTML. Codes inside the box are HTML but interpreted as plain text for illustration purposes. I only learned this thing few days ago and implement it here in Blogger. Weebly is quiet difficult to configure but nonetheless I did manage to apply it with some tricks and headaches. The code that we will use is same code I've been using here in My Weebly Tricks. Ok things will be easier now.

1. Go to Weebly > Design > main-style.css, press ctrl F and look for the word "Form Customization". Just above it paste the following code:
.code { background:#F9F2F4; background-repeat:no-repeat; border: solid #B40404; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 12px 10px 10px; width: auto;} .code:hover { background-repeat:no-repeat; }

Change the following according to your preferences:
Red text - the background color
Green text - the border color

Save it.

2. Now go to the page you want to insert a code box. Drag one "embed code" element and paste the following:
<div class="code"><pre>

Notes for the code above:
<div class="code"> - this is to call the function you placed in the CSS
<pre> - this is to keep the spacing and </br> of the original code intact
Yellow text -  your converted code

3. You must convert the code that you're going to set as an illustration. Go to THIS LINK and paste the original code. Convert it, copy and now paste on the yellow part.

4. Publish your site and look!! Hope this helps, drop any comments if you have.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!



Have any question? Feel Free To Post Below:


© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top