WordPress.org

Ready to get started?Download WordPress

Forums

Feed Them Social
[resolved] Instagram Widget (16 posts)

  1. cavegirldiary
    Member
    Posted 6 months ago #

    My Instagram Widget only appears in a 1 column version. What can I do to change in a 2 or 3 column version?
    Thanks!

    http://wordpress.org/plugins/feed-them-social/

  2. slickremix
    Member
    Plugin Author

    Posted 6 months ago #

    This problem is usually caused from smaller sidebars. Although we don't have a setting option for this just yet, you can adjust the CSS to allow for at at least 2 to fit in a row.

    If you send an example link I can point you to the CSS to change, or add an override in your theme style, so when you update FTS later that change is not overwritten.

  3. slickremix
    Member
    Plugin Author

    Posted 6 months ago #

    This problem is usually caused from smaller sidebars. Although we don't have a setting option for this just yet, you can adjust the CSS to allow for at at least 2 to fit in a row.

    If you send an example link I can point you to the CSS to change, or add an override in your theme style, so when you update FTS later that change is not overwritten.

  4. slickremix
    Member
    Plugin Author

    Posted 5 months ago #

    Closing this since no response. We now have a custom CSS box in the settings page of our plugin on wordpress admin panel. This should allow you to make any corrections to fit your theme!

  5. amyelandry
    Member
    Posted 3 months ago #

    Hey Slickremix,

    I'm having the same issue. My side bar is rather narrow, but even when I place the widget in my footer it does the same thing. Generally I like to fix images that are 200 pixels in width, so happy if I can get 2 Instagram images across, even if they're 100 pixels wide each.

    Any help? I've not activated the plug in on my site because it doesn't look good as the long single feed.

    Also, once the photos sit with two across, can I also control how many images are shown down the feed? Ideally I'd like 2 across, and 3 down.

    Thank you!!

  6. amyelandry
    Member
    Posted 3 months ago #

    P.s: I don't know anything about coding, but I know how to find the CSS file to edit within the plugin's settings.

  7. slickremix
    Member
    Plugin Author

    Posted 3 months ago #

    Send an example link and I'll see if I can whip up a quick bit of css you can paste in the settings page to get it looking proper :)

  8. amyelandry
    Member
    Posted 3 months ago #

    You can see the lay out I'd like if you scroll down Sarah Wilson's home page here: http://www.sarahwilson.com It's in her side bar - although she is not using FTS. But it gives you an idea of the layout I'd like.

    Hope that's what you need?

    Thank you!

  9. slickremix
    Member
    Plugin Author

    Posted 3 months ago #

    Gotcha. I just need to be able to see it on your site so I can make the CSS edit. Otherwise I can't make it look perfect.

  10. amyelandry
    Member
    Posted 3 months ago #

    Ok, I'll get onto this today! Apologies for the delayed reply. I'll confirm once it's active on my site. Thank you again!

  11. amyelandry
    Member
    Posted 3 months ago #

    Hey Slickremix - apologies for the delay!

    I've update the widget on my site, on the right side bar:
    http://www.amyelandry.com/blog

    The code I'm using in the widget is:

    [fts instagram instagram_id=4111544]

    Interestingly, each photo is only showing a cropped image. It'd be great if it were possible to show each photo in it's entirety (not sure if that's possible?), and perhaps no border. But if that can't be changed then not a problem at all.

    I'd love 2 photos across (2 columns), and 3 down, or 2 down. I don't mind really.

    Thank you very much in advance!!

  12. slickremix
    Member
    Plugin Author

    Posted 3 months ago #

    Ok here is a photo depicting the new look, in your case it would be better to just upload this file to the plugins folder since this customization is a bit more advanced. You will need to overwrite the existing css file to get it to look like the photo.

    http://www.slickremix.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-28-at-12.40.24-PM.png

    Here is the location of the file you need to overwrite on your server.
    http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css

    Below is code you will want to use. Just copy and paste all this over your existing style sheet as noted above.

    .clear {
         clear:both;
    }
    .instagram-placeholder ul, .instagram-placeholder li	{
    	padding: 0 !important;
    	margin: 0 !important;
    
    }
    .widget .instagram-placeholder ul, .widget .instagram-placeholder li	{
    	padding: 0 !important;
    	margin: 0 !important;
    
    }
    .instagram-placeholder p {
        margin:0;
        padding:0;
    }
    .instagram-placeholder	{
    	position: relative;
    	float: left;
    	z-index:0;
    	display: inline;
    	margin: 0px 20px 20px 20px;
    	font-family:'proxima-nova', 'Helvetica Neue', Arial, Helvetica, sans-serif !importatnt;
    
    }
    .widget .instagram-placeholder	{
    	margin: 0px 9px 10px 0px;
    
    }
    .instagram-image {
        width:150px;
        height:150px;
    	position:relative;
    	z-index:1;
    	background-color:#ccc;
    	display:block;
    }
    .widget .instagram-image {
        width:105px;
        height:100px;
    	position:relative;
    	z-index:1;
    	background-color:#ccc;
    	display:block;
    	background-size:100% !important;
    }
    .instaG-photoshadow {
      background-color: rgba(0, 0, 0, 0.1);
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      border: 1px solid rgba(0, 0, 0, 0.12);
      z-index: 1;
      -webkit-transition: background-color 0.05s ease-out;
      -moz-transition: background-color 0.05s ease-out;
      -o-transition: background-color 0.05s ease-out;
      transition: background-color 0.05s ease-out;
      width:148px;
        height:148px;
     }
     .widget .instaG-photoshadow {
      width:103px;
        height:98px;
     }
    .instagram-placeholder:hover .instaG-photoshadow {
       background-color: rgba(0, 0, 0, 0);
      border: 1px solid rgba(0, 0, 0, 0.12);
      -webkit-transition: background-color 0.01s ease-out;
      -moz-transition: background-color 0.01s ease-out;
      -o-transition: background-color 0.01s ease-out;
      transition: background-color 0.01s ease-out;
      border: 1px solid rgba(0, 0, 0, 0.12);
      width:148px;
        height:148px; 
    
    }
    .widget .instagram-placeholder:hover .instaG-photoshadow {
      width:103px;
        height:98px; 
    
    }
    a.instaG-backg-link {
    	position:relative;
    	display:block;
    }
    .instagram-placeholder .date {
    	text-align: center;
    	margin-bottom: 5px;
    	font-size:12px;
    	height:20px;
    	line-height:20px;
    	font-weight:bold;
    	color:#888888;
    	position: relative;
    	z-index:1;
    	opacity:0;
    	pointer-events: none;
    	-webkit-transition: all 0.15s ease-out 0.1s;
    	-moz-transition: all 0.15s ease-out 0.1s;
    	-o-transition: all 0.15s ease-out 0.1s;
    	transition: all 0.15s ease-out 0.1s;
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    	display:none;
    }
    .widget .instagram-placeholder .date {
    	text-align: center;
    	margin-bottom: 5px;
    	font-size:11px;
    	height:15px;
    	line-height:20px;
    	display:none;
    }
    .instagram-placeholder .heart-comments-wrap ul {
    	height:20px;
    	margin:10px 0 0 0 !important;
    }
    .widgets .instagram-placeholder .heart-comments-wrap ul {
    	height:15px;
    	margin:6px 0 0 0 !important;
    }
    .instagram-placeholder .heart-comments-wrap li:first-child {
    
    }
    .instagram-placeholder .heart-comments-wrap li {
    	display: inline-block;
    	margin: 10px 0 0 0.5em !important;
    	pointer-events: none;
    	padding:0 0 0 16px !important;
    	line-height:10px !important;
    	font-size:12px !important;
    	font-weight:bold;
    	color:#888888;
    	position:relative;
    	z-index:1;
    	opacity:0;
    	-webkit-transition: all 0.15s ease-out 0.1s;
    	-moz-transition: all 0.15s ease-out 0.1s;
    	-o-transition: all 0.15s ease-out 0.1s;
    	transition: all 0.15s ease-out 0.1s;
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .widget .instagram-placeholder .heart-comments-wrap li {
    	display: inline-block;
    	margin: 6px 0px 5px 2px !important;
    	pointer-events: none;
    	padding:0 0 0 15px !important;
    	line-height:10px !important;
    	font-size:11px !important;
    	display:none;
    }
    .widget  .instagram-placeholder .heart-comments-wrap .instagram-image-likes {
         margin-right:4px !important;
    	display:none;
    }
    .instagram-placeholder .fts-backg	{
        position: absolute;
        z-index:0;
    
    	display:none;
        /* top: 25px; */
    	left: 0;
    
        /* height:150px; */
    
        /* width: 100%; */
    
        /* margin: -5px; */
    
        /* padding: 5px; */
    	background: #FFF;
    	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, 0.1);
    	-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.1);
    	box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 5px rgba(0, 0, 0, 0.1);
    	-webkit-transition: all 0.15s ease-out 0.1s;
    	-moz-transition: all 0.15s ease-out 0.1s;
    	-o-transition: all 0.15s ease-out 0.1s;
    	transition: all 0.15s ease-out 0.1s;
    }
    .widget .instagram-placeholder .fts-backg	{
        /* position: absolute; */
        /* z-index:0; */
    
        /* top: 20px; */
    
        /* left: 0; */
    
        /* height:100px; */
    
        /* width: 100%; */
    
        /* margin: -5px; */
    
        /* padding: 5px; */
    
        /* background: #FFF; */
    	font-size:11px;
    }
    .widget .date {
         font-size:11px;
    }
    /* .instagram-placeholder:hover .fts-backg	{
        margin: -28px -12px;
    	padding: 8px 12px;
    	height:193px;
    	-webkit-transition-delay: 0s;
    	-moz-transition-delay: 0s;
    	-o-transition-delay: 0s;
    	transition-delay: 0s;
    	-webkit-transition-duration: 0.1s;
    	-moz-transition-duration: 0.1s;
    	-o-transition-duration: 0.1s;
    	transition-duration: 0.1s;
    	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
    	box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 1px 5px rgba(0,0,0,0.2);
    } */
    
    .widget .instagram-placeholder:hover .fts-backg	{
        margin: -22px -10px;
    	padding: 5px 10px;
    	height:135px;
    	display:none;
    }
    .instagram-image-likes	{
    	background:url(../images/hearts-instagram.jpg) no-repeat;
    
    }
    .instagram-image-comments	{
    	background:url(../images/comments-instagram.jpg) no-repeat;
    }
    
    .instagram-placeholder:hover .date, .instagram-placeholder:hover .instagram-image-likes, .instagram-placeholder:hover .instagram-image-comments {
    	opacity: 1;
    	z-index:1;
      -webkit-transition-delay: 0.1s;
      -moz-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      transition-delay: 0.1s;
    	display:none;
    }
    @keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }
    
    @-webkit-keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.5; }
        to { opacity: 1.0; }
    }
  13. amyelandry
    Member
    Posted 3 months ago #

    Legend!

    Although, I cannot seem to find the right file to overwrite.

    I'm checking here http://amyelandry.com/wp-admin/plugin-editor.php

    I've gone into the plug in settings, but file doesn't exist down the right side, where it shows the list of current plug in files.

    All that shows up are the following:

    feed-them-social/feed-them.php
    feed-them-social/admin/feed-them-system-info.php
    feed-them-social/admin/feed-them-settings-page.php
    feed-them-social/readme.txt
    feed-them-social/includes/feed-them-functions.php
    feed-them-social/js/powered-by.js
    feed-them-social/css/powered-by.css

  14. slickremix
    Member
    Plugin Author

    Posted 2 months ago #

    oh yeah that editor is such a pain, never shows the subfolders. You should be able to find the file by using the File Manager on your hosting account. Or by logging into your server with your FTP credentials. Wish I had an easier way for you, sorry.

  15. amyelandry
    Member
    Posted 2 months ago #

    So when I add this into my style.css is that the stylesheet for my theme, or specifically for my plugin (as originally suggested when going through my wordpress instead of cpanel)?

    Hope that makes sense! Just want to be sure I'm adding it to the correct file. I couldn't find the plugin file - but perhaps that is because the widget is no longer active?

  16. slickremix
    Member
    Plugin Author

    Posted 2 months ago #

    No problem... Update the CSS in your plugin. Here is the path again.
    http://amyelandry.com/wp-content/plugins/feed-them-social/feeds/instagram/css/styles.css

Reply

You must log in to post.

About this Plugin

About this Topic