Circle me on Google+Storify is growing in popularity and being used by more and more sites to tell stories by curating social media. But while you see Storify embedded on more and more sites, you’ll notice it looks exactly the same on all of them.
It doesn’t have to. The Storify site doesn’t yet give you options to customize the look of a widget. But with a few quick tweaks to the CSS of your site, you can make the Storify widget look less like a widget and more like an organic piece of your site.
Below are the before and after examples of how I modified its appearance to fit into my own site. You can use the same framework, substituting whatever fonts and colors are appropriate for your site.
Notice the major differences are the fonts and colors consistent with the rest of the site, and the removal of the widget’s header and borders.
Original Storify look
New Storify look
This paragraph is written in my WordPress blog, but notice how it flows seamlessly into the following one, which is actually the beginning of the Storify widget.
How to do it
Now that you’ve seen what you can do, here is how I did it using CSS. The following lines, substituting your own font/color styles, should be added to a new section in your stylesheet. Note that in several cases you must use the “!important” declaration on the styles because you need to override inline styles that the widget script prints by default.
Hide the entire Storify header
#sfywdgt_header {
display:none!important;
}
Align Storify body text flush with the left margin of the widget. By default it is indented 20px from the border.
#sfywdgt_body {
margin-left:-20px;
}
Remove borders, changes font and font size and background color of Storify body area.
#sfywdgt_body, #sfywdgt_body li, span.sfy_text, .sfy_description {
border:none !important;
font-family: “Helvetica Neue”,Helvetica,Arial,default!important;
background: #FCFCFC!important;
}
Changes color and behavior of links in the Storify body area. Match this to whatever your links look like in normal body text.
#sfywdgt_body a {
color:#000;
text-decoration:underline!important;
}
#sfywdgt_body a:hover {
color:#333;
}
Removes border from Storify footer area. Also increases “Powered by Storify” font size (this last one is just my taste — I felt like they deserve a slightly more prominent credit line since I’m hiding the header and a lot of the other distinctive features).
.sfywdgt_footer {
border:none!important;
background: #FCFCFC!important;
font-size:10pt!important;
}
Depending on how comfortable you are with CSS editing, you can do more advanced customizations. The key things to know are that the widget script creates three main HTML divs — the header (#sfywdgt_header) the body (#sfywdgt_body) and the footer (.sfywdgt_footer). You can modify or hide any of those by playing with the CSS.
Feel free to share links to examples of your own customizations or tips in the comments.
