Juicer includes several pre-built templates that will display your social media feeds in a variety of ways, depending on your preferred aesthetics. But if you want to further customize the look of your social media feed, Juicer makes this possible by allowing you or a programmer you typically work with to do it using CSS.
Warning. This guide is going to require a small amount of coding, only in CSS. Even if you don’t know a lick of CSS this guide should be pretty straightforward. Don’t be scared, we’ll walk you though every step.
What we will be doing
The page example below uses a Juicer feed with completely custom CSS. We’re going to walk through every step required to get the Juicer feed up and running and styled just like this.
Getting Your Account Set Up
- You’ll need a Juicer account. Sign up and create a feed and add some sources. Read this to get you started.
- The Descendants feed has two social media accounts. A Facebook page with the name
descendantstvand an Instagram with the usernamedescendantstv - Once we have the feed set up we went into the “Feed Settings” and made sure we had the default settings set:
Obviously your settings don’t need to be exactly the same but that’s what we are working with for this feed.
Embedding the feed
The Descendants Juicer feed lives in an html file called lately.html We’ll open it up and add the following lines (omitted irrelevant html)
<html>
<head>
<title>Descendants Lately</title>
<link href="/assets/application.css" media="screen" rel="stylesheet" />
</head>
<body>
<h1>Lately</h1>
<script src="//assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="//assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="descendants">
<h1 class='referral'><a href='http://www.juicer.io'>Powered by Juicer</a></h1>
</ul>
</body>
</html>
What we’ve got here is just the standard Juicer embed in a more or less blank HTML page. The most important part being:
<script src="//assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="//assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="descendants"><h1 class='referral'><a href='http://www.juicer.io'>Powered by Juicer</a></h1></ul>
Which is our Juicer embed code (you’ll have to use your embed code for your feed). That makes the magic of the juicer feed happen.
Customizing the Styles
If we view lately.html we should see something like this:
As you can see, there is something screwy going on here. Let’s open the chrome inspector (right click “inspect element” on a weird looking element):
As we can see here, the <p> tag is inheriting some styles from the sites base stylesheet, which we need to overwrite. Use the chrome inspector to determine some level of specificity for the Juicer CSS. In this case we need to fix this for the Juicer embed, so after our embed code we’ll add a <style> block
<style>
</style>
Then add some css to this style block that will fix the visual error:
<style>
.juicer-feed .j-message p {
width: 100%;
display: block;
float: none;
}
</style>
Refresh the page and it’s looking more like it should!
As you can see, the feed is working but it’s currently white, which doesn’t fit in with the black aesthetic of the site. The easiest way to deal with this is to overwrite the existing Juicer styles. So we’ll use the chrome inspector again and determine what element gets the white background:
it seems to be the .feed-item tag, but specifically it’s getting it from this style rule .juicer-feed.modern li.feed-item so let’s add some css to our <style> tag section to overwrite this:
.juicer-feed.modern li.feed-item {
background: transparent;
}
Now when we refresh the page we see it’s still looking a bit weird:
So let’s write a few more style rules to clean things up:
.juicer-feed.modern li.feed-item {
background: transparent;
border: none;
}
.juicer-feed.modern .j-message {
color: white;
}
.j-poster h3 { color: white; }
.juicer-feed.modern .j-poster {
padding: 14px 0 12px;
}
.juicer-feed.modern .j-text {
padding: 20px 0;
}
Now when we refresh the page it will look something like this:
This is looking a lot nicer!
Let’s remove the “likes” count (The client doesn’t want them in this feed) and add the word “comments” to after the count of comments (we can do this with css pseudo-elements) and remove the comment icon from before this section:
ul.juicer-feed .j-meta li:last-of-type {
display: none;
}
ul.juicer-feed .j-meta .comment {
font-size: 12px;
font-weight: bold;
}
ul.juicer-feed .j-meta .comments:before {
content: '';
}
ul.juicer-feed .j-meta .comments:after {
content: ' comments';
}
.juicer-feed .j-meta {
border-top: 1px solid #808080;
padding-top: 10px;
}
Finally for the most difficult thing we are going to do. We are going to use custom icons to display which feed type it is in the bottom left. Luckily we can leverage existing classes on the Juicer feed to determine which image to show:
ul.juicer-feed .j-meta a:before {
content: '';
}
ul.juicer-feed .j-meta .facebook, ul.juicer-feed .j-meta .instagram {
height: 20px;
width: 20px;
background-repeat: no-repeat;
display: block;
}
ul.juicer-feed .j-meta .facebook {
background-image: url(/images/facebook-icon.png);
ul.juicer-feed .j-meta .instagram {
background-image: url(/images/instagram-icon.png);
}
This will show the correct icon depending on what social media source it is.
That’s it!
After refreshing the page we realized the Juicer loader was orange, but we wanted to make it white to blend in with the rest of the site, so we also added this css:
.j-loading {
border-color: #fff;
}
.j-loading:before {
background-color: #fff;
}
As you can see, it’s not terribly difficult to customize the appearance of a Juicer feed to anything you like! It certainly helps to have some experience in CSS but even if you don’t it’s not impossible to guess your way through it.
You can see the live custom feed here. Let us know if you have any questions or comments, or feel free to contact us as always.
Here’s the entire <style> tag:
<style>
.juicer-feed .j-message p {
width: 100%;
display: block;
float: none;
}
.juicer-feed.modern li.feed-item {
background: transparent;
border: none;
}
.juicer-feed.modern .j-message {
color: white;
}
.j-poster h3 { color: white; }
.juicer-feed.modern .j-poster {
padding: 14px 0 12px;
}
.juicer-feed.modern .j-text {
padding: 20px 0;
}
ul.juicer-feed .j-meta li:last-of-type {
display: none;
}
ul.juicer-feed .j-meta .comments {
font-size: 12px;
font-weight: bold;
}
ul.juicer-feed .j-meta .comments:before {
content: '';
}
ul.juicer-feed .j-meta .comments:after {
content: ' comments';
}
ul.juicer-feed .j-meta {
border-top: 1px solid #808080;
padding-top: 10px;
}
ul.juicer-feed .j-meta .j-facebook, ul.juicer-feed .j-meta .j-instagram {
height: 20px;
width: 20px;
background-repeat: no-repeat;
display: block;
}
ul.juicer-feed .j-meta a:before {
content: '';
}
ul.juicer-feed .j-meta .j-facebook, ul.juicer-feed .j-meta .j-instagram {
height: 20px;
width: 20px;
background-repeat: no-repeat;
display: block;
}
ul.juicer-feed .j-meta a:before {
content: '';
}
ul.juicer-feed .j-meta .j-facebook {
background-image: url('/assets/map/facebook.png');
}
ul.juicer-feed .j-meta .j-instagram {
background-image: url('/assets/map/instagram.png');
}
ul.juicer-feed .j-meta .j-facebook {
background-image: url('/assets/map/facebook.png');
}
ul.juicer-feed .j-meta .j-instagram {
background-image: url('/assets/map/instagram.png');
}
.j-loading {
border-color: #fff;
}
.j-loading:before {
background-color: #fff;
}
</style>
