Support » Plugin: Smash Balloon Social Photo Feed - Best Social Feed Plugin for WordPress » Align Instagram feed (including buttons) to left & button shape

  • Resolved fuxAY

    (@fuxay)


    Awesome plugin! Thank you!

    I have an instagram plugin on the home page and also sidebar. Is it possible to align the sidebar instagram feed (including buttons) to the left? At the moment it is aligned centre – please see link below.

    http://www.thenisekoexperience.com/blog

    An extra question! Can the shape of the buttons be changed? For example to change the shape to be consistent with the ‘Register Here’ button in the footer?

    Again awesome plugin…THANKS!

    https://wordpress.org/plugins/instagram-feed/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hey glad you like our plugin! I see what you are saying about the feed looking different than the rest of the widgets you have there. You can get it looking how you want with some custom CSS. If you go to the Settings page, “Customize” tab, and scroll down to the “Custom CSS” area, you can paste in the following:

    #sb_instagram {
      margin-left: -7px;
    }
    #sb_instagram #sbi_load {
      text-align: left ;
    }
    #sb_instagram #sbi_load .sbi_load_btn {
      margin-left: 8px;
      padding: 1em 2em;
      border-radius: 100px;
      text-transform: uppercase;
    }
    #sb_instagram .sbi_follow_btn a {
      margin-left: 3px;
      padding: 1em 2em;
      border-radius: 100px;
      text-transform: uppercase;
    }

    For the last two parts of the code, the “padding” property makes the button larger, the “border-radius” property rounds the edges like your other button, and the “text-transform” property makes all of the letters uppercase.

    Let me know if you need any more help with this. Have a great day!

    – Craig

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hello again, right after I sent my first message I realized you also mentioned that you have a feed on your homepage. Right now this code will affect both feeds. We have a fix for this though!

    For the sidebar feed, use a shortcode that adds a class to that specific feed. Copy and paste this shortcode:

    [instagram-feed class=sbisidebar]

    Then insert the code I gave you with some changes:

    #sb_instagram.sbisidebar {
      margin-left: -7px;
    }
    #sb_instagram.sbisidebar #sbi_load {
      text-align: left ;
    }
    #sb_instagram #sbi_load .sbi_load_btn {
      margin-left: 8px;
      padding: 1em 2em;
      border-radius: 100px;
      text-transform: uppercase;
    }
    #sb_instagram .sbi_follow_btn a {
      margin-left: 3px;
      padding: 1em 2em;
      border-radius: 100px;
      text-transform: uppercase;
    }

    Let me know if you need anything else.

    – Craig

    Thread Starter fuxAY

    (@fuxay)

    Hi Craig,

    Awesome it works! With your help I was able to tweak it a bit more so that the format of the text is also matching.

    Check it out…

    http://www.thenisekoexperience.com/

    One last question – can the hover on the buttons be deactivated?

    Cheers!

    Ps. I will be sure to post a review!

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Hello again,

    Yeah that looks perfect! Very nice.

    I’m glad we could help you out and thanks for leaving a review. That really helps us out.

    Here is some more CSS to cancel the opacity change on hover and on focus:

    #sb_instagram .sbi_follow_btn a:hover, #sb_instagram .sbi_follow_btn a:focus, #sb_instagram #sbi_load .sbi_load_btn:hover, #sb_instagram #sbi_load .sbi_load_btn:focus {
      opacity: initial;
    }

    Many thanks,

    Craig

    Thread Starter fuxAY

    (@fuxay)

    Hi Craig,

    Awesome thanks!

    Keep up the good work!

    Cheers

    Pete

    Plugin Author Craig at Smash Balloon

    (@craig-at-smash-balloon)

    Thanks Pete!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Align Instagram feed (including buttons) to left & button shape’ is closed to new replies.