Dotted line under in the middle of social icons

• 

  jasonke123 · Member · May 18, 2016 at 11:26 pm

  • Copy link
  • Add topic to favorites

  Hi,
  1.I add a text widget to my current theme. But there is a dotted line showing up in the middle of my social icons. How to fix it?

  2.I use CSS to add a pop up picture to one of my icon (When mouse over the icon, a picture will show up below the cursor)

  The effect that I want can be seen from the url below:
  https://jasonkedotcom.files.wordpress.com/2016/05/screen-shot-2016-05-19-at-09-24-46.jpg

  Thanks!

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

• 

  thesacredpath · Member · May 18, 2016 at 11:48 pm

  • Copy link

  Hi there, links in text widgets in Ryu have a bottom border. You can remove that with the following CSS.

  #text-7 a {
      border-bottom: none;
  }

  The text widget you have your social icons in is #text-7. Change 5 to 7 in your code and the image will appear.

• 

  thesacredpath · Member · May 18, 2016 at 11:52 pm

  • Copy link

  There really isn’t enough room above the icons for the image to appear. You will need to have it below the icons. You can set the “top” value to 0 to have the image appear below the icon.

• 

  thesacredpath · Member · May 18, 2016 at 11:53 pm

  • Copy link

  Or, better yet, make it position: absolute and remove the “top” and “right” declarations and it will show right below the line of icons.

• 

  jasonke123 · Member · May 19, 2016 at 1:30 am

  • Copy link

  Thank you for your answer.

  I still have another question:

  What code do I need to add if I want to change the size of the pop up picture?

  Thank you

• 

  thesacredpath · Member · May 19, 2016 at 2:35 am

  • Copy link

  Change the :after rule you have to the following.

  #text-7 a.my-social-1:hover::after {
      content: url("https://jasonkedotcom.files.wordpress.com/2016/05/qrcode_for_gh_3529896e4c5b_258.jpg");
      display: block;
      position: absolute;
      transform: scale(0.6);
      left: -40px;
      top: 10px;
  }

  The transform declaration will allow you to adjust the size.

  Then add the following also to your custom CSS. This will keep the images within the confines of the left top sidebar div.

  #top-sidebar-one {
      position: relative;
  }

• 

  jasonke123 · Member · May 19, 2016 at 2:58 am

  • Copy link

  Perfect solution!

  Thank you.

• 

  thesacredpath · Member · May 19, 2016 at 3:21 am

  • Copy link

  Hooray and you are welcome!