How to modify a text widget so that there is a box around Title and text?

• 

  skellermwd1 · Member · Mar 19, 2015 at 6:36 pm

  • Copy link
  • Add topic to favorites

  My client would like to have a sort of weekly specials and news box on the side bar, so I have put up a Title, and used this code, gleaned from a post on this issue, but I am not seeing a frame, or box around “Larry’s Lure”.

  <div id=”sidebar”>

  Larry’s Lure</span></u></b></h1> 
  <div class=”textwidget”><h3><b>Coming soon!</b></h3></div>
  </div>

  Thanks,

  Steve

  The blog I need help with is: (visible only to logged in users)

• 

  jsmutek · Member · Mar 19, 2015 at 7:07 pm

  • Copy link

  Hey Steve, me again.

  This is also a job for custom CSS. Try adding this, just like the other CSS that you used.

  /* Larrys Lure Text Widget
  * Each widget has it's own ID and can be targeted with CSS
  * This CSS is applied specifically to text widget with ID of text-7
  * Second rule sets the color of H1 elements nested under text-7.
  */
  
  #text-7 {
    border: 1px solid gray;
    padding: 5px;
  }
  
  #text-7 h1 {
    color: #CD2626;
  }

  Note that each time you create a widget, WordPress will assign it a specific ID. ID’s are unique, so there is only one ID for any single element. This is opposed to classes, which can be used multiple times.

  (# is an ID selector, . is a class selector )

  If you wanted to target all text widgets you could change #text-7 to .widget-text – which would target the class for all text widgets, instead of the ID for that specific widget.

  Make sense?

• 

  jsmutek · Member · Mar 19, 2015 at 7:08 pm

  • Copy link

  ps. I’d delete all that additional markup you added, and just use Larry’s Lure for the title, and coming soon in the text area of the widget.

  :)

• 

  skellermwd1 · Member · Mar 19, 2015 at 7:12 pm

  • Copy link

  Jimmy,
  I hadn’t seen your note, but it looks cleaner your way than what I did. FYI, I will include it here…

  <div style=”border:3px double #000080;padding:1.2em;”>

  <span style=”color:#000080;”>

  Larry’s Lure</u></b></h1></span> 

  <span style=”color:#000080;”>

  Local Fishing Bait Coming Soon!

  Thanks…
  Steve

• 

  skellermwd1 · Member · Mar 19, 2015 at 7:20 pm

  • Copy link

  Crossing in the ether, again…

  What markup were you referring to…the stuff I already removed and replaced with the box?

• 

  jsmutek · Member · Mar 19, 2015 at 7:35 pm

  • Copy link

  Yeah – I’d take out all of the code that you added and just target it with custom CSS.

  So, you’d just have “Larry’s Lure” as the title, like this.

  Then use your custom styles for styling the elements.

  Whenever possible it’s always best to separate content (HTML) from presentation (CSS). So, say you have a text widget, with some text, and you want to use an H1 tag, and you want the H1 tag to be red.

  This is cool:

  <h1>Some styled text</h1>

  with this in a separate stylesheet..

  h1 {color: red;}

  But this…

  <h1 style="color:red;">Some styled text</h1>

  …isn’t best practice.

  Both give the same results, but it’s best to keep styles in the stylesheet.

  Does that make sense? I’ve been in front of a computer since 5:30 am Eastern time. My brain is a little mushy.

• 

  skellermwd1 · Member · Mar 19, 2015 at 8:37 pm

  • Copy link

  I am okay with the way I did it, because I don’t want to spend more time on it, right now.

  Thanks again…