CSS example library

Custom CSS is an advanced feature for marketers/agencies who have the in-house capacity to use it. Compiled here are a few example CSS snippets for a random assortment of functions.

 

A note on customizing embeddable widgets

We can’t provide developer support to make your customizations for you–you must do that.

Customizations are typically made via custom CSS applied through our dashboard. Since the rules are applied across the board to all widgets, customizations to indvidual instances of the embed code are difficult. However, there are some options:

1. Select for the footer version using media queries in CSS;

2. Create two profiles for the client to achieve different style options for different uses;

3. Abandon use of the embeddable widget for this purpose and mimic the approach used by our WP/Joomla/Drupal plugins to render content on-site in a way that can be styled by CSS local to the host site.

Implementing any of the above requires some developer know-how and is beyond the scope of support we can provide.

 

Review Stream

General review stream tips

To target the review stream on the landing page only, use:

#content-container #reviewstream

To target the review stream embeddable widget only:

#super-embed #reviewstream

To target both landing page and widget review streams, use:

#reviewstream

If you’re using the plugin version of the review stream, local CSS on the website will style the stream.

 

Remove attribution from review stream

#reviewstream .review-name {
 display: none;
}

Remove quotes from review stream

#reviewstream .review-text, #reviewstream .review-text .review-text-inner {
  padding: 0;
  background-image: none;
}
#reviewstream .review-text {  
  padding: 5px 0 15px;  
}

Use your own icon on directly-collected reviews

i.icon-link-direct {
 background-image: url("https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-24.png") !important;
 width: 24px !important; /* adjust width/height to suit */
}

Landing page widget

Change landing page widget font color

#super-embed #message p {
color: #666666 !important;
}

Permanently display star rating descriptions

#stars ul li .link-wrap a {
 text-indent: 0;
 }

 

Lead-gen widget

Change color of the lead-gen widget

#super-embed .field-label {
color: #666666;
}

Modify lead-gen widget button example

#super-embed #field-submit input[type="submit"] {
background-color: #40ae49;
border-color: #40ae49;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

Landing page elements

Center landing page text

#content #message p {text-align: center;}

Remove phone number field from Contact / Customer Feedback form

#field-phone {
display: none;
}

Remove green “You are logged in” link button border

 .loggedIn {
 border-color: transparent !important;
}
.loggedIn:before {
 content: '' !important;
}