Editing the Text widget

  • Author
  • #1029885

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


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

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


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

The topic ‘Editing the Text widget’ is closed to new replies.