eNews box needs an MD

[tjd]

I could use some advice on the settings for the eNews box. I’ve included the code below for you, anyone to chaco out. I am not a coder and I got this a couple of years back from this forum. It wasn’t perfect but it worked ok. Now since I finally upgraded to Latest Genesis I’ve been going thru the site cleaning up a lot of trashy code, empty spaces, etc. finally there’s this.

If you visit the site, you’ll find the box in the right sidebar. What is missing is the shadow on the right side, although it’s at the bottom. The other issue is the rather large grey area at the bottom inside the box. I can’t seem to adjust it smaller, that is make the box shorter or less tall. Anyway here it is, I’m out in the western pacific, and could use some long-distance help.

Thanx for reading this far, and 2X’s Thanx if you can contribute.

/* eNews Extended Widget
----------------------------------------------------------- */

.enews-widget {
background-color: #e4e4e4;
border: 8px solid #a80202;
box-shadow: 4px 4px 1px #000;
}

.enews-widget .widget-wrap {
border: 2px solid #e4e4e4;
}

.enews {
background: none;
margin: -16px -18px;
overflow: hidden;
padding: 25px 25px;
font: arial;
text-align: center;
text-shadow: none;

I didn’t include the sub-box code because it works fine.

http://tomjdolan.com

[Anita]

Add this to your style sheet around that same area of code:

.sidebar .enews-widget {
  width: 240px;
}

It's too wide.

---

Love coffee, chocolate and my Bella!

[tjd]

Hi Anita

Thank you for your suggestion. It worked perfectly. I am always in awe when you or someone like you answers a request for help and quickly offers the solution. It worked fine and I did get the full shadow effect…but what I don’t understand is how did you know the eNews box was too wide? When I look at the css code for the enews box, I don’t see any dimensions. And that is the difficulty in adjusting the top-to-bottom length…I don’t see any height control.

Today I played around with margin values. Changing them affected the content of the box but not the size of the box. But I can live with it ….Thank you so much:) Tom

[Anita]

I use Firebug for Firefox which is a developer tool add on for the browser. Google Chrome and Internet Explorer both have developer tools similar to this. That's how I found that it wasn't wide enough. It's not that it wasn't wide enough per se - but when you added the dimensions for the box shadow - that means you need to decrease the overall size of that area to accommodate that new dimension. So for example if the space is 320px and you add box shadow of say 5px - then you would need to decrease the 320 by 5 or a little more for that added 5px box shadow to show up.

---

Love coffee, chocolate and my Bella!

[tjd]

Mornin’ Anita

Well I actually added Firefox in to my Mac about a year ago just to be able to use Firebug which I also added…but I’m not sure how to use it and so I haven’t. Thanx for the explanation on the eNews box width. Makes sense to me. Any ideas how I might adjust the height as there is no height code for the box. I'll take a chance adjusting code if I have a place to begin but I don’t want to corrupt what I have. Any suggestions on a code to begin with?

You’ve been great as usual…Thanx Anita.

[Anita]

Change your current padding to what I have here.

.enews {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: -18px;
    overflow: hidden;
    padding: 25px 25px 5px;
    text-align: center;
    text-shadow: none;
}

---

Love coffee, chocolate and my Bella!

[tjd]

Hello Anita…again,

I added your code as you sent it. Interesting results with this eNews widget, which if you remember, I didn’t build it, it was a paste-n-copy of something I found here probably 2-3 years back. So anyway,

Added the code, then adjusted a couple of the values to see whatever. Changing the 5px value to 1px, then 0px had no effect on the spacing, so I have it set now at 5px. I then reset the first 25px to 30px, then to 35px where I left it. The number dropped the top line of text and gave me a more balanced look. I never touched the second 25px.

I like the look so much more now, I decided to move the widget up under the welcome widget. That moved the microphone down. As soon as I checked the results, I remembered why I moved the eNews box down the sidebar in the very beginning.

For some reason, the widget below the eNews box will always be too close to it…as it is now. But now I know, which I didn’t know 2-3 years ago, that I can use the widget title as a spacer which is why I just put in the “*” as the title of the Mic widget. No one will know why or even notice it and yet it gives me the separation I can’t get otherwise.

OK, I learn as I go, and as usual you always are a great helper. Thank you Anita. This the best it’s been since I 1st started on my website. Take a bow…you’re the MD I was hoping for.

Tom

[Anita]

The next widget appears closer because of the black shadow box. In the code I gave you above, add a bottom margin and it will bring it down:

.sidebar .enews-widget {
    margin-bottom: 35px;
    width: 240px;
}

---

Love coffee, chocolate and my Bella!

[tjd]

Anita….perfect!

I increased by increments of 5px and stopped at 55px eliminating the widget title which I thought added visual clutter in this case.

Wonderful Anita…Thankyou. Tom

[tjd]

Hello Anita,

I hope you get this message. I have experienced the 1st real, really real, problem with my website. I’m putting the blame on my Host, and they’re denying any culpability and frankly I’m in a pickle. The site is not loading properly since about Sept 10th, that’s Tokyo time. I attempted to open the site and received a message from Safari that said the site couldn’t be opened because of lack of Resources. Well this last week has been awful, frustrating and now just plain disheartening. Site was looking the best ever, and loading the fastest ever(pingdom) and then this happened. The last thing I worked on was configuring the enews box and I do appreciate your help with that, but maybe I went too far.

Yesterday I deactivated the enews widget because it was taking over 7 seconds to load, (as was the Header curiously) and I’ve never seen that on the pingdom report. OK, so my site load time has gone from 2.5 secs to over 11 secs, and after it loads, the site navigation stutters, is slow or simply stops working even from the Dashboard if I can get in.

As I’ve mentioned, I only touch css, nothing else, and until last nite I’ve never deactivated a plugin. So the result is this: with the enews deactivated, the load-time drops to about 7 secs but site still is not working properly. So I’ve gained nothing. I’ve been up since 4am looking for answers… this is really my “Official face” here in Japan and I need this working. OK,

Now that I’ve dropped all of that here, I am including the enews code from the css editor. Do you see anything there that might account for the site to not load properly, or somehow cease functioning? Essentially, in nice words I’m accusing my Host of ….whatever, and they’re saying the problem is my website and “they don’t fix websites!”

Sorry to drop this on you, but this was the last item I worked on prior to this happening so I thought I’d begin there. Can you help out at all? Here’s the code:

.enews-widget {
background-color: #F6F6F6;
border: 8px solid #a80202;
box-shadow: 6px 6px 5px #000;
}

.enews {
background: none;
margin: -18px;
overflow: hidden;
padding: 35px 25px 0px;
font: arial;
text-align: center;
text-shadow: none;
}

.sidebar .enews-widget {
width: 235px;
margin-bottom: 55px;
}

.enews #subbox {
background: #fff url(images/enews-subbox.png) no-repeat center;
-moz-box-shadow: 2px 2px 1px #000;
-webkit-box-shadow: 2px 2px 1px #000;
box-shadow: 2px 2px 1px #000;
color: #000;
text-align: center;
margin: 10px;
padding: 10px;
width: 80%;
border: 2px solid #000;
}

BTW, I haven't touched the subbox for about 2+ years, just saying. I simply don’t know what to do because I don’t understand what’s happening.

Any ideas, suggestions, anything??

Thanx Anita,
Tom

[Author]

Posts