Borders for text widgets

• 

  sensuouscurmudgeon · Member · Dec 14, 2008 at 8:46 pm

  • Copy link
  • Add topic to favorites

  This isn’t a question, it’s a tip. I hope it still belongs in this forum. If you use a theme such as Cutline that doesn’t provide borders around the text in your widgets, it’s easy to create your own borders. This code was posted several weeks ago by panaghiotisadam for a different purpose, but it has lots of uses. Here’s how to put a border around the text in a widget:

  <div style="border:1px solid black;padding:1px;"><p><p>YOUR WIDGET TEXT</div>

  Note the two paragraph codes just before the text begins. I find that necessary to prevent the top of the border from contacting the first line of text. You can make the border thicker than 1px, but a thicker border leaves less room for text. That’s also true of the 1px padding. You can change the “1px” border and padding to any larger values, but this is what works at my blog.

  This code doesn’t work for a widget’s title, at least in the Cutline theme. And I haven’t tried this with anything except a text widget.

• 

  panaghiotisadam · Member · Dec 14, 2008 at 11:19 pm

  • Copy link

  @sensuouscurmudgeon: You don’t need the p tags – just increase the padding number as you see fit. (Padding = space between border and text.)

• 

  sensuouscurmudgeon · Member · Dec 14, 2008 at 11:56 pm

  • Copy link

  Yes, but I think that if the padding is increased, you have wider margins and thus shorter text lines. At least that’s how it works for me.

• 

  panaghiotisadam · Member · Dec 15, 2008 at 1:58 am

  • Copy link

  Only if you exceed 14pt or so.

• 

  devblog · Member · Dec 15, 2008 at 2:40 am

  • Copy link

  sensuouscurmudgeon,

  You don’t need to have those to “p” tags. You see, the padding property supports up to 4 values. When you write the property like “padding: 1px;” that means that you are giving the four sides a padding of 1 pixel. If you want to give the top side more padding than the right, bottom and left side (i.e. top: 5px; right, bottom and left 1px) you can write your values like this:

  padding: 5px 1px 1px;

  In the code above, the first value (5px) defines the padding at the top, the second value (1px) defines the padding at the right and left sides, and the 3dr (1px) defines the padding at the bottom.

  Let’s say you want to give a padding of 10 pixels to the top and bottom, and 1 pixel to the left and right, you’d code it like this:

  padding: 10px 1px;

  Hope this helps.

• 

  sensuouscurmudgeon · Member · Dec 15, 2008 at 2:51 am

  • Copy link

  devblog: Thanks for the suggestion. I tried it, but didn’t like the results. I’ll stick with what’s been working for me. It’s crude, but effective.

• 

  devblog · Member · Dec 15, 2008 at 2:54 am

  • Copy link

  sure thing.

• 

  sensuouscurmudgeon · Member · Dec 15, 2008 at 2:41 pm

  • Copy link

  One more related tip. Instead of (or maybe in addition to) a widget border, you can add a colored background to a text widget. Like this:

  <div style="background-color:#F2F2F2;">WIDGET TEXT</div>

  Obviously any color code can be used instead of my #F2F2F2, which is light gray. I’m thinking of alternating, with some widgets having a border, and some having color. Or I may just leave it alone for a while.