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:
Color codes from Lorelle’s colored text box that’s my favorite.
9494ff very light blue (see illustrations below)
0000ff background color lavender
004d99 blue (in text)
Sample information colorhexa.com provides on a specific color:
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
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!!!
Place this in front of your HTML code:
</span> <h5>And place this after it:</h5> <span>
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:
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!
<table width="<b>350</b>" border="1" <b>bgcolor</b>="#0000FF" cellpadding="5" cellspacing="5"> <tr><td <b>bgcolor</b>="#7A7AFF" colspan="4"></td></tr> <tr> <td <b>bgcolor</b>="#9494FF"></td> <td <b>bgcolor</b>="#3399FF"></td> <td <b>bgcolor</b>="#99CCFF"></td> <td <b>bgcolor</b>="#8080FF"> <<b>font color</b>="#004D99" size="+2">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.</font> <font size="+1" color="blue">Charles Brower<b></font></td></tr> <tr><td bgcolor="#80BFFF" colspan="4"></td></tr> </table></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.
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>
<font color=”#004D99″ size=”+2″>
then enter your text to go in the box
Then add below code at the end
<tr><td bgcolor=”#80BFFF” colspan=”4″></td></tr>
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.
Now is the time for all good men to come to the aid of their country.
Gets you this:
Now is the time for all good men to come to the aid of their country.</h3></div>