Frequently Asked Custom CSS Questions

Here are some frequently asked questions we've received about personalizing TINTs through the use of the Custom CSS panel:

You may remove the social network icons from any TINT by adding the following to the Custom CSS panel:

#collectionHolder {
display: none !important;
}

.router_edit #collectionHolder {
display: block !important;
}

For most themes, we attach a network-specific class to each post depending on the network. The classes appear as follows:

.post-facebook
.post-twitter
.post-instagram
.post-youtube
.post-pinterest
.post-rss
.post-googleplus
.post-linkedin
.post-custom

Then use the class to style elements like this:

.post-twitter .post-title a {
color: red;
}

You can make any TINT image-only by adding the following to the Custom CSS panel:

/* removes common text elements */
					
.post-share, .post-acct, .post-text {
display: none !important;
}

Then, add any or all of the following depending on your theme:

/* removes additional text elements for Classic theme */
					
.hypeTemplate_v2 .post-content {
display: none !important;
}
				
/* removes additional text elements for Artsy theme */
					
.hypeTemplate_tano .post-share-bg {
display: none !important;
}
				
/* removes additional text elements for News theme */
					
.hypeTemplate_news .post-title, .post-details, .post-description, .post-timestamp {
display: none !important;
}
				
/* removes additional text elements for Horizontal Slider theme */
					
.hypeTemplate_horizontal .post-title {
display: none !important;
}
				
/* removes additional text elements for Grid theme */
					
.gridpost-text.font-secondary, .gridpost-author-timestamp, .gridpost-author-text, .gridpost-content .post-retweet-status {
display: none !important;
}
				

Please note that Display Themes require different handling to remove text elements.

You can disable clicks on any TINT by adding the following to the Custom CSS panel:

.hypeTemplate_v2 .chiclet-right, .chiclet-left {
pointer-events: none;
}
								
a, a:hover {
pointer-events: none;
}

Where .hypeTemplate_v2 is a class that varies depending on the theme that is selected.

Please note that the pop-up modal is controlled by javascript, and that you cannot style/affect the behavior of the modal at this time.

Author images that display on TINTs are cached. If the profile photo, or avatar, for a connected feed is updated on a social network, but you do not see the change on your TINT, you can add the following:

.hypeTemplate_v2[data-socialid="facebook_123456789"] .post-acct img {
content: url("//yourlogohere.png") !important;
background-size: cover !important;
}

Where the class .hypeTemplate_inverse varies depending on theme, the data-socialid value varies depending on the network and connection, and the img URL varies depending on the desired image.

Please contact support@tintup.com if you have trouble identifying the data-socialid value for your specific feed.

Depending on the color scheme you have selected, you may notice blurring on the text elements of Grid Theme. This is likely due to the contrast between a drop-shadow, and the selections for Accent Color and Font Color.

To remove the blur/drop-shadow, add the following to the Custom CSS panel:

.gridpost-author-text span, .gridpost-author-timestamp span {
text-shadow: none !important;
}

For most Web & Display Themes, you can specify a number of lines in a post by adding the following to the Custom CSS panel:

.post-text a {
display: block;
display: -webkit-box;
height: 18px*1.4*3;
margin:0 auto;
line-height: 1.4;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

Where the value of the -webkit-line-clamp parameter specifies the number of lines to display before truncating.

You can move the text elements on Horizontal Slider theme to bottom of posts by adding the following to the Custom CSS panel:

.post.hypeTemplate_horizontal, .slider_cutoff {
overflow: visible;
background-size: cover !important;
}

.post.hypeTemplate_horizontal .post-title { top: 100%; }

To remove the text on Slideshow theme add the following to the Custom CSS panel:

.theme-slideshow_v2 .image-container {
width: 100% !important;
z-index: 9999999 !important;
height: 100% !important;
}

.theme-slideshow_v2 .post-container {
top: 500px !important;
}

To remove the text on Photo Slideshow theme add the following to the Custom CSS panel:

.theme-photo-slideshow .post .text-section {
left: 20%;
position: absolute;
top: 20%;
}

.theme-photo-slideshow .post .text-section {
display: none !important;
}

You can replace the RSS post-type icon by adding the following to the Custom CSS panel:

.post-rss .post-type-icon i {
color: transparent !important;
}

.fa.fa-rss {
background-image: url("https://yourlogohere.png");
background-repeat: no-repeat;
background-size: contain;
}

.hypeTemplate_v2 .post-type-icon i {
text-shadow: none;
}

Where the class .hypeTemplate_v2 varies depending on theme, and the image URL varies depending on the desired image.

To remove video controls that are displayed when you hover over videos in the pop-up modal, display themes, and TINTmix, add the following to the Custom CSS panel:

video::-webkit-media-controls-enclosure {
display:none !important;
}

You can hide the post author on Gem Theme by adding the following to the Custom CSS panel:

.theme-gem .itemView {
color: transparent;
}

.via {
position: absolute;
color: #fff !important;
}

Where the transparent value hides all text in the author banner, and where the color specified in the .via class can be added to maintain (and re-align) the network icon (e.g. via Twitter).

You can make a banner clickable by inserting the following in the Custom CSS panel:

</style>
<script>
$(document).ready(function(){
$('html').on('click', '.profile-banner', function(){ window.open("//google.com"); });
});
</script>
<style>

.profile-banner {
cursor:pointer;
}

Please note that we strongly recommend against adding javascript in the Custom CSS panel, and cannot support it beyond this specific situation.

You can remove the drop-shadow that appears under a banner by adding the following to the Custom CSS panel:

.dropShadow {
box-shadow: 0 0px 0px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 0px 0px rgba(34,25,25,0.4);
}

Uploaded banners are sticky on TINT, meaning that the banner will remain visible at the top of a TINT regardless of any scrolling behavior in the frame. Adding the following to the Custom CSS panel will remove this attribute, allowing the banner to "disappear" when scrolling happens in a TINT:

.profile-banner {
position: initial;
}

#hypeHolder {
margin-top: 50px;
}

You add a banner to the bottom of your TINT by inserting the following in the Custom CSS panel:

</style><div class="bottom-banner" style="display: block; width: 100%; height: 150px; background-image: url(//www.YOURIMAGEURLHERE.jpg); position: fixed; bottom: 0px; z-index: 999; background-repeat: no-repeat; background-size: contain; background-position: bottom center;"></div><style>

Where the height value varies depending on the height of your banner, and the background-image varies depending on the desired banner image's URL.

Click here to check out some live examples in our CSS Hall of Fame!

Please feel free to email support@tintup.com if you have any additional questions and we would be happy to help you figure out your problem and add it to this list.

Was this article helpful?
1 out of 2 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.