Custom CSS

With TwineSocial, you can completely customize the look and feel of your social hub with custom CSS. This style guide will outline the most common CSS used to customize your social hubs.

Removing TwineSocial Elements

Using CSS is to remove or hide TwineSocial elements is easy. You simply change the style to display:none.

Here are several lines you can use to hide various elements within a tile:

Byline at the top of each tile:

.twine-item .byline {display:none;}

Footer with sharing options from the bottom of each tile:

.footer {display:none;}

Time stamp:

.when {display:none;}

Text description:

.twine-description {display:none;}

Headline:

.twine-item .twine-title {display:none;}

Network logos (Twitter, Instagram, etc.) over images: 

.twine-item .logo-wrapper {display:none;}

Here are several lines you can use to remove larger items from your social hub:

Twine Social logo and sharing options from top of hosted page:

.app-top-logo {display:none;}

Square profile image in header:

.app-profile-image {display:none;}

Entire header on hosted page:

.app-header-content {display:none;}

Changing Fonts with CSS

You can change the fonts on your social hub with CSS, too. Here are a few ways you can do that.

(We also offer full Adobe Typekit integration with Twine, so you can easily customize your hub from hundreds of premium Adobe fonts.)

Use the follow lines to customize the fonts in the tiles on your social hub:

Headline within tile:

#wall .twine-title p:first-line {styles-go-here;}

Body text in tiles:

p {color: styles-go-here;}

Name of provider in byline:

.fullname {styles-go-here;}

You can also customize the fonts in the network tiles:

Name of account:

#wall .content h4 {styles-go-here;}

Number of followers:

#wall .content h2 {styles-go-here;}

Followers on [Network] subtext:

#wall .content small {styles-go-here;}

These are just a few of the more common things people like to change. You can of course use CSS to do anything. Have fun!