Follow

Can I personalize my showcase with custom CSS styling?

Yes, showcases do have the option for adding CSS styling. If you have the option to use CSS styling, you need to add #z_wrapper before any CSS ruleset.

To personalize the showcase do the following:

  1. Navigate to Web Plugin > My Web Plugins.
  2. Scroll down and select Edit Custom CSS. 
  3. Add the #z_wrapper to the CSS as shown in the second image on this page.

More About CSS

CSS stands for Cascading Style Sheet. Therefore by nature of the "cascade", any element will be targeted by all rules that it matches regardless of if the rule is in the user-defined sheet, the Zift-defined sheet, or user styles added to the plugin in Zift123. The Zift Production team primarily uses 2 methods to ensure that our plugins (and their associated CSS) do not interfere with partner sites. The two methods follow:

  1.  Wrap all content in a parent element with a specific id. Ex. <div id="z_wrapper">...</div>
    • This allows us to specifically target general HTML elements in the CSS without affecting the partners base page. For example #z_wrapper h2 { STYLE RULES HERE }
  2. Use z_ notation on all custom IDs and classes.
    • This allows us to target the correct specific element
These 2 rules do a very good job of preventing the plugin from interfering with the website. However, there is no guarantee that the partner's rules don't interfere with our plugins. For example, if a partner's site replaces all bullets with an image of the star that would most likely carry into the plugin whether intentional or not. Zift has a custom CSS field on the plugins available for the partners to personalize. The intention of this field is to allow partners to correct any inconsistencies caused by their base CSS or the combination of their CSS and ours. 
 
The order of the hierarchy of the cascade is as follows:
  • Partner's site styles
    • Zift defined styles
      • Partner override styles (personalized in Zift123)

For additional help with CSS styling contact you web developer.

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

Comments

© 2017 Zift Solutions, Inc.
Powered by Zendesk