Instagram widget on home page?

  • Author
    Posts
  • #110909

    justpaint18
    Member
    Original poster

    Hi,

    I love everything else about this theme, but as an artist, I really need Instagram to appear in the sidebar on the opening page of the site. Is there any way to do this?

    Of course the widgets appear if I open with a static home page, but I’d rather not do that.

    Thanks for your help, Sue Fierston

    The blog I need help with is: suefierston.wordpress.com

    #111077

    ricardpriet
    Theme Author

    Hi Sue,
    Thank you for writing and using Christopher :)

    Yes, you can use the Instagram Widget (https://en.support.wordpress.com/instagram/instagram-widget/). Add it to the “Breaking News Header Bar”, and then add the following CSS to style it:

    #breaking-news .widget_wpcom_instagram_widget,
    #breaking-news .null-instagram-feed {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	border-top: none;
    }
    #breaking-news .null-instagram-feed p.clear {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	-moz-transform: translate(-50%, -50%);
    	-ms-transform: translate(-50%, -50%);
    	-webkit-transform: translate(-50%, -50%);
    	transform: translate(-50%, -50%);
    }
    #breaking-news .null-instagram-feed .widget-title + .instagram-pics + p.clear {
    	position: absolute;
    	left: 50%;
    	top: 55%;
    	-moz-transform: translate(-50%, 100%);
    	-ms-transform: translate(-50%, 100%);
    	-webkit-transform: translate(-50%, 100%);
    	transform: translate(-50%, 100%);
    }
    #breaking-news .null-instagram-feed p.clear a {
    	background-color: #fff;
    	display: inline-block;
    	padding: 10px 25px;
    	color: #000;
    	font-size: 12px;
    	font-size: 0.75rem;
    	line-height: 1.5;
    	text-decoration: none;
    	text-transform: uppercase;
    	text-align: center;
    	border: 0;
    	outline: 0;
    	font-weight: 400;
    	font-family: 'Montserrat', sans-serif;
    	letter-spacing: 1px;
    }
    #breaking-news .null-instagram-feed p.clear a:hover {
    	color: #000;
    	background-color: #ddd;
    }
    #breaking-news .null-instagram-feed p.clear a:active {
    	color: #fff;
    	background-color: #000;
    }
    #breaking-news .wpcom-instagram-images,
    #breaking-news .instagram-pics {
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-flex-direction: row;
    	-ms-flex-direction: row;
    	flex-direction: row;
    	-webkit-flex-wrap: wrap;
    	-ms-flex-wrap: wrap;
    	flex-wrap: wrap;
    	-webkit-justify-content: center;
    	-ms-flex-pack: center;
    	justify-content: center;
    	-webkit-align-content: flex-start;
    	-ms-flex-line-pack: start;
    	align-content: flex-start;
    	-webkit-align-items: flex-start;
    	-ms-flex-align: start;
    	align-items: flex-start;
    	max-width: 100%;
    }
    #breaking-news .wpcom-instagram-images a,
    #breaking-news .null-instagram-feed .instagram-pics li {
    	width: 33%;
    	-ms-flex-order: 0;
    	-webkit-order: 0;
    	order: 0;
    	-webkit-flex: 1 1 auto;
    	-ms-flex: 1 1 auto;
    	flex: 1 1 auto;
    	-webkit-align-self: auto;
    	-ms-flex-item-align: auto;
    	align-self: auto;
    	margin: 0;
    	border: none;
    }
    #breaking-news .wpcom-instagram-images a img,
    #breaking-news .null-instagram-feed .instagram-pics li a img {
    	max-width: 100%;
    	margin: 0;
    	border: 0;
    }
    @media (min-width: 450px) {
    	#breaking-news .wpcom-instagram-images,
    	#breaking-news .null-instagram-feed .instagram-pics {
    		-webkit-flex-wrap: nowrap;
    		-ms-flex-wrap: nowrap;
    		flex-wrap: nowrap;
    	}
    	#breaking-news .wpcom-instagram-images a,
    	#breaking-news .null-instagram-feed .instagram-pics li {
    		width: auto;
    	}
    }

    Let us know :)
    Thank you again!
    Ricardo P. from SiloCreativo

    #111084

    justpaint18
    Member
    Original poster

    Hi, Thanks for getting back to me so quickly!

    I put in the code, but it looks like we may have banners instead of the thumbnails I’d like. Each image is very large.

    Can the Instagram info go in the right sidebar?

    I appreciate your help!
    Sue Fierston

    suefierston.wordpress.com

    #111085

    justpaint18
    Member
    Original poster

    Hi, I’ve been looking at another theme of your company: Rosalie. I’ve decided to go with that one because it solves the design issue and because it is clean and simple.

    Thanks for your help with this issue!
    Sue Fierston

    #111125

    ricardpriet
    Theme Author

    Hi Sue,
    Fantastic, yes Rosalie fits better for your blog :)

    Thanks again!
    Ricardo P. from SiloCreativo

The topic ‘Instagram widget on home page?’ is closed to new replies.