WordPress.com

1. notchangingmyname
   Member
   Oct 2, 2012, 8:04 PM

   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:

   http://rorysnewblog.files.wordpress.com/2012/10/widgetscreenshot.jpg

   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 rorysnewblog.wordpress.com.

2. designsimply
   Staff
   Oct 3, 2012, 1:06 PM

   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);
   }

3. notchangingmyname
   Member
   Oct 3, 2012, 1:33 PM

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

4. notchangingmyname
   Member
   Oct 3, 2012, 2:52 PM

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

Topic Closed

This topic has been closed to new replies.