Instagram Feed - Version 2.0

Version Description

  • MAJOR UDPATE
  • New: We've rebuilt the plugin from the ground up with a focus on performance and reliability. Your feeds are now loaded from the server using PHP removing the reliance on AJAX.
  • New: Local copies of images are now automatically stored on your server and used in your feed. You can disable this feature in the "Advanced" section of the "Customize" tab. Use the "Favor Local Images" setting on the "Customize" tab, "Advanced" sub-tab to have the plugin use local images whenever available, thus removing reliance on the Instagram CDN.
  • New: You can now set the plugin to check for new Instagram posts in the background rather than when the page loads by using the new "Background caching" option which utilizes the WordPress "cron" feature. Enable this using the "Check for new posts" setting on the "Configure" tab.
  • New: If you have a business account for Instagram, you can now connect to the new Instagram API. You can continue to use your connected personal account and do not need to connect a business account.
Download this release

Release Info

Developer smashballoon
Plugin Icon 128x128 Instagram Feed
Version 2.0
Comparing to
See all releases

Code changes from version 1.12.2 to 2.0

README.txt CHANGED
@@ -1,9 +1,9 @@
1
=== Smash Balloon Social Photo Feed ===
2
Contributors: smashballoon, craig-at-smash-balloon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
- Requires at least: 3.0
5
Tested up to: 5.2
6
- Stable tag: 1.12.2
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
@@ -324,6 +324,13 @@ We understand that sometimes you need help, have issues or just have questions.
324
* Plus more customization options added all the time!
325
326
== Changelog ==
327
= 1.12.2 =
328
* Fix: Fixed error from Instagram when connecting a personal account.
329
1
=== Smash Balloon Social Photo Feed ===
2
Contributors: smashballoon, craig-at-smash-balloon
3
Tags: Instagram, Instagram feed, Instagram photos, Instagram widget, Instagram gallery
4
+ Requires at least: 3.4
5
Tested up to: 5.2
6
+ Stable tag: 2.0
7
License: GPLv2 or later
8
License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
324
* Plus more customization options added all the time!
325
326
== Changelog ==
327
+ = 2.0 =
328
+ * **MAJOR UDPATE**
329
+ * New: We've rebuilt the plugin from the ground up with a focus on performance and reliability. Your feeds are now loaded from the server using PHP removing the reliance on AJAX.
330
+ * New: Local copies of images are now automatically stored on your server and used in your feed. You can disable this feature in the "Advanced" section of the "Customize" tab. Use the "Favor Local Images" setting on the "Customize" tab, "Advanced" sub-tab to have the plugin use local images whenever available, thus removing reliance on the Instagram CDN.
331
+ * New: You can now set the plugin to check for new Instagram posts in the background rather than when the page loads by using the new "Background caching" option which utilizes the WordPress "cron" feature. Enable this using the "Check for new posts" setting on the "Configure" tab.
332
+ * New: If you have a business account for Instagram, you can now connect to the new Instagram API. You can continue to use your connected personal account and do not need to connect a business account.
333
+
334
= 1.12.2 =
335
* Fix: Fixed error from Instagram when connecting a personal account.
336
css/sb-instagram-admin.css CHANGED
@@ -123,7 +123,7 @@
123
}
124
125
#sbi_admin .sbi_radio_label{
126
- width: 90px;
127
padding-top: 5px;
128
129
display: -moz-inline-stack;
@@ -156,6 +156,28 @@
156
-webkit-border-radius: 2px;
157
border-radius: 2px;
158
}
159
160
/* License */
161
#sbi_admin .sbi_license_status{
@@ -179,6 +201,13 @@
179
width: 100%;
180
clear: left;
181
}
182
#sbi_admin .sbi_pro,
183
#sbi_admin .sbi_pro label,
184
#sbi_admin .sbi_pro input,
@@ -381,7 +410,7 @@
381
-webkit-border-radius: 4px;
382
border-radius: 4px;
383
}
384
- .sbi_review_notice .ctf-notice-text{
385
float: left;
386
clear: none;
387
width: 100%;
@@ -410,7 +439,9 @@
410
.sbi_review_notice .links a:first-child{
411
/*padding-left: 0;*/
412
}
413
- .sbi_review_notice .sbi_notice_close{
414
position: absolute;
415
top: 0;
416
right: 0;
@@ -581,7 +612,7 @@
581
#sbi_admin .sbi_connected_account {
582
position: relative;
583
box-sizing: border-box;
584
- padding: 10px 35px 10px 10px;;
585
border-radius: 5px;
586
background: #fff;
587
margin-bottom: 5px;
@@ -589,30 +620,37 @@
589
clear: both;
590
border: 1px solid #ddd;
591
}
592
#sbi_admin .sbi_connected_account .sbi_ca_avatar{
593
margin-right: 15px;
594
}
595
#sbi_admin .sbi_connected_account .sbi_ca_username {
596
margin-left: 0;
597
- margin-right: 15px;
598
}
599
- #sbi_admin .sbi_ca_username {
600
- line-height: 38px;
601
- margin-left: 15px;
602
float: left;
603
- font-size: 18px;
604
}
605
#sbi_admin .sbi_ca_actions {
606
display: inline-block;
607
}
608
#sbi_admin .sbi_ca_actions .fa{
609
margin-right: 5px;
610
}
611
- #sbi_admin .sbi_delete_account .sbi_remove_text{
612
- display: inline-block;
613
- margin-left: 5px;
614
- padding: 5px 10px 5px 0;
615
- }
616
#sbi_admin .sbi_ca_actions a.button-primary,
617
#sbi_admin .sbi_ca_actions a.button-secondary,
618
#sbi_admin .sbi_ca_accesstoken a.sbi_ca_token_shortcode {
@@ -714,7 +752,7 @@
714
right: 10px;
715
top: 10px;
716
717
- padding: 0;
718
background: rgba(0,0,0,0.05);
719
color: #666;
720
border-radius: 50px;
@@ -726,8 +764,8 @@
726
background: #333;
727
color: #ddd;
728
}
729
- #sbi_admin .sbi_delete_account .fa{
730
- padding: 5px 0 5px 10px;
731
}
732
733
.sbi_connected_accounts_wrap{
@@ -735,10 +773,10 @@
735
}
736
#sbi_admin .sbi_no_accounts{
737
display: inline-block;
738
- padding: 6px 12px;
739
border-radius: 8px;
740
background: rgba(255,255,255,0.8);
741
- margin-bottom: 5px;
742
}
743
#sbi_admin #sbi_manual_submit:active{
744
vertical-align: unset;
@@ -750,14 +788,88 @@
750
padding-top: 5px;
751
}
752
#sbi_admin .sbi_user_feed_account_wrap:last-child{
753
- padding-bottom: 10px;
754
}
755
#sbi_admin .sbi_user_feed_account_wrap{
756
padding-bottom: 5px;
757
}
758
#sbi_admin .sbi_user_feed_account_wrap span{
759
font-size: 13px;
760
}
761
/*#sbi_admin .sbi_remove_from_user_feed{
762
background: #71ad26;
763
color: #fff;
@@ -860,14 +972,13 @@
860
}
861
#sbi_config_info .sbi_config_modal{
862
position: absolute;
863
- top: 180px;
864
left: 50%;
865
- width: 350px;
866
867
- margin: 0 0 0 -195px;
868
padding: 20px;
869
background: #fff;
870
- text-align: center;
871
872
-webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
873
box-shadow: 0 1px 20px rgba(0,0,0,0.2);
@@ -876,6 +987,16 @@
876
-webkit-border-radius: 3px;
877
border-radius: 3px;
878
}
879
.sb_get_token .submit {
880
display: inline-block;
881
margin: 0 0 0 10px;
@@ -923,6 +1044,38 @@
923
color: #333;
924
}
925
926
/* Pro 3.0 Styles */
927
.sbi_layout_cell {
928
padding: 0;
@@ -1131,4 +1284,109 @@
1131
top: -10px;
1132
bottom: auto;
1133
margin-left: -101px;
1134
}
123
}
124
125
#sbi_admin .sbi_radio_label{
126
+ width: 95px;
127
padding-top: 5px;
128
129
display: -moz-inline-stack;
156
-webkit-border-radius: 2px;
157
border-radius: 2px;
158
}
159
+ /* Caching settings */
160
+ #sbi_admin #sbi-caching-time-settings{
161
+ display: inline-block;
162
+ }
163
+ #sbi_admin .sbi-caching-cron-options .submit{
164
+ display: inline-block;
165
+ margin: 0;
166
+ padding: 0;
167
+ }
168
+ #sbi_admin .sbi-caching-sched-notice{
169
+ font-size: 11px;
170
+ display: block;
171
+ width: 100%;
172
+ }
173
+ #sbi_admin .sbi-caching-sched-notice span{
174
+ color: green;
175
+ background: #e5eae1;
176
+ padding: 5px 10px;
177
+ border-radius: 5px;
178
+ border: 1px solid #ccd3c6;
179
+ display: inline-block;
180
+ }
181
182
/* License */
183
#sbi_admin .sbi_license_status{
201
width: 100%;
202
clear: left;
203
}
204
+ #sbi_admin .sbi_cron_cache_opts .sbi_row{
205
+ padding: 3px 0;
206
+ }
207
+ #sbi_admin .sbi_cron_cache_opts .sbi_row label {
208
+ display: inline-block;
209
+ margin: 5px 2px 0 0;
210
+ }
211
#sbi_admin .sbi_pro,
212
#sbi_admin .sbi_pro label,
213
#sbi_admin .sbi_pro input,
410
-webkit-border-radius: 4px;
411
border-radius: 4px;
412
}
413
+ .sbi_review_notice .sbi-notice-text{
414
float: left;
415
clear: none;
416
width: 100%;
439
.sbi_review_notice .links a:first-child{
440
/*padding-left: 0;*/
441
}
442
+ .sbi_review_notice .sbi_notice_close,
443
+ .sbi_review_notice .sbi_bfcm_sale_notice_close,
444
+ .sbi_review_notice .sbi_new_user_sale_notice_close {
445
position: absolute;
446
top: 0;
447
right: 0;
612
#sbi_admin .sbi_connected_account {
613
position: relative;
614
box-sizing: border-box;
615
+ padding: 10px 35px 10px 10px;
616
border-radius: 5px;
617
background: #fff;
618
margin-bottom: 5px;
620
clear: both;
621
border: 1px solid #ddd;
622
}
623
+ #sbi_admin .sbi_ca_username {
624
+ line-height: 1.4;
625
+ margin-left: 15px;
626
+ float: left;
627
+ font-size: 18px;
628
+ }
629
#sbi_admin .sbi_connected_account .sbi_ca_avatar{
630
margin-right: 15px;
631
}
632
#sbi_admin .sbi_connected_account .sbi_ca_username {
633
margin-left: 0;
634
+ margin-right: 15px;
635
}
636
+ #sbi_admin .sbi_connected_account .sbi_ca_username strong{
637
float: left;
638
}
639
+ #sbi_admin .sbi_connected_account .sbi_ca_username span{
640
+ font-size: 10px;
641
+ font-weight: normal;
642
+ text-transform: uppercase;
643
+ padding: 0;
644
+ margin: 0;
645
+ display: block;
646
+ }
647
+
648
#sbi_admin .sbi_ca_actions {
649
display: inline-block;
650
}
651
#sbi_admin .sbi_ca_actions .fa{
652
margin-right: 5px;
653
}
654
#sbi_admin .sbi_ca_actions a.button-primary,
655
#sbi_admin .sbi_ca_actions a.button-secondary,
656
#sbi_admin .sbi_ca_accesstoken a.sbi_ca_token_shortcode {
752
right: 10px;
753
top: 10px;
754
755
+ padding: 5px 10px;
756
background: rgba(0,0,0,0.05);
757
color: #666;
758
border-radius: 50px;
764
background: #333;
765
color: #ddd;
766
}
767
+ #sbi_admin .sbi_delete_account .sbi_remove_text{
768
+ margin-left: 5px;
769
}
770
771
.sbi_connected_accounts_wrap{
773
}
774
#sbi_admin .sbi_no_accounts{
775
display: inline-block;
776
+ padding: 4px 15px;
777
border-radius: 8px;
778
background: rgba(255,255,255,0.8);
779
+ margin-bottom: 3px;
780
}
781
#sbi_admin #sbi_manual_submit:active{
782
vertical-align: unset;
788
padding-top: 5px;
789
}
790
#sbi_admin .sbi_user_feed_account_wrap:last-child{
791
+ padding-bottom: 6px;
792
}
793
#sbi_admin .sbi_user_feed_account_wrap{
794
padding-bottom: 5px;
795
+ padding-left: 2px;
796
}
797
#sbi_admin .sbi_user_feed_account_wrap span{
798
font-size: 13px;
799
}
800
+ #sbi_admin .sbi_manual_account_id_toggle label{
801
+ display: block;
802
+ margin: 10px 0 0 0;
803
+ font-size: 13px;
804
+ }
805
+ #sbi_admin .sbi_business_profile_tag{
806
+ display: none;
807
+ padding: 8px 10px;
808
+ background: rgba(0,0,0,0.05);
809
+ border-radius: 0 5px 5px 0;
810
+ margin: 0 0 0 -2px;
811
+ font-size: 13px;
812
+ height: 15px;
813
+ line-height: 15px;
814
+ box-shadow: inset 0 0 1px rgba(0,0,0,.5);
815
+ }
816
+ #sbi_admin .sbi_ca_info{
817
+ overflow: hidden;
818
+ }
819
+ #sbi_admin .sbi_ca_show_token{
820
+ display: inline-block;
821
+ padding: 10px 5px 0px 5px;
822
+ margin: 0;
823
+ font-size: 12px;
824
+ vertical-align: top;
825
+ }
826
+ #sbi_admin .sbi_ca_shortcode{
827
+ display: none;
828
+ padding: 0;
829
+ width: 100%;
830
+ float: left;
831
+ clear: both;
832
+ margin: 10px 0 0 0;
833
+ }
834
+ #sbi_admin .sbi_ca_shortcode p{
835
+ padding-bottom: 10px;
836
+ font-size: 13px;
837
+ }
838
+ #sbi_admin .sbi_ca_shortcode code{
839
+ margin-top: 5px;
840
+ display: inline-block;
841
+ }
842
+ #sbi_admin .sbi_user_feed_ids_wrap .sbi_ca_avatar{
843
+ width: 20px;
844
+ height: 20px;
845
+ position: relative;
846
+ top: 5px;
847
+ margin-right: 8px;
848
+ border-radius: 4px;
849
+ }
850
+
851
+
852
+ @media all and (max-width: 1200px){
853
+ #sbi_admin .sbi_delete_account .sbi_remove_text{
854
+ display: none;
855
+ }
856
+ #sbi_admin .sbi_ca_token_label{
857
+ display: none;
858
+ }
859
+ #sbi_admin .sbi_ca_token{
860
+ border-left: 1px solid #d6d6d6;
861
+ border-radius: 4px;
862
+ }
863
+ }
864
+ @media all and (max-width: 800px){
865
+ #sbi_admin .sbi_col.sbi_one {
866
+ width: 25%;
867
+ margin-right: 5%;
868
+ }
869
+ #sbi_admin .sbi_col.sbi_two{
870
+ width: 70%;
871
+ }
872
+ }
873
/*#sbi_admin .sbi_remove_from_user_feed{
874
background: #71ad26;
875
color: #fff;
972
}
973
#sbi_config_info .sbi_config_modal{
974
position: absolute;
975
+ top: 160px;
976
left: 50%;
977
+ width: 450px;
978
979
+ margin: 0 0 0 -230px;
980
padding: 20px;
981
background: #fff;
982
983
-webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.2);
984
box-shadow: 0 1px 20px rgba(0,0,0,0.2);
987
-webkit-border-radius: 3px;
988
border-radius: 3px;
989
}
990
+ @media all and (max-width: 480px){
991
+ #sbi_config_info .sbi_config_modal{
992
+ max-width: 100%;
993
+ margin: 0 0 0 -50%;
994
+ box-sizing: border-box;
995
+ }
996
+ }
997
+ #sbi_config_info.sb_get_token .sbi_config_modal {
998
+ text-align: center;
999
+ }
1000
.sb_get_token .submit {
1001
display: inline-block;
1002
margin: 0 0 0 10px;
1044
color: #333;
1045
}
1046
1047
+ /* New modal info */
1048
+ .sbi_config_modal p{
1049
+ font-size: 14px;
1050
+ line-height: 1.6;
1051
+ }
1052
+ .sbi_config_modal .sbi_login_button_row{
1053
+ display: block;
1054
+ padding: 3px 0;
1055
+ width: 90%;
1056
+ margin: 0 auto;
1057
+ text-align: center;
1058
+ }
1059
+ #sbi_admin .sbi_login_button_row label{
1060
+ top: -2px;
1061
+ left: 3px;
1062
+ }
1063
+ #sbi_admin .sbi_login_button_row label b{
1064
+ font-size: 14px;
1065
+ }
1066
+ #sbi_admin .sbi_login_button_row .sbi_tooltip{
1067
+ width: 90%;
1068
+ padding: 10px 5%;
1069
+ background: #eee;
1070
+ }
1071
+ #sbi_admin .sbi_config_modal .sbi_admin_btn{
1072
+ display: inline-block;
1073
+ float: none;
1074
+ margin: 20px 0 5px 0;
1075
+ padding: 0 21px;
1076
+ background-image: none;
1077
+ }
1078
+
1079
/* Pro 3.0 Styles */
1080
.sbi_layout_cell {
1081
padding: 0;
1284
top: -10px;
1285
bottom: auto;
1286
margin-left: -101px;
1287
+ }
1288
+
1289
+ /* Graph API pages */
1290
+ /* Instagram Business Managed page */
1291
+ #sbi_admin .sbi-managed-pages{
1292
+ margin: 0;
1293
+ width: 96%;
1294
+ clear: both;
1295
+ float: left;
1296
+ padding: 10px 2%;
1297
+ }
1298
+ #sbi_admin .sbi-scrollable-accounts {
1299
+ max-height: 360px;
1300
+ overflow-y: auto;
1301
+ overflow-x: hidden;
1302
+ }
1303
+ #sbi_admin .sbi-managed-page-intro{
1304
+ padding: 0 0 20px 0;
1305
+ margin: 0;
1306
+ }
1307
+ #sbi_admin .sbi-managed-page-select-all{
1308
+ padding: 0 0 5px 0;
1309
+ margin: 0 0 0 1px;
1310
+ }
1311
+ #sbi_admin .sbi-managed-page-select-all label{
1312
+ font-size: 12px;
1313
+ top: -2px;
1314
+ left: 3px;
1315
+ }
1316
+ #sbi_admin .sbi-managed-page{
1317
+ width: 102%;
1318
+ border: 1px solid transparent;
1319
+ padding: 5px 1%;
1320
+ margin: 0 -1%;
1321
+ background: #fff;
1322
+ box-sizing: border-box;
1323
+ position: relative;
1324
+ }
1325
+ #sbi_admin .sbi-managed-page:hover{
1326
+ background: #eee;
1327
+ }
1328
+ #sbi_admin .sbi-managed-page .sbi-page-avatar{
1329
+ float: left;
1330
+ width: 40px;
1331
+ height: 40px;
1332
+ margin-right: 10px;
1333
+ border-radius: 3px;
1334
+ }
1335
+ #sbi_admin .sbi-managed-page label{
1336
+ padding: 0;
1337
+ margin: 0;
1338
+ height: 40px;
1339
+ line-height: 1.3;
1340
+ display: block;
1341
+ }
1342
+ .sbi-add-checkbox {
1343
+ display: inline-block;
1344
+ float: left;
1345
+ }
1346
+ .sbi-managed-page-details {
1347
+ margin-left: 30px;
1348
+ }
1349
+ .sbi-add-checkbox input {
1350
+ position: absolute;
1351
+ top: 50%;
1352
+ left: 1%;
1353
+ margin-top: -10px;
1354
+ }
1355
+
1356
+ .sbi_review_notice .sbi_offer_btn{
1357
+ padding: 4px 12px 6px 12px;
1358
+ background: green;
1359
+ color: #fff;
1360
+ border-radius: 4px;
1361
+ display: inline-block;
1362
+ text-decoration: none;
1363
+ margin-left: 9px;
1364
+ }
1365
+ .sbi_review_notice .sbi_offer_btn:hover,
1366
+ .sbi_review_notice .sbi_offer_btn:focus{
1367
+ background: #049404;
1368
+ color: #fff;
1369
+ }
1370
+ .sbi_review_notice .sbi_other_notice{
1371
+ font-size: 13px;
1372
+ font-style: italic;
1373
+ margin-top: 5px !important;
1374
+ }
1375
+
1376
+ /* Admin footer share icons */
1377
+ #sbi_admin #sbi_admin_share_links{
1378
+ opacity: 0;
1379
+ display: inline-block;
1380
+ padding: 5px;
1381
+ border: 1px solid #ccc;
1382
+ background: rgba(255,255,255,0.5);
1383
+ border-radius: 3px;
1384
+ transition: opacity 0.5s;
1385
+ }
1386
+ #sbi_admin #sbi_admin_share_links.sbi_show{
1387
+ transition: opacity 0.5s;
1388
+ opacity: 1;
1389
+ }
1390
+ #sbi_admin #twitter-widget-0 {
1391
+ width: 65px !important;
1392
}
css/sb-instagram.css CHANGED
@@ -4,68 +4,68 @@
4
5
/* Feed container */
6
#sb_instagram {
7
- width: 100%;
8
- margin: 0 auto;
9
- padding: 0;
10
- -webkit-box-sizing: border-box;
11
- -moz-box-sizing: border-box;
12
- box-sizing: border-box;
13
}
14
#sb_instagram:after{
15
- content: "";
16
- display: table;
17
- clear: both;
18
}
19
20
/*********************/
21
/*** STYLE OPTIONS ***/
22
/*********************/
23
#sb_instagram.sbi_fixed_height{
24
- overflow: hidden;
25
- overflow-y: auto;
26
- -webkit-box-sizing: border-box;
27
- -moz-box-sizing: border-box;
28
- box-sizing: border-box;
29
}
30
#sb_instagram #sbi_images{
31
- width: 100%;
32
- float: left;
33
- line-height: 0;
34
35
- -webkit-box-sizing: border-box;
36
- -moz-box-sizing: border-box;
37
- box-sizing: border-box;
38
}
39
40
/* Items */
41
#sb_instagram #sbi_images .sbi_item{
42
- display: -moz-inline-stack;
43
- display: inline-block;
44
- vertical-align: top;
45
- zoom: 1;
46
- *display: inline;
47
-
48
- max-height: 1000px;
49
- padding: inherit !important;
50
- margin: 0 !important;
51
- text-decoration: none;
52
- opacity: 1;
53
- overflow: hidden;
54
-
55
- -webkit-box-sizing: border-box;
56
- -moz-box-sizing: border-box;
57
- box-sizing: border-box;
58
-
59
- -webkit-transition: all 0.5s ease;
60
- -moz-transition: all 0.5s ease;
61
- -o-transition: all 0.5s ease;
62
- -ms-transition: all 0.5s ease;
63
- transition: all 0.5s ease;
64
}
65
/* Transition items in */
66
#sb_instagram #sbi_images .sbi_item.sbi_transition{
67
- opacity: 0;
68
- max-height: 0;
69
}
70
71
/* Cols */
@@ -94,71 +94,74 @@
94
95
/* Photos */
96
#sb_instagram .sbi_photo_wrap{
97
- position: relative;
98
}
99
#sb_instagram .sbi_photo{
100
- display: block;
101
- text-decoration: none;
102
}
103
#sb_instagram .sbi_photo img{
104
- width: 100%;
105
- height: auto;
106
}
107
#sb_instagram a,
108
#sb_instagram a:hover,
109
#sb_instagram a:focus,
110
#sb_instagram a:active{
111
- outline: none;
112
}
113
#sb_instagram img{
114
- display: block;
115
- padding: 0 !important;
116
- margin: 0 !important;
117
- max-width: 100% !important;
118
- opacity: 1 !important;
119
}
120
#sb_instagram .sbi_link{
121
- display: none;
122
- position: absolute;
123
- bottom: 0;
124
- right: 0;
125
-
126
- width: 100%;
127
- padding: 10px 0;
128
- background: rgba(0,0,0,0.5);
129
- text-align: center;
130
- color: #fff;
131
- font-size: 12px;
132
- line-height: 1.1;
133
}
134
#sb_instagram .sbi_link a{
135
- padding: 0 6px;
136
- text-decoration: none;
137
- color: #fff;
138
- font-size: 12px;
139
- line-height: 1.1;
140
-
141
- display: -moz-inline-stack;
142
- display: inline-block;
143
- vertical-align: top;
144
- zoom: 1;
145
- *display: inline;
146
}
147
#sb_instagram .sbi_link .sbi_lightbox_link{
148
- padding-bottom: 5px;
149
}
150
#sb_instagram .sbi_link a:hover,
151
#sb_instagram .sbi_link a:focus{
152
- text-decoration: underline;
153
}
154
#sb_instagram .sbi_photo_wrap:hover .sbi_link,
155
#sb_instagram .sbi_photo_wrap:focus .sbi_link{
156
- display: block;
157
}
158
159
/* Videos */
160
#sb_instagram svg:not(:root).svg-inline--fa {
161
- height: 1em;
162
}
163
164
#sb_instagram .sbi_type_video .sbi_playbtn,
@@ -166,519 +169,555 @@
166
.sbi_type_carousel .fa-clone,
167
#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
168
#sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
169
- display: block !important;
170
- position: absolute;
171
- z-index: 1;
172
173
- color: #fff;
174
- color: rgba(255,255,255,0.9);
175
- font-style: normal !important;
176
- text-shadow: 0 0 8px rgba(0,0,0,0.8);
177
}
178
#sb_instagram .sbi_type_video .sbi_playbtn,
179
#sb_instagram .sbi_type_carousel .sbi_playbtn {
180
- z-index: 2;
181
- top: 50%;
182
- left: 50%;
183
- margin-top: -24px;
184
- margin-left: -19px;
185
- padding: 0;
186
- font-size: 48px;
187
}
188
#sb_instagram .sbi_type_carousel .fa-clone{
189
- right: 12px;
190
- top: 12px;
191
- font-size: 24px;
192
- text-shadow: 0 0 8px rgba(0,0,0,0.3);
193
}
194
.sbi_type_carousel svg.fa-clone,
195
#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
196
#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
197
- -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
198
- filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
199
}
200
201
/* Loader */
202
#sb_instagram .sbi_loader{
203
- width: 20px;
204
- height: 20px;
205
206
- position: relative;
207
- top: 50%;
208
- left: 50%;
209
- margin: -10px 0 0 -10px;
210
- background-color: #000;
211
- background-color: rgba(0,0,0,0.5);
212
213
- border-radius: 100%;
214
- -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
215
- animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
216
}
217
/* Loader in button */
218
#sb_instagram #sbi_load .sbi_loader{
219
- position: absolute;
220
- margin-top: -11px;
221
- background-color: #fff;
222
- opacity: 1;
223
}
224
@-webkit-keyframes sbi-sk-scaleout {
225
- 0% { -webkit-transform: scale(0) }
226
- 100% {
227
- -webkit-transform: scale(1.0);
228
- opacity: 0;
229
- }
230
}
231
@keyframes sbi-sk-scaleout {
232
- 0% {
233
- -webkit-transform: scale(0);
234
- -ms-transform: scale(0);
235
- transform: scale(0);
236
- } 100% {
237
- -webkit-transform: scale(1.0);
238
- -ms-transform: scale(1.0);
239
- transform: scale(1.0);
240
- opacity: 0;
241
- }
242
}
243
244
#sb_instagram .fa-spin,
245
#sbi_lightbox .fa-spin{
246
- -webkit-animation: fa-spin 2s infinite linear;
247
- animation: fa-spin 2s infinite linear
248
}
249
250
#sb_instagram .fa-pulse,
251
#sbi_lightbox .fa-pulse{
252
- -webkit-animation: fa-spin 1s infinite steps(8);
253
- animation: fa-spin 1s infinite steps(8)
254
}
255
256
@-webkit-keyframes fa-spin {
257
- 0% {
258
- -webkit-transform: rotate(0deg);
259
- transform: rotate(0deg)
260
- }
261
- 100% {
262
- -webkit-transform: rotate(359deg);
263
- transform: rotate(359deg)
264
- }
265
}
266
267
@keyframes fa-spin {
268
- 0% {
269
- -webkit-transform: rotate(0deg);
270
- transform: rotate(0deg)
271
- }
272
- 100% {
273
- -webkit-transform: rotate(359deg);
274
- transform: rotate(359deg)
275
- }
276
}
277
278
/* HEADER */
279
#sb_instagram .sb_instagram_header{
280
- float: left;
281
- clear: both;
282
- margin: 0 0 15px 0;
283
- padding: 0;
284
- line-height: 1.2;
285
- width: 100%;
286
}
287
#sb_instagram .sb_instagram_header a{
288
- float: left;
289
- display: block;
290
- /*width: 100%;*/
291
- min-width: 100%\9;
292
- text-decoration: none;
293
- transition: color 0.5s ease;
294
}
295
/** Medium Header */
296
/* Only use medium & large headers on devices above 480px */
297
@media all and (min-width: 480px){
298
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
299
- width: 80px;
300
- height: 80px;
301
- border-radius: 40px;
302
- }
303
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
304
- width: 80px;
305
- height: 80px;
306
- border-radius: 40px;
307
- }
308
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
309
- font-size: 20px;
310
- }
311
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
312
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
313
- font-size: 14px;
314
- }
315
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
316
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
317
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
318
- margin-left: 95px !important;
319
- line-height: 1.4
320
- }
321
- #sb_instagram .sbi_medium .sbi_header_text h3{
322
- margin-right: -85px !important;
323
- }
324
- #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
325
- margin-top: 4px !important;
326
- }
327
- #sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{
328
- padding-top: 20px !important;
329
- }
330
- /** Large Header */
331
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
332
- width: 120px;
333
- height: 120px;
334
- border-radius: 60px;
335
- }
336
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
337
- width: 120px;
338
- height: 120px;
339
- border-radius: 60px;
340
- }
341
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
342
- font-size: 28px;
343
- }
344
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
345
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
346
- font-size: 16px;
347
- }
348
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
349
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
350
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
351
- margin-left: 140px !important;
352
- line-height: 1.5;
353
- }
354
- #sb_instagram .sbi_large .sbi_header_text h3{
355
- margin-right: -120px !important;
356
- }
357
- #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
358
- margin-top: 12px !important;
359
- }
360
- #sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{
361
- padding-top: 32px !important;
362
- }
363
}
364
365
/* Header profile pic */
366
#sb_instagram .sbi_header_img{
367
- float: left;
368
- position: relative;
369
- width: 50px;
370
- margin: 0 0 0 -100% !important;
371
- overflow: hidden;
372
-
373
- -moz-border-radius: 40px;
374
- -webkit-border-radius: 40px;
375
- border-radius: 40px;
376
}
377
#sb_instagram .sbi_header_img img{
378
- float: left;
379
- margin: 0 !important;
380
- padding: 0 !important;
381
- border: none !important;
382
383
- -moz-border-radius: 40px;
384
- -webkit-border-radius: 40px;
385
- border-radius: 40px;
386
}
387
/* Profile pic hover */
388
/* Profile pic hover */
389
#sb_instagram .sbi_header_img_hover{
390
- opacity: 0;
391
- position: absolute;
392
- width: 100%;
393
- top: 0;
394
- bottom: 0;
395
- left: 0;
396
- text-align: center;
397
- color: #fff;
398
- background: rgba(0,0,0,0.75);
399
- }
400
- #sb_instagram .sbi_header_img_hover i{
401
- position: absolute;
402
- top: 50%;
403
- left: 50%;
404
- margin-top: -12px;
405
- margin-left: -12px;
406
- width: 24px;
407
- height: 24px;
408
- overflow: hidden;
409
- background: url('../img/small-logo.png') no-repeat 0 0;
410
}
411
#sb_instagram .sbi_header_img_hover{
412
- transition: opacity 0.4s ease-in-out;
413
}
414
#sb_instagram .sb_instagram_header .sbi_fade_in{
415
- opacity: 1;
416
- transition: opacity 0.2s ease-in-out;
417
}
418
#sb_instagram .sbi_header_img_hover{
419
- position: absolute;
420
- width: 100%;
421
- top: 0;
422
- bottom: 0;
423
- left: 0;
424
- text-align: center;
425
- color: #fff;
426
- background: rgba(0,0,0,0.75);
427
-
428
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
429
- filter: alpha(opacity=0);
430
- -moz-opacity: 0;
431
- -khtml-opacity: 0;
432
- opacity: 0;
433
- border-radius: 40px;
434
- transition: opacity 0.2s;
435
}
436
/* Fade the Instagram icon in when hovering on the header */
437
#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
438
#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
439
- opacity: 1;
440
}
441
/* Header text */
442
#sb_instagram .sbi_header_text{
443
- float: left;
444
- width: 100%;
445
- padding-top: 5px;
446
}
447
#sb_instagram .sb_instagram_header a{
448
- text-decoration: none;
449
}
450
#sb_instagram .sbi_header_text .sbi_bio,
451
#sb_instagram .sbi_header_text h3{
452
- float: left;
453
- clear: both;
454
- width: auto;
455
- margin: 0 0 0 60px !important;
456
- padding: 0 !important;
457
}
458
#sb_instagram .sb_instagram_header h3{
459
- font-size: 16px;
460
- line-height: 1.3;
461
}
462
#sb_instagram .sb_instagram_header p{
463
- font-size: 13px;
464
- line-height: 1.3;
465
}
466
#sb_instagram .sb_instagram_header h3.sbi_no_bio{
467
- padding-top: 9px !important;
468
}
469
#sb_instagram .sbi_header_text img.emoji{
470
- margin-right: 3px !important;
471
}
472
473
474
/* Buttons */
475
#sb_instagram #sbi_load{
476
- float: left;
477
- clear: both;
478
- width: 100%;
479
- text-align: center;
480
}
481
#sb_instagram #sbi_load .fa-spinner{
482
- display: none;
483
- position: absolute;
484
- top: 50%;
485
- left: 50%;
486
- margin: -8px 0 0 -7px;
487
- font-size: 15px;
488
}
489
#sb_instagram #sbi_load{
490
- opacity: 1;
491
- transition: all 0.5s ease-in;
492
}
493
#sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
494
- opacity: 1;
495
- transition: all 0.1s ease-in;
496
}
497
#sb_instagram .sbi_hidden{
498
- opacity: 0 !important;
499
}
500
#sb_instagram #sbi_load .sbi_load_btn,
501
#sb_instagram .sbi_follow_btn a{
502
- display: -moz-inline-stack;
503
- display: inline-block;
504
- vertical-align: top;
505
- zoom: 1;
506
- *display: inline;
507
-
508
- padding: 7px 14px;
509
- margin: 5px auto 0 auto;
510
- background: #333;
511
- color: #eee;
512
- border: none;
513
- color: #fff;
514
- text-decoration: none;
515
- font-size: 13px;
516
- line-height: 1.5;
517
-
518
- -moz-border-radius: 4px;
519
- -webkit-border-radius: 4px;
520
- border-radius: 4px;
521
-
522
- -webkit-box-sizing: border-box;
523
- -moz-box-sizing: border-box;
524
- box-sizing: border-box;
525
}
526
#sb_instagram #sbi_load .sbi_load_btn {
527
- position: relative;
528
}
529
/* Follow button */
530
#sb_instagram .sbi_follow_btn{
531
- display: -moz-inline-stack;
532
- display: inline-block;
533
- vertical-align: top;
534
- zoom: 1;
535
- *display: inline;
536
- text-align: center;
537
}
538
#sb_instagram .sbi_follow_btn.sbi_top{
539
- display: block;
540
- margin-bottom: 5px;
541
}
542
#sb_instagram .sbi_follow_btn a{
543
- background: #408bd1;
544
- color: #fff;
545
}
546
#sb_instagram .sbi_follow_btn a,
547
#sb_instagram .sbi_follow_btn a,
548
#sb_instagram #sbi_load .sbi_load_btn{
549
- transition: all 0.1s ease-in;
550
}
551
/* Hover state for default colors */
552
#sb_instagram #sbi_load .sbi_load_btn:hover{
553
- outline: none;
554
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
555
}
556
#sb_instagram .sbi_follow_btn a:hover,
557
#sb_instagram .sbi_follow_btn a:focus{
558
- outline: none;
559
- box-shadow: inset 0 0 10px 20px #359dff;
560
}
561
/* If a custom color is applied then just use opacity for the hover effect */
562
#sb_instagram .sbi_follow_btn.sbi_custom a:hover,
563
#sb_instagram .sbi_follow_btn.sbi_custom a:focus,
564
#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
565
- box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
566
}
567
/* Active state */
568
#sb_instagram .sbi_follow_btn a:active,
569
#sb_instagram #sbi_load .sbi_load_btn:active{
570
- box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
571
}
572
573
#sb_instagram .sbi_follow_btn .fa,
574
#sb_instagram .sbi_follow_btn svg{
575
- margin-bottom: -1px;
576
- margin-right: 7px;
577
- font-size: 15px;
578
}
579
#sb_instagram .sbi_follow_btn svg{
580
- vertical-align: -.125em;
581
}
582
#sb_instagram #sbi_load .sbi_follow_btn{
583
- margin-left: 5px;
584
}
585
586
/* Error messages */
587
#sb_instagram .sb_instagram_error{
588
- width: 100%;
589
- text-align: center;
590
- line-height: 1.4;
591
}
592
593
/* Mod only error msgs */
594
#sbi_mod_error{
595
- display: none;
596
- border: 1px solid #ddd;
597
- background: #eee;
598
- color: #333;
599
- margin: 0;
600
- padding: 10px 15px;
601
- font-size: 13px;
602
- text-align: center;
603
-
604
- -moz-border-radius: 4px;
605
- -webkit-border-radius: 4px;
606
- border-radius: 4px;
607
}
608
#sbi_mod_error p{
609
- padding: 5px 0 !important;
610
- margin: 0 !important;
611
- line-height: 1.3 !important;
612
}
613
#sbi_mod_error ol,
614
#sbi_mod_error ul{
615
- padding: 5px 0 5px 20px !important;
616
- margin: 0 !important;
617
}
618
#sbi_mod_error li{
619
- padding: 1px 0 !important;
620
- margin: 0 !important;
621
}
622
#sbi_mod_error span{
623
- font-size: 12px;
624
}
625
626
/* Medium */
627
#sb_instagram.sbi_medium .sbi_playbtn,
628
#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
629
- margin-top: -12px;
630
- margin-left: -9px;
631
- font-size: 23px;
632
}
633
#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
634
- right: 8px;
635
- top: 8px;
636
- font-size: 18px;
637
}
638
/* Small */
639
#sb_instagram.sbi_small .sbi_playbtn,
640
#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
641
- margin-top: -9px;
642
- margin-left: -7px;
643
- font-size: 18px;
644
}
645
#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
646
- right: 5px;
647
- top: 5px;
648
- font-size: 12px;
649
}
650
651
/* Media queries */
652
@media all and (max-width: 640px){
653
- /* Make 3-6 cols into 2 col */
654
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
655
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
656
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
657
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
658
- width: 50%;
659
- }
660
- /* Make 7-10 cols into 4 col */
661
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
662
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
663
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
664
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
665
- width: 25%;
666
- }
667
- /* On mobile make the min-width 100% */
668
- #sb_instagram.sbi_width_resp{
669
- width: 100% !important;
670
- }
671
}
672
@media all and (max-width: 480px){
673
- /* Make all cols into 1 col */
674
- #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
675
- #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
676
- #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
677
- #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
678
- #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
679
- #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
680
- #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
681
- #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
682
- width: 100%;
683
- }
684
- }
4
5
/* Feed container */
6
#sb_instagram {
7
+ width: 100%;
8
+ margin: 0 auto;
9
+ padding: 0;
10
+ -webkit-box-sizing: border-box;
11
+ -moz-box-sizing: border-box;
12
+ box-sizing: border-box;
13
}
14
#sb_instagram:after{
15
+ content: "";
16
+ display: table;
17
+ clear: both;
18
}
19
20
/*********************/
21
/*** STYLE OPTIONS ***/
22
/*********************/
23
#sb_instagram.sbi_fixed_height{
24
+ overflow: hidden;
25
+ overflow-y: auto;
26
+ -webkit-box-sizing: border-box;
27
+ -moz-box-sizing: border-box;
28
+ box-sizing: border-box;
29
}
30
#sb_instagram #sbi_images{
31
+ width: 100%;
32
+ float: left;
33
+ line-height: 0;
34
35
+ -webkit-box-sizing: border-box;
36
+ -moz-box-sizing: border-box;
37
+ box-sizing: border-box;
38
}
39
40
/* Items */
41
#sb_instagram #sbi_images .sbi_item{
42
+ display: -moz-inline-stack;
43
+ display: inline-block;
44
+ vertical-align: top;
45
+ zoom: 1;
46
+ *display: inline;
47
+
48
+ max-height: 1000px;
49
+ padding: inherit !important;
50
+ margin: 0 !important;
51
+ text-decoration: none;
52
+ opacity: 1;
53
+ overflow: hidden;
54
+
55
+ -webkit-box-sizing: border-box;
56
+ -moz-box-sizing: border-box;
57
+ box-sizing: border-box;
58
+
59
+ -webkit-transition: all 0.5s ease;
60
+ -moz-transition: all 0.5s ease;
61
+ -o-transition: all 0.5s ease;
62
+ -ms-transition: all 0.5s ease;
63
+ transition: all 0.5s ease;
64
}
65
/* Transition items in */
66
#sb_instagram #sbi_images .sbi_item.sbi_transition{
67
+ opacity: 0;
68
+ max-height: 0;
69
}
70
71
/* Cols */
94
95
/* Photos */
96
#sb_instagram .sbi_photo_wrap{
97
+ position: relative;
98
}
99
#sb_instagram .sbi_photo{
100
+ display: block;
101
+ text-decoration: none;
102
}
103
#sb_instagram .sbi_photo img{
104
+ width: 100%;
105
+ height: auto;
106
+ }
107
+ #sb_instagram .sbi_no_js img{
108
+ display: none;
109
}
110
#sb_instagram a,
111
#sb_instagram a:hover,
112
#sb_instagram a:focus,
113
#sb_instagram a:active{
114
+ outline: none;
115
}
116
#sb_instagram img{
117
+ display: block;
118
+ padding: 0 !important;
119
+ margin: 0 !important;
120
+ max-width: 100% !important;
121
+ opacity: 1 !important;
122
}
123
#sb_instagram .sbi_link{
124
+ display: none;
125
+ position: absolute;
126
+ bottom: 0;
127
+ right: 0;
128
+
129
+ width: 100%;
130
+ padding: 10px 0;
131
+ background: rgba(0,0,0,0.5);
132
+ text-align: center;
133
+ color: #fff;
134
+ font-size: 12px;
135
+ line-height: 1.1;
136
}
137
#sb_instagram .sbi_link a{
138
+ padding: 0 6px;
139
+ text-decoration: none;
140
+ color: #fff;
141
+ font-size: 12px;
142
+ line-height: 1.1;
143
+
144
+ display: -moz-inline-stack;
145
+ display: inline-block;
146
+ vertical-align: top;
147
+ zoom: 1;
148
+ *display: inline;
149
}
150
#sb_instagram .sbi_link .sbi_lightbox_link{
151
+ padding-bottom: 5px;
152
}
153
#sb_instagram .sbi_link a:hover,
154
#sb_instagram .sbi_link a:focus{
155
+ text-decoration: underline;
156
}
157
#sb_instagram .sbi_photo_wrap:hover .sbi_link,
158
#sb_instagram .sbi_photo_wrap:focus .sbi_link{
159
+ display: block;
160
}
161
162
/* Videos */
163
#sb_instagram svg:not(:root).svg-inline--fa {
164
+ height: 1em;
165
}
166
167
#sb_instagram .sbi_type_video .sbi_playbtn,
169
.sbi_type_carousel .fa-clone,
170
#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
171
#sb_instagram .sbi_type_video .svg-inline--fa.fa-play{
172
+ display: block !important;
173
+ position: absolute;
174
+ z-index: 1;
175
176
+ color: #fff;
177
+ color: rgba(255,255,255,0.9);
178
+ font-style: normal !important;
179
+ text-shadow: 0 0 8px rgba(0,0,0,0.8);
180
}
181
#sb_instagram .sbi_type_video .sbi_playbtn,
182
#sb_instagram .sbi_type_carousel .sbi_playbtn {
183
+ z-index: 2;
184
+ top: 50%;
185
+ left: 50%;
186
+ margin-top: -24px;
187
+ margin-left: -19px;
188
+ padding: 0;
189
+ font-size: 48px;
190
}
191
#sb_instagram .sbi_type_carousel .fa-clone{
192
+ right: 12px;
193
+ top: 12px;
194
+ font-size: 24px;
195
+ text-shadow: 0 0 8px rgba(0,0,0,0.3);
196
}
197
.sbi_type_carousel svg.fa-clone,
198
#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
199
#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play{
200
+ -webkit-filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
201
+ filter: drop-shadow( 0px 0px 2px rgba(0,0,0,.4) );
202
}
203
204
/* Loader */
205
#sb_instagram .sbi_loader{
206
+ width: 20px;
207
+ height: 20px;
208
209
+ position: relative;
210
+ top: 50%;
211
+ left: 50%;
212
+ margin: -10px 0 0 -10px;
213
+ background-color: #000;
214
+ background-color: rgba(0,0,0,0.5);
215
216
+ border-radius: 100%;
217
+ -webkit-animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
218
+ animation: sbi-sk-scaleout 1.0s infinite ease-in-out;
219
}
220
/* Loader in button */
221
#sb_instagram #sbi_load .sbi_loader{
222
+ position: absolute;
223
+ margin-top: -11px;
224
+ background-color: #fff;
225
+ opacity: 1;
226
}
227
@-webkit-keyframes sbi-sk-scaleout {
228
+ 0% { -webkit-transform: scale(0) }
229
+ 100% {
230
+ -webkit-transform: scale(1.0);
231
+ opacity: 0;
232
+ }
233
}
234
@keyframes sbi-sk-scaleout {
235
+ 0% {
236
+ -webkit-transform: scale(0);
237
+ -ms-transform: scale(0);
238
+ transform: scale(0);
239
+ } 100% {
240
+ -webkit-transform: scale(1.0);
241
+ -ms-transform: scale(1.0);
242
+ transform: scale(1.0);
243
+ opacity: 0;
244
+ }
245
}
246
247
#sb_instagram .fa-spin,
248
#sbi_lightbox .fa-spin{
249
+ -webkit-animation: fa-spin 2s infinite linear;
250
+ animation: fa-spin 2s infinite linear
251
}
252
253
#sb_instagram .fa-pulse,
254
#sbi_lightbox .fa-pulse{
255
+ -webkit-animation: fa-spin 1s infinite steps(8);
256
+ animation: fa-spin 1s infinite steps(8)
257
}
258
259
@-webkit-keyframes fa-spin {
260
+ 0% {
261
+ -webkit-transform: rotate(0deg);
262
+ transform: rotate(0deg)
263
+ }
264
+ 100% {
265
+ -webkit-transform: rotate(359deg);
266
+ transform: rotate(359deg)
267
+ }
268
}
269
270
@keyframes fa-spin {
271
+ 0% {
272
+ -webkit-transform: rotate(0deg);
273
+ transform: rotate(0deg)
274
+ }
275
+ 100% {
276
+ -webkit-transform: rotate(359deg);
277
+ transform: rotate(359deg)
278
+ }
279
}
280
+ /* Screen reader */
281
+ .sbi-screenreader{text-indent: -9999px !important;display: block !important;width: 0 !important;height: 0 !important;line-height: 0 !important;}
282
283
/* HEADER */
284
#sb_instagram .sb_instagram_header{
285
+ float: left;
286
+ clear: both;
287
+ margin: 0 0 15px 0;
288
+ padding: 0;
289
+ line-height: 1.2;
290
+ width: 100%;
291
}
292
#sb_instagram .sb_instagram_header a{
293
+ float: left;
294
+ display: block;
295
+ /*width: 100%;*/
296
+ min-width: 100%\9;
297
+ text-decoration: none;
298
+ transition: color 0.5s ease;
299
}
300
/** Medium Header */
301
/* Only use medium & large headers on devices above 480px */
302
@media all and (min-width: 480px){
303
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img {
304
+ width: 80px;
305
+ height: 80px;
306
+ border-radius: 40px;
307
+ }
308
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img {
309
+ width: 80px;
310
+ height: 80px;
311
+ border-radius: 40px;
312
+ }
313
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3 {
314
+ font-size: 20px;
315
+ }
316
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
317
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
318
+ font-size: 14px;
319
+ }
320
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3,
321
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,
322
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio{
323
+ margin-left: 95px !important;
324
+ line-height: 1.4
325
+ }
326
+ #sb_instagram .sbi_medium .sbi_header_text h3{
327
+ margin-right: -85px !important;
328
+ }
329
+ #sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{
330
+ margin-top: 4px !important;
331
+ }
332
+ #sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{
333
+ padding-top: 20px !important;
334
+ }
335
+ /** Large Header */
336
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img {
337
+ width: 120px;
338
+ height: 120px;
339
+ border-radius: 60px;
340
+ }
341
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img {
342
+ width: 120px;
343
+ height: 120px;
344
+ border-radius: 60px;
345
+ }
346
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3 {
347
+ font-size: 28px;
348
+ }
349
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
350
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
351
+ font-size: 16px;
352
+ }
353
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3,
354
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,
355
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio{
356
+ margin-left: 140px !important;
357
+ line-height: 1.5;
358
+ }
359
+ #sb_instagram .sbi_large .sbi_header_text h3{
360
+ margin-right: -120px !important;
361
+ }
362
+ #sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{
363
+ margin-top: 12px !important;
364
+ }
365
+ #sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{
366
+ padding-top: 32px !important;
367
+ }
368
}
369
370
/* Header profile pic */
371
#sb_instagram .sbi_header_img{
372
+ float: left;
373
+ position: relative;
374
+ width: 50px;
375
+ margin: 0 0 0 -100% !important;
376
+ overflow: hidden;
377
+
378
+ -moz-border-radius: 40px;
379
+ -webkit-border-radius: 40px;
380
+ border-radius: 40px;
381
}
382
#sb_instagram .sbi_header_img img{
383
+ float: left;
384
+ margin: 0 !important;
385
+ padding: 0 !important;
386
+ border: none !important;
387
388
+ -moz-border-radius: 40px;
389
+ -webkit-border-radius: 40px;
390
+ border-radius: 40px;
391
}
392
/* Profile pic hover */
393
/* Profile pic hover */
394
#sb_instagram .sbi_header_img_hover{
395
+ opacity: 0;
396
+ position: absolute;
397
+ width: 100%;
398
+ top: 0;
399
+ bottom: 0;
400
+ left: 0;
401
+ text-align: center;
402
+ color: #fff;
403
+ background: rgba(0,0,0,0.75);
404
+ }
405
+
406
+ #sb_instagram .sbi_header_img_hover .sbi_new_logo{
407
+ position: absolute;
408
+ top: 50%;
409
+ left: 50%;
410
+ margin-top: -12px;
411
+ margin-left: -12px;
412
+ width: 24px;
413
+ height: 24px;
414
+ font-size: 24px;
415
+ }
416
+ #sb_instagram .sbi_header_img_hover i {
417
+ overflow: hidden;
418
+ background: url('../img/small-logo.png') no-repeat 0 0;
419
}
420
#sb_instagram .sbi_header_img_hover{
421
+ z-index: 2;
422
+ transition: opacity 0.4s ease-in-out;
423
}
424
#sb_instagram .sb_instagram_header .sbi_fade_in{
425
+ opacity: 1;
426
+ transition: opacity 0.2s ease-in-out;
427
}
428
#sb_instagram .sbi_header_img_hover{
429
+ position: absolute;
430
+ width: 100%;
431
+ top: 0;
432
+ bottom: 0;
433
+ left: 0;
434
+ text-align: center;
435
+ color: #fff;
436
+ background: rgba(0,0,0,0.75);
437
+
438
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
439
+ filter: alpha(opacity=0);
440
+ -moz-opacity: 0;
441
+ -khtml-opacity: 0;
442
+ opacity: 0;
443
+ border-radius: 40px;
444
+ transition: opacity 0.2s;
445
}
446
/* Fade the Instagram icon in when hovering on the header */
447
#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover,
448
#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover{
449
+ opacity: 1;
450
}
451
/* Header text */
452
#sb_instagram .sbi_header_text{
453
+ float: left;
454
+ width: 100%;
455
+ padding-top: 5px;
456
}
457
#sb_instagram .sb_instagram_header a{
458
+ text-decoration: none;
459
}
460
#sb_instagram .sbi_header_text .sbi_bio,
461
#sb_instagram .sbi_header_text h3{
462
+ float: left;
463
+ clear: both;
464
+ width: auto;
465
+ margin: 0 0 0 60px !important;
466
+ padding: 0 !important;
467
}
468
#sb_instagram .sb_instagram_header h3{
469
+ font-size: 16px;
470
+ line-height: 1.3;
471
}
472
#sb_instagram .sb_instagram_header p{
473
+ font-size: 13px;
474
+ line-height: 1.3;
475
}
476
#sb_instagram .sb_instagram_header h3.sbi_no_bio{
477
+ padding-top: 9px !important;
478
}
479
#sb_instagram .sbi_header_text img.emoji{
480
+ margin-right: 3px !important;
481
}
482
483
484
/* Buttons */
485
#sb_instagram #sbi_load{
486
+ float: left;
487
+ clear: both;
488
+ width: 100%;
489
+ text-align: center;
490
}
491
#sb_instagram #sbi_load .fa-spinner{
492
+ display: none;
493
+ position: absolute;
494
+ top: 50%;
495
+ left: 50%;
496
+ margin: -8px 0 0 -7px;
497
+ font-size: 15px;
498
}
499
#sb_instagram #sbi_load{
500
+ opacity: 1;
501
+ transition: all 0.5s ease-in;
502
}
503
#sb_instagram .sbi_load_btn .sbi_btn_text, #sb_instagram .sbi_load_btn .sbi_loader{
504
+ opacity: 1;
505
+ transition: all 0.1s ease-in;
506
}
507
#sb_instagram .sbi_hidden{
508
+ opacity: 0 !important;
509
}
510
#sb_instagram #sbi_load .sbi_load_btn,
511
#sb_instagram .sbi_follow_btn a{
512
+ display: -moz-inline-stack;
513
+ display: inline-block;
514
+ vertical-align: top;
515
+ zoom: 1;
516
+ *display: inline;
517
+
518
+ padding: 7px 14px;
519
+ margin: 5px auto 0 auto;
520
+ background: #333;
521
+ color: #eee;
522
+ border: none;
523
+ color: #fff;
524
+ text-decoration: none;
525
+ font-size: 13px;
526
+ line-height: 1.5;
527
+
528
+ -moz-border-radius: 4px;
529
+ -webkit-border-radius: 4px;
530
+ border-radius: 4px;
531
+
532
+ -webkit-box-sizing: border-box;
533
+ -moz-box-sizing: border-box;
534
+ box-sizing: border-box;
535
}
536
#sb_instagram #sbi_load .sbi_load_btn {
537
+ position: relative;
538
}
539
/* Follow button */
540
#sb_instagram .sbi_follow_btn{
541
+ display: -moz-inline-stack;
542
+ display: inline-block;
543
+ vertical-align: top;
544
+ zoom: 1;
545
+ *display: inline;
546
+ text-align: center;
547
}
548
#sb_instagram .sbi_follow_btn.sbi_top{
549
+ display: block;
550
+ margin-bottom: 5px;
551
}
552
#sb_instagram .sbi_follow_btn a{
553
+ background: #408bd1;
554
+ color: #fff;
555
}
556
#sb_instagram .sbi_follow_btn a,
557
#sb_instagram .sbi_follow_btn a,
558
#sb_instagram #sbi_load .sbi_load_btn{
559
+ transition: all 0.1s ease-in;
560
}
561
/* Hover state for default colors */
562
#sb_instagram #sbi_load .sbi_load_btn:hover{
563
+ outline: none;
564
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.25);
565
}
566
#sb_instagram .sbi_follow_btn a:hover,
567
#sb_instagram .sbi_follow_btn a:focus{
568
+ outline: none;
569
+ box-shadow: inset 0 0 10px 20px #359dff;
570
}
571
/* If a custom color is applied then just use opacity for the hover effect */
572
#sb_instagram .sbi_follow_btn.sbi_custom a:hover,
573
#sb_instagram .sbi_follow_btn.sbi_custom a:focus,
574
#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover{
575
+ box-shadow: inset 0 0 20px 20px rgba(255,255,255,0.15);
576
}
577
/* Active state */
578
#sb_instagram .sbi_follow_btn a:active,
579
#sb_instagram #sbi_load .sbi_load_btn:active{
580
+ box-shadow: inset 0 0 10px 20px rgba(0,0,0,0.3);
581
}
582
583
#sb_instagram .sbi_follow_btn .fa,
584
#sb_instagram .sbi_follow_btn svg{
585
+ margin-bottom: -1px;
586
+ margin-right: 7px;
587
+ font-size: 15px;
588
}
589
#sb_instagram .sbi_follow_btn svg{
590
+ vertical-align: -.125em;
591
}
592
#sb_instagram #sbi_load .sbi_follow_btn{
593
+ margin-left: 5px;
594
}
595
596
/* Error messages */
597
#sb_instagram .sb_instagram_error{
598
+ width: 100%;
599
+ text-align: center;
600
+ line-height: 1.4;
601
}
602
603
/* Mod only error msgs */
604
#sbi_mod_error{
605
+ display: none;
606
+ border: 1px solid #ddd;
607
+ background: #eee;
608
+ color: #333;
609
+ margin: 10px 0 0;
610
+ padding: 10px 15px;
611
+ font-size: 13px;
612
+ text-align: center;
613
+ clear: both;
614
+
615
+ -moz-border-radius: 4px;
616
+ -webkit-border-radius: 4px;
617
+ border-radius: 4px;
618
}
619
#sbi_mod_error p{
620
+ padding: 5px 0 !important;
621
+ margin: 0 !important;
622
+ line-height: 1.3 !important;
623
}
624
#sbi_mod_error ol,
625
#sbi_mod_error ul{
626
+ padding: 5px 0 5px 20px !important;
627
+ margin: 0 !important;
628
}
629
#sbi_mod_error li{
630
+ padding: 1px 0 !important;
631
+ margin: 0 !important;
632
}
633
#sbi_mod_error span{
634
+ font-size: 12px;
635
}
636
637
/* Medium */
638
#sb_instagram.sbi_medium .sbi_playbtn,
639
#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play{
640
+ margin-top: -12px;
641
+ margin-left: -9px;
642
+ font-size: 23px;
643
}
644
#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{
645
+ right: 8px;
646
+ top: 8px;
647
+ font-size: 18px;
648
}
649
/* Small */
650
#sb_instagram.sbi_small .sbi_playbtn,
651
#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play{
652
+ margin-top: -9px;
653
+ margin-left: -7px;
654
+ font-size: 18px;
655
}
656
#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{
657
+ right: 5px;
658
+ top: 5px;
659
+ font-size: 12px;
660
}
661
662
/* Media queries */
663
@media all and (max-width: 640px){
664
+ /* Make 3-6 cols into 2 col */
665
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
666
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
667
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
668
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
669
+ width: 50%;
670
+ }
671
+ /* Make 7-10 cols into 4 col */
672
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
673
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
674
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
675
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
676
+ width: 25%;
677
+ }
678
+ /* On mobile make the min-width 100% */
679
+ #sb_instagram.sbi_width_resp{
680
+ width: 100% !important;
681
+ }
682
}
683
@media all and (max-width: 480px){
684
+ /* Make all cols into 1 col */
685
+ #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
686
+ #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
687
+ #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
688
+ #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
689
+ #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
690
+ #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
691
+ #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
692
+ #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
693
+ width: 100%;
694
+ }
695
+ }
696
+
697
+ /* NO JS */
698
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{
699
+ box-sizing: border-box;
700
+ position: relative;
701
+ overflow: hidden;
702
+ }
703
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before {
704
+ content: "";
705
+ display: block;
706
+ padding-top: 100%;
707
+ z-index: -300;
708
+ }
709
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo {
710
+ position: absolute;
711
+ top: 0;
712
+ left: 0;
713
+ bottom: 0;
714
+ right: 0;
715
+ }
716
+ #sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition {
717
+ opacity: 1;
718
+ max-height: 640px;
719
+ }
720
+ #sb_instagram.sbi_no_js .sbi_photo img,
721
+ #sb_instagram.sbi_no_js .sbi_load_btn{
722
+ display: none;
723
+ }
css/sb-instagram.min.css CHANGED
@@ -1 +1 @@
1
- #sb_instagram,#sb_instagram.sbi_fixed_height{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}#sb_instagram{width:100%;margin:0 auto;padding:0;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0, 0, 0, .4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;min-width:100%\9;transition:color .5s ease;text-decoration:none}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{padding-top:32px!important}}#sb_instagram .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img_hover i{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;overflow:hidden;background:url(../img/small-logo.png) no-repeat}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sbi_header_text .sbi_bio,#sb_instagram .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram #sbi_load,#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.5}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3}#sb_instagram .sb_instagram_header h3.sbi_no_bio{padding-top:9px!important}#sb_instagram .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram #sbi_load{float:left;clear:both;opacity:1;transition:all .5s ease-in}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0;background:#333;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:0;padding:10px 15px;font-size:13px;text-align:center;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}
1
+ #sb_instagram{width:100%;margin:0 auto;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram:after{content:"";display:table;clear:both}#sb_instagram.sbi_fixed_height{overflow:hidden;overflow-y:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images{width:100%;float:left;line-height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_images .sbi_item{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;max-height:1000px;padding:inherit!important;margin:0!important;text-decoration:none;opacity:1;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease}#sb_instagram #sbi_images .sbi_item.sbi_transition{opacity:0;max-height:0}#sb_instagram.sbi_col_1 #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3 #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5 #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7 #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8 #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item{width:10%}#sb_instagram.sbi_col_1.sbi_disable_mobile #sbi_images .sbi_item{width:100%}#sb_instagram.sbi_col_2.sbi_disable_mobile #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_3.sbi_disable_mobile #sbi_images .sbi_item{width:33.33%}#sb_instagram.sbi_col_4.sbi_disable_mobile #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_col_5.sbi_disable_mobile #sbi_images .sbi_item{width:20%}#sb_instagram.sbi_col_6.sbi_disable_mobile #sbi_images .sbi_item{width:16.66%}#sb_instagram.sbi_col_7.sbi_disable_mobile #sbi_images .sbi_item{width:14.28%}#sb_instagram.sbi_col_8.sbi_disable_mobile #sbi_images .sbi_item{width:12.5%}#sb_instagram.sbi_col_9.sbi_disable_mobile #sbi_images .sbi_item{width:11.11%}#sb_instagram.sbi_col_10.sbi_disable_mobile #sbi_images .sbi_item{width:10%}#sb_instagram .sbi_photo_wrap{position:relative}#sb_instagram .sbi_photo{display:block;text-decoration:none}#sb_instagram .sbi_photo img{width:100%;height:auto}#sb_instagram .sbi_no_js img{display:none}#sb_instagram a,#sb_instagram a:active,#sb_instagram a:focus,#sb_instagram a:hover{outline:0}#sb_instagram img{display:block;padding:0!important;margin:0!important;max-width:100%!important;opacity:1!important}#sb_instagram .sbi_link{display:none;position:absolute;bottom:0;right:0;width:100%;padding:10px 0;background:rgba(0,0,0,.5);text-align:center;color:#fff;font-size:12px;line-height:1.1}#sb_instagram .sbi_link a{padding:0 6px;text-decoration:none;color:#fff;font-size:12px;line-height:1.1;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1}#sb_instagram .sbi_link .sbi_lightbox_link{padding-bottom:5px}#sb_instagram .sbi_link a:focus,#sb_instagram .sbi_link a:hover{text-decoration:underline}#sb_instagram .sbi_photo_wrap:focus .sbi_link,#sb_instagram .sbi_photo_wrap:hover .sbi_link{display:block}#sb_instagram svg:not(:root).svg-inline--fa{height:1em}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .sbi_playbtn,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel .fa-clone{display:block!important;position:absolute;z-index:1;color:#fff;color:rgba(255,255,255,.9);font-style:normal!important;text-shadow:0 0 8px rgba(0,0,0,.8)}#sb_instagram .sbi_type_carousel .sbi_playbtn,#sb_instagram .sbi_type_video .sbi_playbtn{z-index:2;top:50%;left:50%;margin-top:-24px;margin-left:-19px;padding:0;font-size:48px}#sb_instagram .sbi_type_carousel .fa-clone{right:12px;top:12px;font-size:24px;text-shadow:0 0 8px rgba(0,0,0,.3)}#sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,#sb_instagram .sbi_type_video .svg-inline--fa.fa-play,.sbi_type_carousel svg.fa-clone{-webkit-filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) );filter:drop-shadow( 0 0 2px rgba(0,0,0,.4) )}#sb_instagram .sbi_loader{width:20px;height:20px;position:relative;top:50%;left:50%;margin:-10px 0 0 -10px;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:100%;-webkit-animation:sbi-sk-scaleout 1s infinite ease-in-out;animation:sbi-sk-scaleout 1s infinite ease-in-out}#sb_instagram #sbi_load .sbi_loader{position:absolute;margin-top:-11px;background-color:#fff;opacity:1}@-webkit-keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}@keyframes sbi-sk-scaleout{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:0}}#sb_instagram .fa-spin,#sbi_lightbox .fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}#sb_instagram .fa-pulse,#sbi_lightbox .fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sbi-screenreader{text-indent:-9999px!important;display:block!important;width:0!important;height:0!important;line-height:0!important}#sb_instagram .sb_instagram_header{float:left;clear:both;margin:0 0 15px 0;padding:0;line-height:1.2;width:100%}#sb_instagram .sb_instagram_header a{float:left;display:block;text-decoration:none;transition:color .5s ease}@media all and (min-width:480px){#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_img img{width:80px;height:80px;border-radius:40px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{font-size:20px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{font-size:14px}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text h3{margin-left:95px!important;line-height:1.4}#sb_instagram .sbi_medium .sbi_header_text h3{margin-right:-85px!important}#sb_instagram .sb_instagram_header.sbi_medium .sbi_header_text .sbi_bio_info{margin-top:4px!important}#sb_instagram .sbi_medium .sbi_header_text.sbi_no_info h3{padding-top:20px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_img img{width:120px;height:120px;border-radius:60px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{font-size:28px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{font-size:16px}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info,#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text h3{margin-left:140px!important;line-height:1.5}#sb_instagram .sbi_large .sbi_header_text h3{margin-right:-120px!important}#sb_instagram .sb_instagram_header.sbi_large .sbi_header_text .sbi_bio_info{margin-top:12px!important}#sb_instagram .sbi_large .sbi_header_text.sbi_no_info h3{padding-top:32px!important}}#sb_instagram .sbi_header_img{float:left;position:relative;width:50px;margin:0 0 0 -100%!important;overflow:hidden;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img img{float:left;margin:0!important;padding:0!important;border:none!important;-moz-border-radius:40px;-webkit-border-radius:40px;border-radius:40px}#sb_instagram .sbi_header_img_hover{opacity:0;position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75)}#sb_instagram .sbi_header_img_hover .sbi_new_logo{position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;width:24px;height:24px;font-size:24px}#sb_instagram .sbi_header_img_hover i{overflow:hidden;background:url(../img/small-logo.png) no-repeat 0 0}#sb_instagram .sbi_header_img_hover{z-index:2;transition:opacity .4s ease-in-out}#sb_instagram .sb_instagram_header .sbi_fade_in{opacity:1;transition:opacity .2s ease-in-out}#sb_instagram .sbi_header_img_hover{position:absolute;width:100%;top:0;bottom:0;left:0;text-align:center;color:#fff;background:rgba(0,0,0,.75);-moz-opacity:0;-khtml-opacity:0;opacity:0;border-radius:40px;transition:opacity .2s}#sb_instagram .sb_instagram_header a:focus .sbi_header_img_hover,#sb_instagram .sb_instagram_header a:hover .sbi_header_img_hover{opacity:1}#sb_instagram .sbi_header_text{float:left;width:100%;padding-top:5px}#sb_instagram .sb_instagram_header a{text-decoration:none}#sb_instagram .sbi_header_text .sbi_bio,#sb_instagram .sbi_header_text h3{float:left;clear:both;width:auto;margin:0 0 0 60px!important;padding:0!important}#sb_instagram .sb_instagram_header h3{font-size:16px;line-height:1.3}#sb_instagram .sb_instagram_header p{font-size:13px;line-height:1.3}#sb_instagram .sb_instagram_header h3.sbi_no_bio{padding-top:9px!important}#sb_instagram .sbi_header_text img.emoji{margin-right:3px!important}#sb_instagram #sbi_load{float:left;clear:both;width:100%;text-align:center}#sb_instagram #sbi_load .fa-spinner{display:none;position:absolute;top:50%;left:50%;margin:-8px 0 0 -7px;font-size:15px}#sb_instagram #sbi_load{opacity:1;transition:all .5s ease-in}#sb_instagram .sbi_load_btn .sbi_btn_text,#sb_instagram .sbi_load_btn .sbi_loader{opacity:1;transition:all .1s ease-in}#sb_instagram .sbi_hidden{opacity:0!important}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;padding:7px 14px;margin:5px auto 0 auto;background:#333;color:#eee;border:none;color:#fff;text-decoration:none;font-size:13px;line-height:1.5;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#sb_instagram #sbi_load .sbi_load_btn{position:relative}#sb_instagram .sbi_follow_btn{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;text-align:center}#sb_instagram .sbi_follow_btn.sbi_top{display:block;margin-bottom:5px}#sb_instagram .sbi_follow_btn a{background:#408bd1;color:#fff}#sb_instagram #sbi_load .sbi_load_btn,#sb_instagram .sbi_follow_btn a{transition:all .1s ease-in}#sb_instagram #sbi_load .sbi_load_btn:hover{outline:0;box-shadow:inset 0 0 20px 20px rgba(255,255,255,.25)}#sb_instagram .sbi_follow_btn a:focus,#sb_instagram .sbi_follow_btn a:hover{outline:0;box-shadow:inset 0 0 10px 20px #359dff}#sb_instagram #sbi_load .sbi_load_btn.sbi_custom:hover,#sb_instagram .sbi_follow_btn.sbi_custom a:focus,#sb_instagram .sbi_follow_btn.sbi_custom a:hover{box-shadow:inset 0 0 20px 20px rgba(255,255,255,.15)}#sb_instagram #sbi_load .sbi_load_btn:active,#sb_instagram .sbi_follow_btn a:active{box-shadow:inset 0 0 10px 20px rgba(0,0,0,.3)}#sb_instagram .sbi_follow_btn .fa,#sb_instagram .sbi_follow_btn svg{margin-bottom:-1px;margin-right:7px;font-size:15px}#sb_instagram .sbi_follow_btn svg{vertical-align:-.125em}#sb_instagram #sbi_load .sbi_follow_btn{margin-left:5px}#sb_instagram .sb_instagram_error{width:100%;text-align:center;line-height:1.4}#sbi_mod_error{display:none;border:1px solid #ddd;background:#eee;color:#333;margin:10px 0 0;padding:10px 15px;font-size:13px;text-align:center;clear:both;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}#sbi_mod_error p{padding:5px 0!important;margin:0!important;line-height:1.3!important}#sbi_mod_error ol,#sbi_mod_error ul{padding:5px 0 5px 20px!important;margin:0!important}#sbi_mod_error li{padding:1px 0!important;margin:0!important}#sbi_mod_error span{font-size:12px}#sb_instagram.sbi_medium .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_medium .sbi_playbtn{margin-top:-12px;margin-left:-9px;font-size:23px}#sb_instagram.sbi_medium .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:8px;top:8px;font-size:18px}#sb_instagram.sbi_small .sbi_photo_wrap .svg-inline--fa.fa-play,#sb_instagram.sbi_small .sbi_playbtn{margin-top:-9px;margin-left:-7px;font-size:18px}#sb_instagram.sbi_small .sbi_type_carousel .sbi_photo_wrap .fa-clone{right:5px;top:5px;font-size:12px}@media all and (max-width:640px){#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item{width:50%}#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:25%}#sb_instagram.sbi_width_resp{width:100%!important}}@media all and (max-width:480px){#sb_instagram.sbi_col_10 #sbi_images .sbi_item,#sb_instagram.sbi_col_3 #sbi_images .sbi_item,#sb_instagram.sbi_col_4 #sbi_images .sbi_item,#sb_instagram.sbi_col_5 #sbi_images .sbi_item,#sb_instagram.sbi_col_6 #sbi_images .sbi_item,#sb_instagram.sbi_col_7 #sbi_images .sbi_item,#sb_instagram.sbi_col_8 #sbi_images .sbi_item,#sb_instagram.sbi_col_9 #sbi_images .sbi_item{width:100%}}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap{box-sizing:border-box;position:relative;overflow:hidden}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo_wrap:before{content:"";display:block;padding-top:100%;z-index:-300}#sb_instagram.sbi_no_js #sbi_images .sbi_item .sbi_photo{position:absolute;top:0;left:0;bottom:0;right:0}#sb_instagram.sbi_no_js #sbi_images .sbi_item.sbi_transition{opacity:1;max-height:640px}#sb_instagram.sbi_no_js .sbi_load_btn,#sb_instagram.sbi_no_js .sbi_photo img{display:none}
img/instagram-pro-promo.png CHANGED
Binary file
img/placeholder.png ADDED
Binary file
img/sbi-icon-offer.png ADDED
Binary file
img/sbi-icon.png CHANGED
Binary file
inc/admin/actions.php ADDED
@@ -0,0 +1,817 @@
1
+ <?php
2
+ /**
3
+ * Includes functions related to actions while in the admin area.
4
+ *
5
+ * - All AJAX related features
6
+ * - Enqueueing of JS and CSS files
7
+ * - Settings link on "Plugins" page
8
+ * - Creation of local avatar image files
9
+ * - Connecting accounts on the "Configure" tab
10
+ * - Displaying admin notices
11
+ * - Clearing caches
12
+ */
13
+ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
14
+
15
+ function sb_instagram_admin_style() {
16
+ wp_register_style( 'sb_instagram_admin_css', SBI_PLUGIN_URL . 'css/sb-instagram-admin.css', array(), SBIVER );
17
+ wp_enqueue_style( 'sb_instagram_font_awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
18
+ wp_enqueue_style( 'sb_instagram_admin_css' );
19
+ wp_enqueue_style( 'wp-color-picker' );
20
+ }
21
+ add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_style' );
22
+
23
+ function sb_instagram_admin_scripts() {
24
+ wp_enqueue_script( 'sb_instagram_admin_js', SBI_PLUGIN_URL . 'js/sb-instagram-admin.js', array(), SBIVER );
25
+ wp_localize_script( 'sb_instagram_admin_js', 'sbiA', array(
26
+ 'ajax_url' => admin_url( 'admin-ajax.php' ),
27
+ 'sbi_nonce' => wp_create_nonce( 'sbi_nonce' )
28
+ )
29
+ );
30
+ if( !wp_script_is('jquery-ui-draggable') ) {
31
+ wp_enqueue_script(
32
+ array(
33
+ 'jquery',
34
+ 'jquery-ui-core',
35
+ 'jquery-ui-draggable'
36
+ )
37
+ );
38
+ }
39
+ wp_enqueue_script(
40
+ array(
41
+ 'hoverIntent',
42
+ 'wp-color-picker'
43
+ )
44
+ );
45
+ }
46
+ add_action( 'admin_enqueue_scripts', 'sb_instagram_admin_scripts' );
47
+
48
+ // Add a Settings link to the plugin on the Plugins page
49
+ $sbi_plugin_file = 'instagram-feed/instagram-feed.php';
50
+ add_filter( "plugin_action_links_{$sbi_plugin_file}", 'sbi_add_settings_link', 10, 2 );
51
+
52
+ //modify the link by unshifting the array
53
+ function sbi_add_settings_link( $links, $file ) {
54
+ $sbi_settings_link = '<a href="' . admin_url( 'admin.php?page=sb-instagram-feed' ) . '">' . __( 'Settings', 'instagram-feed' ) . '</a>';
55
+ array_unshift( $links, $sbi_settings_link );
56
+
57
+ return $links;
58
+ }
59
+
60
+
61
+ /**
62
+ * Called via ajax to automatically save access token and access token secret
63
+ * retrieved with the big blue button
64
+ */
65
+ function sbi_auto_save_tokens() {
66
+ $nonce = $_POST['sbi_nonce'];
67
+
68
+ if ( ! wp_verify_nonce( $nonce, 'sbi_nonce' ) ) {
69
+ die ( 'You did not do this the right way!' );
70
+ }
71
+
72
+ wp_cache_delete ( 'alloptions', 'options' );
73
+
74
+ $options = sbi_get_database_settings();
75
+ $new_access_token = isset( $_POST['access_token'] ) ? sanitize_text_field( $_POST['access_token'] ) : false;
76
+ $split_token = $new_access_token ? explode( '.', $new_access_token ) : array();
77
+ $new_user_id = isset( $split_token[0] ) ? $split_token[0] : '';
78
+
79
+ $connected_accounts = isset( $options['connected_accounts'] ) ? $options['connected_accounts'] : array();
80
+ $test_connection_data = sbi_account_data_for_token( $new_access_token );
81
+
82
+ $connected_accounts[ $new_user_id ] = array(
83
+ 'access_token' => sbi_get_parts( $new_access_token ),
84
+ 'user_id' => $test_connection_data['id'],
85
+ 'username' => $test_connection_data['username'],
86
+ 'is_valid' => $test_connection_data['is_valid'],
87
+ 'last_checked' => $test_connection_data['last_checked'],
88
+ 'profile_picture' => $test_connection_data['profile_picture'],
89
+ );
90
+
91
+ if ( !$options['sb_instagram_disable_resize'] ) {
92
+ if ( sbi_create_local_avatar( $test_connection_data['username'], $test_connection_data['profile_picture'] ) ) {
93
+ $connected_accounts[ $new_user_id ]['local_avatar'] = true;
94
+ }
95
+ } else {
96
+ $connected_accounts[ $new_user_id ]['local_avatar'] = false;
97
+ }
98
+
99
+ $options['connected_accounts'] = $connected_accounts;
100
+
101
+ update_option( 'sb_instagram_settings', $options );
102
+
103
+ echo wp_json_encode( $connected_accounts[ $new_user_id ] );
104
+
105
+ die();
106
+ }
107
+ add_action( 'wp_ajax_sbi_auto_save_tokens', 'sbi_auto_save_tokens' );
108
+
109
+ function sbi_delete_local_avatar( $username ) {
110
+ var_dump( 'deleting' );
111
+ $upload = wp_upload_dir();
112
+
113
+ $image_files = glob( trailingslashit( $upload['basedir'] ) . trailingslashit( SBI_UPLOADS_NAME ) . $username . '.jpg' ); // get all matching images
114
+ foreach ( $image_files as $file ) { // iterate files
115
+ if ( is_file( $file ) ) {
116
+ unlink( $file );
117
+ }
118
+ }
119
+ }
120
+
121
+ function sbi_create_local_avatar( $username, $file_name ) {
122
+ $image_editor = wp_get_image_editor( $file_name );
123
+
124
+ if ( ! is_wp_error( $image_editor ) ) {
125
+ $upload = wp_upload_dir();
126
+
127
+ $full_file_name = trailingslashit( $upload['basedir'] ) . trailingslashit( SBI_UPLOADS_NAME ) . $username . '.jpg';
128
+
129
+ $saved_image = $image_editor->save( $full_file_name );
130
+
131
+ if ( ! $saved_image ) {
132
+ global $sb_instagram_posts_manager;
133
+
134
+ $sb_instagram_posts_manager->add_error( 'image_editor_save', array(
135
+ __( 'Error saving edited image.', 'instagram-feed' ),
136
+ $full_file_name
137
+ ) );
138
+ } else {
139
+ return true;
140
+ }
141
+ } else {
142
+ global $sb_instagram_posts_manager;
143
+
144
+ $message = __( 'Error editing image.', 'instagram-feed' );
145
+ if ( isset( $image_editor ) && isset( $image_editor->errors ) ) {
146
+ foreach ( $image_editor->errors as $key => $item ) {
147
+ $message .= ' ' . $key . '- ' . $item[0] . ' |';
148
+ }
149
+ }
150
+
151
+ $sb_instagram_posts_manager->add_error( 'image_editor', array( $file_name, $message ) );
152
+ }
153
+ return false;
154
+ }
155
+
156
+ function sbi_connect_business_accounts() {
157
+ $nonce = $_POST['sbi_nonce'];
158
+
159
+ if ( ! wp_verify_nonce( $nonce, 'sbi_nonce' ) ) {
160
+ die ( 'You did not do this the right way!' );
161
+ }
162
+
163
+ $accounts = isset( $_POST['accounts'] ) ? json_decode( stripslashes( $_POST['accounts'] ), true ) : false;
164
+ $options = sbi_get_database_settings();
165
+ $connected_accounts = isset( $options['connected_accounts'] ) ? $options['connected_accounts'] : array();
166
+
167
+ foreach ( $accounts as $account ) {
168
+ $access_token = isset( $account['access_token'] ) ? $account['access_token'] : '';
169
+ $page_access_token = isset( $account['page_access_token'] ) ? $account['page_access_token'] : '';
170
+ $username = isset( $account['username'] ) ? $account['username'] : '';
171
+ $name = isset( $account['name'] ) ? $account['name'] : '';
172
+ $profile_picture = isset( $account['profile_picture_url'] ) ? $account['profile_picture_url'] : '';
173
+ $user_id = isset( $account['id'] ) ? $account['id'] : '';
174
+ $type = 'business';
175
+
176
+ $connected_accounts[ $user_id ] = array(
177
+ 'access_token' => $access_token,
178
+ 'page_access_token' => $page_access_token,
179
+ 'user_id' => $user_id,
180
+ 'username' => $username,
181
+ 'is_valid' => true,
182
+ 'last_checked' => time(),
183
+ 'profile_picture' => $profile_picture,
184
+ 'name' => $name,
185
+ 'type' => $type
186
+ );
187
+
188
+ if ( !$options['sb_instagram_disable_resize'] ) {
189
+ if ( sbi_create_local_avatar( $username, $profile_picture ) ) {
190
+ $connected_accounts[ $user_id ]['local_avatar'] = true;
191
+ }
192
+ } else {
193
+ $connected_accounts[ $user_id ]['local_avatar'] = false;
194
+ }
195
+ }
196
+
197
+ $options['connected_accounts'] = $connected_accounts;
198
+
199
+ update_option( 'sb_instagram_settings', $options );
200
+
201
+ echo wp_json_encode( $connected_accounts );
202
+
203
+ die();
204
+ }
205
+ add_action( 'wp_ajax_sbi_connect_business_accounts', 'sbi_connect_business_accounts' );
206
+
207
+ function sbi_auto_save_id() {
208
+ $nonce = $_POST['sbi_nonce'];
209
+
210
+ if ( ! wp_verify_nonce( $nonce, 'sbi_nonce' ) ) {
211
+ die ( 'You did not do this the right way!' );
212
+ }
213
+ if ( current_user_can( 'edit_posts' ) && isset( $_POST['id'] ) ) {
214
+ $options = get_option( 'sb_instagram_settings', array() );
215
+
216
+ $options['sb_instagram_user_id'] = array( sanitize_text_field( $_POST['id'] ) );
217
+
218
+ update_option( 'sb_instagram_settings', $options );
219
+ }
220
+ die();
221
+ }
222
+ add_action( 'wp_ajax_sbi_auto_save_id', 'sbi_auto_save_id' );
223
+
224
+ function sbi_test_token() {
225
+ $access_token = isset( $_POST['access_token'] ) ? sanitize_text_field( $_POST['access_token'] ) : false;
226
+ $account_id = isset( $_POST['account_id'] ) ? sanitize_text_field( $_POST['account_id'] ) : false;
227
+ $options = sbi_get_database_settings();
228
+ $connected_accounts = isset( $options['connected_accounts'] ) ? $options['connected_accounts'] : array();
229
+
230
+ if ( $access_token ) {
231
+ wp_cache_delete ( 'alloptions', 'options' );
232
+
233
+ $number_dots = substr_count ( $access_token , '.' );
234
+ $test_connection_data = array( 'error_message' => 'A successful connection could not be made. Please make sure your Access Token is valid.');
235
+
236
+ if ( $number_dots > 1 ) {
237
+ $split_token = explode( '.', $access_token );
238
+ $new_user_id = isset( $split_token[0] ) ? $split_token[0] : '';
239
+
240
+ $test_connection_data = sbi_account_data_for_token( $access_token );
241
+ } else if (! empty( $account_id ) ) {
242
+ $url = 'https://graph.facebook.com/'.$account_id.'?fields=biography,id,username,website,followers_count,media_count,profile_picture_url,name&access_token='.sbi_maybe_clean( $access_token );
243
+ $json = json_decode( sbi_business_account_request( $url, array( 'access_token' => $access_token ) ), true );
244
+ if ( isset( $json['id'] ) ) {
245
+ $new_user_id = $json['id'];
246
+ $test_connection_data = array(
247
+ 'access_token' => $access_token,
248
+ 'id' => $json['id'],
249
+ 'username' => $json['username'],
250
+ 'type' => 'business',
251
+ 'is_valid' => true,
252
+ 'last_checked' => time(),
253
+ 'profile_picture' => $json['profile_picture_url']
254
+ );
255
+ }
256
+
257
+ }
258
+
259
+ if ( isset( $test_connection_data['error_message'] ) ) {
260
+ echo $test_connection_data['error_message'];
261
+ } elseif ( $test_connection_data !== false ) {
262
+ $username = $test_connection_data['username'] ? $test_connection_data['username'] : $connected_accounts[ $new_user_id ]['username'];
263
+ $user_id = $test_connection_data['id'] ? $test_connection_data['id'] : $connected_accounts[ $new_user_id ]['user_id'];
264
+ $profile_picture = $test_connection_data['profile_picture'] ? $test_connection_data['profile_picture'] : $connected_accounts[ $new_user_id ]['profile_picture'];
265
+ $type = isset( $test_connection_data['type'] ) ? $test_connection_data['type'] : 'personal';
266
+ $connected_accounts[ $new_user_id ] = array(
267
+ 'access_token' => sbi_get_parts( $access_token ),
268
+ 'user_id' => $user_id,
269
+ 'username' => $username,
270
+ 'type' => $type,
271
+ 'is_valid' => $test_connection_data['is_valid'],
272
+ 'last_checked' => $test_connection_data['last_checked'],
273
+ 'profile_picture' => $profile_picture
274
+ );
275
+
276
+ if ( !$options['sb_instagram_disable_resize'] ) {
277
+ if ( sbi_create_local_avatar( $username, $profile_picture ) ) {
278
+ $connected_accounts[ $new_user_id ]['local_avatar'] = true;
279
+ }
280
+ } else {
281
+ $connected_accounts[ $new_user_id ]['local_avatar'] = false;
282
+ }
283
+
284
+ $options['connected_accounts'] = $connected_accounts;
285
+
286
+ update_option( 'sb_instagram_settings', $options );
287
+
288
+ echo wp_json_encode( $connected_accounts[ $new_user_id ] );
289
+ } else {
290
+ echo 'A successful connection could not be made. Please make sure your Access Token is valid.';
291
+ }
292
+
293
+ }
294
+
295
+ die();
296
+ }
297
+ add_action( 'wp_ajax_sbi_test_token', 'sbi_test_token' );
298
+
299
+ function sbi_delete_account() {
300
+ $nonce = $_POST['sbi_nonce'];
301
+
302
+ if ( ! wp_verify_nonce( $nonce, 'sbi_nonce' ) ) {
303
+ die ( 'You did not do this the right way!' );
304
+ }
305
+ $account_id = isset( $_POST['account_id'] ) ? sanitize_text_field( $_POST['account_id'] ) : false;
306
+ $options = get_option( 'sb_instagram_settings', array() );
307
+ $connected_accounts = isset( $options['connected_accounts'] ) ? $options['connected_accounts'] : array();
308
+
309
+ if ( $account_id ) {
310
+ wp_cache_delete ( 'alloptions', 'options' );
311
+ $username = $connected_accounts[ $account_id ]['username'];
312
+
313
+ $num_times_used = 0;
314
+ foreach ( $connected_accounts as $connected_account ) {
315
+
316
+ if ( $connected_account['username'] === $username ) {
317
+ $num_times_used++;
318
+ }
319
+ }
320
+
321
+ if ( $num_times_used < 2 ) {
322
+ sbi_delete_local_avatar( $username );
323
+ }
324
+
325
+ unset( $connected_accounts[ $account_id ] );
326
+
327
+ $options['connected_accounts'] = $connected_accounts;
328
+
329
+ update_option( 'sb_instagram_settings', $options );
330
+
331
+ }
332
+
333
+ die();
334
+ }
335
+ add_action( 'wp_ajax_sbi_delete_account', 'sbi_delete_account' );
336
+
337
+ function sbi_account_data_for_token( $access_token ) {
338
+ $return = array(
339
+ 'id' => false,
340
+ 'username' => false,
341
+ 'is_valid' => false,
342
+ 'last_checked' => time()
343
+ );
344
+ $url = 'https://api.instagram.com/v1/users/self/?access_token=' . sbi_maybe_clean( $access_token );
345
+ $args = array(
346
+ 'timeout' => 60,
347
+ 'sslverify' => false
348
+ );
349
+ $result = wp_remote_get( $url, $args );
350
+
351
+ if ( ! is_wp_error( $result ) ) {
352
+ $data = json_decode( $result['body'] );
353
+ } else {
354
+ $data = array();
355
+ }
356
+
357
+ if ( isset( $data->data->id ) ) {
358
+ $return['id'] = $data->data->id;
359
+ $return['username'] = $data->data->username;
360
+ $return['is_valid'] = true;
361
+ $return['profile_picture'] = $data->data->profile_picture;
362
+
363
+ } elseif ( isset( $data->error_type ) && $data->error_type === 'OAuthRateLimitException' ) {
364
+ $return['error_message'] = 'This account\'s access token is currently over the rate limit. Try removing this access token from all feeds and wait an hour before reconnecting.';
365
+ } else {
366
+ if ( is_wp_error( $result ) ) {
367
+ $return['error_message'] = '';
368
+
369
+ if ( isset( $result->errors ) ) {
370
+ foreach ( $result->errors as $key => $item ) {
371
+ $return['error_message'] .= ' '.$key . ' - ' . $item[0] . ' |';
372
+ }
373
+ }
374
+ } elseif ( isset( $data->error_message ) ) {
375
+ $return['error_message'] = $data->error_message;
376
+ }
377
+
378
+ }
379
+
380
+ return $return;
381
+ }
382
+
383
+ function sbi_get_connected_accounts_data( $sb_instagram_at ) {
384
+ $sbi_options = get_option( 'sb_instagram_settings' );
385
+ $return = array();
386
+ $return['connected_accounts'] = isset( $sbi_options['connected_accounts'] ) ? $sbi_options['connected_accounts'] : array();
387
+
388
+ if ( empty( $connected_accounts ) && ! empty( $sb_instagram_at ) ) {
389
+ $tokens = explode(',', $sb_instagram_at );
390
+ $user_ids = array();
391
+
392
+ foreach ( $tokens as $token ) {
393
+ $account = sbi_account_data_for_token( $token );
394
+ if ( isset( $account['is_valid'] ) ) {