Title: Sidebar widgets editing HTML code
Last modified: August 21, 2016
---
# Sidebar widgets editing HTML code
* [ruth@cataldolife.com](https://wordpress.org/support/users/ruthcataldolifecom/)
* (@ruthcataldolifecom)
* [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-widgets-editing-html-code/)
* I have the Forever theme on self hosted WordPress.
* I am very new to editing code – and managed to figure out some stuff but now
I am lost!
* I want to reduce the amount of white space between the image widgets on my sidebar(
specifically my social media icons) I want them to be closer together and not
so spaced out.
* How do I do this??
* My site is: [http://www.cataldolife.com](http://www.cataldolife.com)
* Please be specific – screenshots would be helpful!
* Thanks
Viewing 1 replies (of 1 total)
* Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
* (@zoonini)
* [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-widgets-editing-html-code/#post-4150295)
* Hi there, I used [Firebug](https://getfirebug.com/) (a handy tool for working
with CSS) to determine that the spacing between your images there is being applied
the margin on the “aligncenter” class:
* ```
.aligncenter {
clear: both;
display: block;
margin: 0.8075em auto;
}
```
* Each widget area has a unique ID, which allows you to target elements within
the widget using CSS code.
* It looks like you’ve used a separate widget for each image. If you look in the
browser’s source code, you’ll see this bit at the start of the code for the first
social-media widget (Twitter):
* `aside id="widget_sp_image-6"`
* That’s the unique ID for the Twitter widget. The IDs for the rest of the social-
media widgets follow the same format, numbered consecutively through widget_sp_image-
10 for Bloglovin.
* You can now target the images within these widgets with some CSS code:
* ```
#widget_sp_image-6 .aligncenter, #widget_sp_image-7 .aligncenter, #widget_sp_image-8 .aligncenter, #widget_sp_image-9 .aligncenter, #widget_sp_image-10 .aligncenter {
margin: 0 auto;
}
```
* This removes the top and bottom margin being applied by the original class “aligncenter.”
* An easy way to add custom CSS like this is to activate the [Custom CSS](http://jetpack.me/support/custom-css/)
module in your Jetpack plugin. This way, your CSS won’t be overwritten when you
update the theme.
Viewing 1 replies (of 1 total)
The topic ‘Sidebar widgets editing HTML code’ is closed to new replies.
* 
* Forever
* [Support Threads](https://wordpress.org/support/theme/forever/)
* [Active Topics](https://wordpress.org/support/theme/forever/active/)
* [Unresolved Topics](https://wordpress.org/support/theme/forever/unresolved/)
* [Reviews](https://wordpress.org/support/theme/forever/reviews/)
## Tags
* [html code](https://wordpress.org/support/topic-tag/html-code/)
* [sidebar widgets](https://wordpress.org/support/topic-tag/sidebar-widgets/)
* 1 reply
* 2 participants
* Last reply from: [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
* Last activity: [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-widgets-editing-html-code/#post-4150295)
* Status: not resolved