[Support request] Image in sidebar

[Alan Stancliff]

I would like a graphic to appear in my sidebar right-side widget area. I’d like the graphic to take up the full width of the sidebar, without padding. It would be great if I could add it without a widget, but I don’t know how.

So I tried using the HTML widget, the image widget, and even the text widget, but they show a lot of space around the graphic. I tried setting the width and height to 100%, to no avail.

My website is in a protected folder, and you will need a username and password to access the site. I am sending those to you in a private message, along with credentials to access the dashboard.

[David]

Hi there,

so we can remove the padding from the first widget with this CSS:

.sidebar .widget:nth-child(1) {
    padding: 0;
}

To remove the little space that always appears below an image we can also add this, again it applies to the fist widget:

.sidebar .widget:nth-child(1) img {
    vertical-align: middle;
}

Changing the value here: :nth-child(#) will target different widgets in the list.

[Alan Stancliff]

Thanks Dave,

That worked well. But it leaves me with a couple of questions:

• How can I find that :nth-child(#) number? I did most of the styling on that site with CSS-Hero, although I entered the CSS code you gave me through Appearance > customize > additional CSS. I tried to use the Firefox Web Developer Tools to determine where I could see it for myself, but I got overwhelmed by the many tools and visual confusion. Can you suggest a way for me to find it?
• Secondly, I decided to get rid of the ridged widget frame, but I was unable to do that. Here is the code I tried to use:

  /*-*/
  /*-*/
  /*take space from picture in widget*/
  /*-*/
  .sidebar .widget:nth-child(1) {
      padding: 0;
  }
  .sidebar .widget:nth-child(1) img {
      vertical-align: middle;
  border-style:none!important;
  border-color:transparent!important;
  }
  /*-*/
  /*-*/

However that did not get rid of the border. Probably there is a simple fix, but I can’t figure it out

Again, thanks for the help.

[David]

The # :nth-child(#) refers to the logical order of elements in a list. It doesn’t care what the element specifically is.

For example this selector: .sidebar .widget would refer to all widgets within the sidebar. By adding the :nth-child(1) it states get me the first widget you find in the sidebar. Changing it to two would get the second and so on.

The border is being applied to the .widget as opposed to the img so your CSS would look like this:

#right-sidebar .widget:nth-child(1) {
    padding: 0;
    border: none !important;
}
#right-sidebar .widget:nth-child(1) img {
    vertical-align: middle;
}

The !important statement is required on the border property as the CSS applying the border has a greater specificity – basically its using a CSS Selector that trumps the one we’re using.

[Alan Stancliff]

Well, Dave,

That worked fine. But it also worked on the widget on the left. I only wanted it to work on the widget on the right. Is there a way to do that?

Also, I noticed something a bit odd in the second widget on the left (search). I think some of the search box, as well as the widget title, are out of view. How can I fix that?

[David]

Changed the CSS above so it only applies to the Right Sidebar.

[Alan Stancliff]

Thanks Dave,

So the placing of #right- in front of sidebar.widget:nth-child(1) provides the level of granularity I need. I’m putting that in my notes.

[David]

#right-sidebar is a unique ID belonging to the right sidebar. Likewise there is the
#left-sidebar.
Whereas both the left and right sidebar both carry the .sidebar class.

[Alan Stancliff]

Thanks Dave,
So much to learn.

By the way, how c@n I fix the spacing in the search widget? Somehow I seemed to have fouled it up.

[David]

So this CSS that you have in Customizer > Additional CSS is removing the bottom padding, you can delete the entire rule as the margin-bottom property is being overwritten by other styles you have added:

.one-container .sidebar .widget {
      margin-bottom: 0;
      padding-bottom: 0;
}

[Alan Stancliff]

Thanks for all the help, Dave. I appreciate it and have learned several new things.

[Alan Stancliff]

By the way Dave,

Of course, I was also trying to do some research via Google at the same time that I was asking for answers here.

As stated, I had tried to find the ID for the widget. Earlier today, I found a way to get the widget ID, which I tested (although I don’t presently need it as your suggestions worked beautifully). The method I found for getting widget IDs works quite well.

However, I thought others who search these forum posts for clues might benefit from it. It involves adding a bit of PHP code. I used the Snippets plugin to do it. I found the code in an article called “How to get the Widget ID in WordPress” in the SpiceWP blog. Here is the PHP code:
*****

add_action('in_widget_form', 'spice_get_widget_id');
function spice_get_widget_id($widget_instance)
{
    
    // Check if the widget is already saved or not. 
    
    if ($widget_instance->number=="__i__"){
     
     echo "<p><strong>Widget ID is</strong>: Pls save the widget first!</p>"   ;
    
  }  else {

        
       echo "<p><strong>Widget ID is: </strong>" .$widget_instance->id. "</p>";

    }
}

[David]

Thats cool – thanks for sharing, i am sure others will find that tip useful.

[Author]

Posts