Style Funnels with CSS

Here's some cool tips on how to style your Starfish Funnel with CSS.

Remove the shadow around the funnel box:

#srm-funnel { box-shadow: none!important; }

Adjust the size of the logo:

.srm-funnel-logo img { max-height: 200px; }

Increase the "200px" for a larger logo, decrease for smaller. Default is "150px".

Change the color of the feedback buttons:

#srm-funnel-positive.srm-funnel-icon { color: blue; }

#srm-funnel-negative.srm-funnel-icon { color: red; }

Make the required fields indicator more visible:

#srm-funnel form .srm-funnel-required-indicator {
  font-size: 18px;
  color: red;
}

Where to put the above CSS:

First, open the Wordpress Customizer here:

Then navigate to Additonal CSS at the very bottom, here:

Put the CSS in there. It will be applied to every funnel on the site though. 

Targeting specific funnels

If you want to target specific funnels you can install a plugin (if your theme doesn't support it) to load custom CSS per-page/post, or put the post class in front of each CSS selector like this:

.postid-29906 #srm-funnel { box-shadow: none!important; }

That will make it apply only to that specific funnel with that post ID number.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us