Add drop-shadow to widget in sidebar

  • Hello,
    I’m currently working on a child theme of twentyeleven.

    I put a webform from ‘getresponse’ (an email autoresponder) in my sidebar which is working and looking great.

    Now I would like to add a drop-shadow to this widget within my sidebar.
    Unfortunately I do not know in which .php file I have to edit that and to what piece of code I would have to add that either.

    I downloaded the ‘getresponse’ widget and activated it via the dashboard.
    Where would I find the code for this particular widget in my files than so I can edit it? Can I see it within my code at all?

    Any advise on the above questions would be greatly appreciated.

    Thank you very much,
    Feli

Viewing 4 replies - 1 through 4 (of 4 total)

  • hello felilikesflowers,

    depends on if you want a dropshadow on the widget itself or the widget area.
    difference is that you can put more widgets in 1 widget area.
    Example:

    —————-
    Widget Area
    – widget 1
    – widget 2
    —————-

    You want the dropshadow on widget 1 for example, or on the widget area? (Widget 1 being the email widget)

    anyway, you need to add

    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;

    to the div surrounding the widget/widget-area in CSS.

    Widget area: see “style.css” in you theme folder
    Widget: you need to go to your plugin folder and inside the map of that plugin you will probably find a .css file.

    in 1 of those 2 files (depending on where you want to add the dropshadow) you need to find the div (something like:

    #mail_wrap {
*some code*
}

    )
    and add the code I gave you above.. if you want to change the angle of the shadow, just mess around with the numbers.

    Thread Starter felilikesflowers

    (@felilikesflowers)

    Dear ferdri3,
    thank you very much for your helpful explanation!

    I would like to add the shadow to the widget itself. I was staring at the .php file for the last 30min but unfortunately I cannot seem to find out where the widget begins in the code and where it ends. When I play around with it nothing seems to happen.
    I tried adding the code for the shadow to every single one of the ids and classes within the .css file (one by one), but nothing happend.

    Here is the .php file

    [ 438 lines of code moderated. For more than 10 lines of code please use pastebin.com instead. ]

    and this is the .css file

    .GR_label { display: inline-block !important; width: 150px !important; }
.GR_input { width: 120px !important; }
.GR_select { width: 120px !important; }
.GR_input2 { width: 200px !important; }
.GR_select2 { width: 60px !important; }
.GR_checkbox { width: inherit; }

.GR_config_box { width: 700px; float: left;  margin-top: 30px; margin-right: 30px; }
.GR_rss_box { width: 300px; float: left; margin-top: 30px; margin-right: 30px; }
.GR_rss_ul { list-style: square; }
.GR_rss_li { margin-left: 15px; }
.GR_img_webform_id { width: 0 auto; height:317px; background: url("webform_id.jpg") no-repeat scroll 50% 50% transparent;
}

.sprite { background: url("sprite.png") no-repeat scroll 0 0 transparent; }
.GR_ico { height: 16px; padding: 0 0 4px 24px; width: 16px; color: #373737; }
.facebook-ico { background-position: 0 -6px; }
.twitter-ico { background-position: 0 -30px; }
.linkedin-ico { background-position: 0 -54px; }
.blog-ico { background-position: 0 -78px; }

    Thank you again for taking the time to look at it, it’s helping me immense!
    Feli

    Hi,

    Came to this from your response to my post. For your situation I have found the id of the widget in question then styled it specifically in the css.

    So, open your web page with the widget in, view source, find the widget id, then in the css apply:

    #yourwidget id {
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
}

You could apply the same to widgets in a given area. So for example in all your sidebar widgets in 2011 use:

    #secondary .widget {
    box shadow code as above
    }`

    As per my other post you’ll need to find an alternative for IE (pre IE9) as it doesn’t respond to box-shadow.

    Good luck

    ;o)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add drop-shadow to widget in sidebar’ is closed to new replies.