Editing the Text widget

• 

  notchangingmyname · Member · Oct 2, 2012 at 8:04 pm

  • Copy link
  • Add topic to favorites

  I’ve almost got my new blog to where I want it to be, but one thing has me stumped.

  I fixed the text widget to the right side of the page (all by myself!). Now I would like to change its background color and add a border to it. I took a screen shot of a page that has it, as an example:

  

  I’ve tried changing the background but it doesn’t seem to work, and of course I don’t want to affect any of the other widgets. Any suggestions?

  I was thinking I could add the border and background to the image itself. But then I would have to figure out how to make it so that the link would only come up when you roll over the button, and not the background, and I don’t know if that’s easy or if it’s the most practical option. Hopefully there’s a quick CSS solution.

  Thanks in advance!

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

• 

  designsimply · Member · Oct 3, 2012 at 1:06 pm

  • Copy link

  Instead of just using “.textwidget” as a selector, which would affect any future text widgets you added, I would recommend using the specific text widget ID value. In your case in this example, your text widget ID value is “text-2”.

  Here is an example of adding a background, rounded corners and shadows to get you started:

  #text-2 .textwidget {
  	background: orange;
  	border: 3px solid white;
  	border-radius: 5px;
  	-webkit-box-shadow: 0 0 8px 2px rgba(50, 50, 50, 0.5);
  	-moz-box-shadow:    0 0 8px 2px rgba(50, 50, 50, 0.5);
  	box-shadow:         0 0 8px 2px rgba(50, 50, 50, 0.5);
  }

• 

  notchangingmyname · Member · Oct 3, 2012 at 1:33 pm

  • Copy link

  omg thank you so so much!!!!!!!

• 

  notchangingmyname · Member · Oct 3, 2012 at 2:52 pm

  • Copy link

  Question: how did you know that #text-2 was the ID?