Social Media Widget and Recent Posts Widget Edits

• 

  ruralreverend · Member · Jul 22, 2015 at 6:59 pm

  • Copy link
  • Add topic to favorites

  I am attempting to make some CSS revisions to my social media widget (which in turn changed my recent posts widget slightly) and would love some help. I am using the “Profile” theme and the original format showed the icons in a vertical list so I wanted to change them to a horizontal list, make the icons a little bigger and also change the color. After getting some help in chat I was able to get it to be horizontal with it spaced out (padding edits) but the icons and color is what I wanted to work on next. The problem is that I noticed the recent posts widget also changed from a list to a random format which I think may be due to the padding change. Below is the edits I have made, could you tell me what I need to do to fix it all? Thank you!!!

  .widget ul li {
  display: inline;
  background: none;
  line-height: 0;
  margin: 5px 0;
  padding: 12px;
  overflow: hidden;
  }
  .ul li genericon {
  font-size:28px;
  color: #26002d
  }

  The blog I need help with is: (visible only to logged in users)

• 

  darrellschulte · Member · Jul 22, 2015 at 9:40 pm

  • Copy link

  Hi ruralreverend!

  I bet you just want to make the social media widget icons horizontal, right? I made just a slight adjustment to the CSS you provided. This new version is simply making an adjustment to a single widget instead of every widget.

  .widget_wpcom_social_media_icons_widget ul li {
      display: inline;
      background: none;
      line-height: 0;
      margin: 5px 0;
      padding: 12px;
      overflow: hidden
  }
  
  .ul li genericon {
      font-size: 28px;
      color: #26002d
  }

• 

  ruralreverend · Member · Jul 22, 2015 at 9:57 pm

  • Copy link

  Thank you! Yes, that is what I want to do. It did fix the vertical to horizontal and put the recent posts back to normal, however the font size and color did not change, do I need to try something else for that part?

• 

  ruralreverend · Member · Jul 22, 2015 at 9:58 pm

  • Copy link

  Ah! Nevermind! I changed it to just .genericon and took out the “ul li” and it worked perfectly! Thank you again!