Closing the Gap between the Entry Title and a Slideshow
-
We can adjust the search widget spacing above or below. This corrects the width of the field on the search widget.
.widget_search #s { max-width: 100%; width: 100%; } -
I’m seriously getting foggy. I tried adding this, but couldn’t define the above or below. I tried several combinations, with above and below as position and in some other arrangements, but it always affected both of the widget search bubbles. I have it back to the banner searchform in the space, because the varied sizes just looks right. If I can make individual adjustments to one (that I’ll re-add to replace the banner one again), then the other separately, I’ll set it back up that way. That entry field is important, but so is the overall look. Not telling you anything you don’t already know, just conveying the mindset.
-
Hey, again! Okay, if I can eliminate the space created by having a search widget with no title, this thing is golden. Is it even possible?
I am continually battling to eliminate this gap that exists between the top image widget and the next widget below (no matter what it is), in any way possible. It’s just too much space. No matter what I’ve done (except the banner searchform that didn’t work properly), it remains.
-
Don’t bother reading any of that^….Figured it out, finally. Had to make several adjustments (and add some new CSS for positioning) to get it working, but it’s there. Whew! Thanks again for the pointers.
-
Is it possible to adjust the shadow inside the search forms? My whole site has light coming from the opposite direction of what that shadow depicts.
-
-
Didn’t want you to miss this, so it’s back at the bottom.
Is it possible to adjust the shadow inside the search forms? My whole site has light coming from the opposite direction of what that shadow depicts.
-
Also…Put this together to adjust the searchform’s position.
#searchform #s {
margin-top: -60px;
}Can you tell me the proper title to use in order to make similar adjustments to the Top Posts & Pages widget? Like #searchform is how I pinpointed the (obviously) searchform. Couldn’t figure out the other.
-
I’d also like to adjust the same spacing for the image widget of the United States shaped flag, but have no defining title to do so there either. Is there somewhere I can locate each widget’s identifying title (in regards to CSS protocol) to make said adjustments to their spacing individually? Or, would you be able to just give me the necessary info for these two (the Top Posts & Pages and USA shaped flag image widgets)?
-
…and need to hide the slideshow controls for the desktop view only. I don’t really want them on mobile either, but the space it would open up is way too big.
-
Shadow inside search form:
.widget_search #s { box-shadow: 3px 3px 5px #d0d0d0 inset, 0 0 6px #fff; }The spacing on the search widget can be adjusted. Since you don’t have one in the sidebar, this is a guess sort of. First is the top and bottom margins, second makes the widget input field full width.
.widget_search { margin-bottom: 2.2em; margin-top: 2.2em; } .widget_search #s { max-width: 100%; width: 100%; }Top posts widget margins and padding.
.widget_top-posts { margin: 1em 0; padding: 0 30px 25px 0; }The spacing between the hudson enews and flag is in the enews (padding and margin). Add the following and adjust.
.image-20 { margin: 1em 0; padding: 0 30px 25px 0; }If you wish to adjust the spacing below the flag, then this.
.image-19 { margin: 1em 0; padding: 0 30px 25px 0; }Not sure on definition of “mobile” This will hide the slideshow controls on screen/window widths greater than 600px.
@media screen and (min-width: 600px) { .slideshow-controls { display: none; } } -
-
Mostly worked out great, but the code for the images wasn’t affecting anything.
Tried
.image-20 {
margin: 1em 0;
padding: 0 30px 25px 0;
}And (with the image’s number according to the media library)
.image-5477 {
margin: 1em 0;
padding: 0 30px 25px 0;
}Added in some other lines to see if anything effected the spacing, but it didn’t.
It’s just the spacing below Hudson, and above and below the flag, that remains. The rest is looking sharper, for sure!
-
^^and…I put a temporary title in for the flag widget, but I do still want to close that gap up if I can.
-
Scratch all of that^, except for > Thanks much, Sir! You are Greatly appreciated. And I would still like to know the code to adjust spacing for image widgets in the sidebar. The code you gave me, and my attempts at figuring out alternatives, didn’t pan out. It had no effect, unfortunately. I kind of went off the second I realized I could alter the base theme’s appearance a little. I have everything as I want it, but would ultimately like to remove the title I created for the flag image sidebar widget.
-
I’m sorry, the widget codes should have a # in front of them since they are an id instead of a class. My bad.
The image widget with the flag doesn’t have any top padding or margin. As you have things now, you have to adjust the bottom padding on the recent posts widget.
.widget_top-posts { padding-bottom: 0; } -
-
-
Had to back off on some of the customization, as things were looking too busy. Had to scrap your slideshow repairs of the larger display, and kind of bring it back to square one on the home page for desktop and mobile devices (mobile..LOL). It’s a little more simplistic, and easier on the eye. Nothing I need, or you really need to know, just telling ya! Thanks again for your help, input and feedback during the build!!!
-
Man I really like the way the opacity drops, when you load a different page than the one you’re on, when in Customize. It looks very cool. Am I able to achieve that effect (with a bit more opacity) on hudsonchemicals.com, so the next loading page is slightly opaque like that?!
- The topic ‘Closing the Gap between the Entry Title and a Slideshow’ is closed to new replies.
WordPress.com Forums 