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>
PASTE YOUR CONVERTED CODE HERE
</pre></div>
PASTE YOUR CONVERTED CODE HERE
</pre></div>
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.
0 comments: