GravityWP – CSS Selector

描述

This plugin is an add-on for the amazing Gravity Forms Plugin.
Special thanks to Brad Vincent and Bryan Willis for developing the first and revised version of this plugin.

Gravity Forms has CSS Ready Classes to style your form fields. Using these classes, you can easily create more advanced layouts for the fields in your forms. Excellent idea, however, the problem is you always need to remember what the exact class name is. Now with this CSS Ready Classes selector, you don’t need to remember. Simply click on a button to launch the pop-up and choose the class you want to add.

Features

  • Convenient button added under the advanced tab next to the CSS Class field
  • Clean and simple pop-up that lists all the CSS Ready Classes
  • Add more than one CSS Ready Class
  • Double-click a CSS Ready Class to add it and auto-close the popup
  • Also 4 columns supported

螢幕截圖

  • The button that gets added in the advanced tab
  • The pop-up modal that is displayed
  • Add custom css

安裝

  1. Upload the plugin folder to your /wp-content/plugins/ folder
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Make sure you also have Gravity Forms activated.

常見問題

Does this plugin rely on anything?

Yes, you need to install the Gravity Forms Plugin for this plugin to work. And it needs to be at least v1.5.

How to add custom CSS buttons?

You can add your own CSS to the CSS Selector easily in your functions.php file. Just add the following example code there. It adds quick buttons and an accordion on top of the modal. That way you can put easily your own CSS in the layout you want.

// Add custom css: quick buttons and accordion at the top of the GravityWP - CSS Selector modal
function my_custom_gwp_css_selector_add_css() {
    $html .= "<div class='gwp_quick_links'>
    <a class='gwp_css_link' href='#' rel='your_custom_css_class' title='Adds your_custom_css_class to the CSS field'>Custom css</a>
    <a class='gwp_css_link' href='#' rel='your_custom_css_class_2' title='Adds your_custom_css_class_2 to the CSS field'>2nd custom css</a></div>
    <li>
    <a class='gwp_css_acc_link' href='#'>Custom CSS</a>
    <div class='gwp_css_accordian'>
    <a class='gwp_css_link' href='#' rel='your_custom_css_class' title='Adds your_custom_css_class to the CSS field'>Custom css</a>
    <a class='gwp_css_link' href='#' rel='your_custom_css_class_2' title='Adds your_custom_css_class_2 to the CSS field'>2nd custom css</a>
    </div>
    </li>";
    return $html;
}
add_filter( 'gwp_css_selector_add_custom_css', 'my_custom_gwp_css_selector_add_css' );

評價

2021年3月12日
Fantastic plugin to style your Gravity forms. Saves a lot of time. Thanks you so much for making this available.
2019年10月7日
I've check out css name documentation for gravity like a million times to make columns until I came across this plugin.. thanks for making it available. it does what it should. would be nice to have the actual field value delete when selecred other option.
2019年3月12日
Does the job exactly how you want.. wish I could drop 10 points here
2018年2月19日
I tried the other css selector plugin but that looks like it has been abandoned. Found this and very impressed. Worked well and like all the options. Now if only you can create a styling plugin for Gravity forms. Gravity forms is great but ugly and does not have multi column support, but you have done a great job with this.
閱讀全部9個評價

貢獻者及開發者

“GravityWP – CSS Selector” 是一個開源的軟體。以下的人對這個外掛作出了貢獻。

貢獻者

GravityWP – CSS Selector 外掛目前已有 1 個本地化語言版本。 感謝所有譯者為這個外掛做出的貢獻。

將 GravityWP – CSS Selector 外掛本地化為台灣繁體中文版。

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

修改日誌

1.0.1

  • Updated url to official Gravity Forms CSS Ready Classes documentation (https://docs.gravityforms.com/css-ready-classes/)

1.0

  • Add gwp_css_selector_add_custom_css filter to add custom css
  • Updated translation files

0.2.2

  • Adjusted the Gravity PDF pagebreak CSS
  • Added gf_invisible CSS class
  • Combined list columns and list heights to Radio Buttons & Checkboxes
  • Changed links to documentation

0.2.1

  • Added pagebreak support for Gravity PDF
  • Updated translation file
  • Updated Dutch translation

0.2

  • Added CSS classes for Gravity PDF (exclude) and Gravity Wiz (Copy Cat)
  • Updated layout (documentation available on click)

0.1

  • Initial Release
  • Added localisation