Box shadow in widget cut off
-
I have a section on the right side of my homepage in a text widget, called “Event Registration”. This section should have a shadow, but it isn’t showing up. Below is the HTML code:
<div class="boxed"><table width="100" align="center" bgcolor="#000000" style="width:100%;padding:6px;border:none;"> <tbody> <tr> <td colspan="3" align="left" valign="top" bgcolor="#000000" style="padding:4px;background-color:#000000;border:none;vertical-align:top;text-align:left;"><span style="color:#F9F2A8;font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;"><strong>EVENT REGISTRATION</strong></span></td> </tr> <tr> <td width="10" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;"> <strong>DATE</strong></span></td> <td width="40" align="left" valign="top" bgcolor="#4e5160" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:8pt;line-height:100%;font-family:Verdana, sans-serif;"><strong>EVENT</strong></span></td> <td width="50" align="left" valign="top" style="padding:4px;background-color:#4e5160;border:none;vertical-align:top;text-align:left;"></td> </tr> <tr> <td style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top" bgcolor="#525863"> <p style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Sat/Sun Nov 21-22</p> </td> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">JR/AGE/SR<span style="font-size:7pt;"><br> <strong>Mic-Dev Classic</strong></span></span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><a class="button_example" style="color:#ffff00;" href="http://flyfins.org/mic-dev-meet-registration/" target="new">REGISTER</a><br> <span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>NEW</strong></span></td> </tr> <tr> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>Last to Reg: </strong><strong style="font-size:7pt;">Tue 11/3</strong> </span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" align="left" valign="top"> </td> </tr> <tr> <td style="padding:4px;background-color:#656363;border:none;vertical-align:top;text-align:left;" rowspan="2" align="left" valign="top" bgcolor="#525863"> <p style="color:#ffffff;font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;">Fri-Sun Dec 11-13</p> </td> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">JR/AGE/SR<span style="font-size:7pt;"><br> <strong>SOCO Hutchinson Classic</strong></span></span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><a class="button_example" style="color:#ffff00;" href="http://flyfins.org/soco-hutchinson-classic/" target="new">REGISTER</a><br> <span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>NEW</strong></span></td> </tr> <tr> <td style="padding:4px;background-color:#ecf0f0;border:none;vertical-align:top;text-align:left;" align="left" valign="top"><span style="font-size:7pt;line-height:100%;font-family:Verdana, sans-serif;color:#800000;"><strong>Last to Reg: </strong><strong style="font-size:7pt;">Thur 11/5</strong> </span></td> <td style="padding:4px;background-color:#cbc7c7;border:none;vertical-align:top;text-align:left;" align="left" valign="top"> </td> </tr> </tbody> </table> </div>CSS CODE:
.boxed { background-color: #000000; border: 5px solid #000000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75); -moz-box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75); box-shadow: 1px 5px 15px 0 rgba(0,0,0,0.75); }The blog I need help with is: (visible only to logged in users)
-
Hi there, I would suggest adding the box shadow to the text widget itself by using the unique text widget CSS id like this.
#text-8 { box-shadow: 1px 5px 15px 0 rgba(0, 0, 0, 0.75); } -
that worked beautifully…thank you!
(*How did you know to call that text widget #text-8 ?) -
If you look in the HTML for the page, using the web inspector in your browser, you can inspect that text widget and then you can find the text widget unique CSS id. The same goes for posts and pages, and all widgets. They will each have a unique id you can use to specifically target and style the element. Pages and posts have the unique id in the opening body HTML tag.
If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.
-
ok, i will take your suggestions…thank you!
One more question…when my posts go out with CSS in it, while the CSS features will work on the website and on the mobile site, but when in the post page generated by wordpress they do not. (*Not sure if it they don’t always work…because I thought I used an image swap CSS feature that- did work
in the email post?). Are the email posts just straight html an unable to utilize the CSS code?
-
Emails are a very tricky thing and use different encoding and such from web pages, so the CSS that you input for your site will not carry through to the notification emails that are sent out on your posts. We work to make sure that the emails are highly readable and that they work with all email clients. There is no way to customize the emails that go out.
-
-
- The topic ‘Box shadow in widget cut off’ is closed to new replies.
WordPress.com Forums 