How to reduce twitter love icon?

  • Resolved alirashidy

    (@alirashidy)


    4 years, 3 months ago

    Hey, thanks for making this awesome plugin, it was exactly what I was looking for.

    I think I need help with reducing the twitter love icon, I want it to be 18px, tried doing that in CSS but failed since it’s an image, so I downloaded the image, reduced it’s size and uploaded it and changed the URL in custom CSS but It didn’t show up at all.

    Can you please guide me on how to reduce its size to match my use case?

    Thanks,
    Ali

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Alimir

    (@alimir)

    Hi @alirashidy

    First of all, you have to change the dimensions of the compressed image according to your needs.
    Default Image: https://imgur.com/a/3zfFwl1
    I suggest using the following service or Photoshop to change the size of the photo in the first step.
    https://resizeimage.net/

    Then we need to make changes to the previous CSS code based on the new size. For example, if the new photo size was 1500×50 pixels, our code changes to:

    .wpulike.wpulike-robeen .wp_ulike_btn.wp_ulike_btn_is_active::after {
transition-duration: 1s;
background-position: -1450px;
}
.wpulike.wpulike-robeen .wp_ulike_btn::after {
background: url(https://imgur.com/a/3zfFwl1) no-repeat;
width: 50px;
height: 50px;
}

    The most important point in this style is the background-position value, which is calculated based on the width subtraction on height. (Eg 1500-50)
    Also, if you want the mobile size to be different from the desktop mode, you can use the following structure:
    @media (max-width:480px){}

    Thread Starter alirashidy

    (@alirashidy)

    Thanks a million!

    With your help I played around with the values that you provided and was able to make it right, problem solved!

    Thanks again for your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to reduce twitter love icon?’ is closed to new replies.