Testing Out Colored Text Boxes

Follow @vsatech

I’m in the habit of writing very long posts at my main blog, vsatips, which is why I’m always searching for good ways to get my text organized and presented in ways that make it easy and appealing for my readers (as posed to long and cluttered, my usual default!)

One idea I had was to break out some special sections and place them into colored text boxes.  WordPress.com already gives you some capabilities in this regard with the Block Quote feature.  But, so far on the Themes I’m using the Blockquote feature doesn’t really make it stand out as much as I would like.

Thus my need for colored boxes…

Some Color Ideas:

00ffff turquoise
4f1f1f brown

Color codes from Lorelle’s colored text box that’s my favorite.

9494ff  very light blue (see illustrations below)
3399ff
99ccff
8080ff
0000ff background color lavender 
7a7aff  blue?
004d99 blue (in text)

Link to a great site for learning everything there is to know about a certain color.

Sample information colorhexa.com provides on a specific color:

---

Test 1

Comments on Test 1:

I ended up not pursuing more tests using this method because my first test failed.

So here are some sample’s I’m trying, which were taken from this site:  Farm Lane Books Blog

The code

p style=”padding: 10px; color: red; background-color: blue; border: green 5px solid”anything you like!/p

Test 1  Fail

Straight code (shown above) from Farm Lane Books Site yields this (the words below  ‘anything you like!’ should be contained in a blue text box with a green border)

anything you like!

---

Test 2   Works!!!

Code Wrapper

Place this in front of your HTML code:

       

</span>
<h5>And place this after it:</h5>
<span>&nbsp; &nbsp; &nbsp; &nbsp;

Use of the Code Wrapper will place your code in a special ‘code box’ WP created to make posting examples of code better.

Trying Lorelle’s Table idea:

The code:

Note: wrapping below code in html wrapper doesn’t change display, maybe try CSS?  No CSS makes no difference.

Actually, I was wrong it did work!!!  It just needed to be published first!

&lt;table width="<b>350</b>" border="1" <b>bgcolor</b>="#0000FF" cellpadding="5" cellspacing="5"&gt;
&lt;tr&gt;&lt;td <b>bgcolor</b>="#7A7AFF" colspan="4"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td <b>bgcolor</b>="#9494FF"&gt;&lt;/td&gt;
&lt;td <b>bgcolor</b>="#3399FF"&gt;&lt;/td&gt;
&lt;td <b>bgcolor</b>="#99CCFF"&gt;&lt;/td&gt;
&lt;td <b>bgcolor</b>="#8080FF"&gt;
&lt;<b>font color</b>="#004D99" size="+2"&gt;A new idea is&nbsp;
delicate. It can be killed by a sneer or a yawn;&nbsp;
it can be stabbed to death by a joke or worried&nbsp;
to death by a frown on the right person's brow.&lt;/font&gt;
&lt;font size="+1" color="blue"&gt;Charles&nbsp;
Brower<b>&lt;/font&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td bgcolor="#80BFFF" colspan="4"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</b>

The code typed into the HTML editor should yield here results:

			A new idea is delicate. It can be killed by a sneer or a yawn; it can be stabbed to death by a joke or worried to death by a frown on the right person’s brow. Charles Brower

                        Yay!  It Works!!!

---

Cut & Paste Code

Put this in front of your text to go in the above box:

<table width=”650″ border=”1″ bgcolor=”#0000FF” cellpadding=”5″ cellspacing=”5″>
<tr><td bgcolor=”#7A7AFF” colspan=”4″></td></tr>
<tr>
<td bgcolor=”#9494FF”></td>
<td bgcolor=”#3399FF”></td>
<td bgcolor=”#99CCFF”></td>
<td bgcolor=”#8080FF”>
<font color=”#004D99″ size=”+2″>

then enter your text to go in the box

Then add below code at the end

</font></td></tr>
<tr><td bgcolor=”#80BFFF” colspan=”4″></td></tr>
</table>

---

Test 3 Works!

			This is a test to see of I can make this box wider!

Comments on Test 3

OK, this is kind of weird…I’m using the WordPress app for iPad to add this post.  Using the ios visual editor, I altered Lorelle’s code a little to make the colored text box wider, which it appears to do on my visual editor.  But when it’s published it’s the same size as the first one.  I’m guessing that may have to do the fact that the width of the main content area is smaller than the width I entered…I have to check out the width for this theme, which is Gazzette.

The main column width for posts in Gazette is 540.  Somewhat unusual is that the main width for pages is much wider…870 I think.

My favorite example from Lorelle’s post is normally 350 pixels wide. I changed it to 650 pixels wide for the 2nd box, which is too wide for the Gazzette theme (540) so I’m changiing it to 540 to see if it displays wider when published (because it does in the visual editor on ios.)

Quick Tip for adding photos using the ios app

Recent updates to the ios app have fixed the photo uploading problem, but I’ve not been able to use the feature that lets you change the size and alignment…it never sticks.

I just figured out that I can change the size right in the HTML code for the photo.  It’s possible that I can change the other aspects too…certainly alignment…but I don’t have time right now to play around with it more.  Below is a screenshot of the code for the 3 color photos towards the top of this post, showing where to change the size parameter.

---

Test 4  Works except for the border (should be brown)

This just keeps getting messed up using the code wrapper.  My text did work without adding a border though.

This:

Now is the time for all good men to come to the aid of their country.

</code>

Gets you this:

Now is the time for all good men to come to the aid of their country.

---

Test 5

This:

<h3>div style=”border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;width:45%;float:center;background-color:#c2c2d6;margin-left:0;padding:10px;text-align:center;”

Now is the time for all good men to come to the aid of their country.</h3></div>

</code>

Gets you this:

Now is the time for all good men to come to the aid of their country.