Box in widget

This is NOT an example of good design, but it illustrates the point.

If you use a Text widget with no title and put in your own HTML to define div’s for the box, title, and text, then you can style them any way you want.

So, for example, put this in a Text widget:

<div class='mytextbox'>
<div class='mytitle'>The Title</div>
<div class='mytext'>
<p>
some text in this line might be long enough to wrap.
</p>
<p>
and some more.
</p>
</div>
</div>

and use some CSS like this:

.mytextbox { border: 2px solid red; padding: 5px; background-color: lightblue; }
.mytitle { border: 2px solid green; text-align: center; }

That should give you a truly ugly text box.

Thanks for that. What code would I need to do away with the green box for the title and just have a line under the title so it appears to be a box with the main box border. Hope that makes sense. What I am trying to achieve is to have a text box with a title box that is part of the the main border with the ability to have the title area a different colour than the main text area. Thanks for you help.

Not quite sure what you mean, but give this a try. I included the style in the widget for testing, but you can separate it if you want.

<style type='text/css'>
.mytextbox { border: 2px solid red; background-color: lemonchiffon; }
.mytitle { border-bottom: 2px solid red; text-align: center; background-color: lightblue;}
.mytext { padding: 0 10px; }
</style>
<div class='mytextbox'>
<div class='mytitle'>The Title</div>
<div class='mytext'>
<p>
some text in this line might be long enough to wrap.
</p>
<p>
and some more.
</p>
</div>
</div>

Many thanks but cant seem to get that to work.

If you go to this site, you can see it working there.

Many thanks – I will try again.