Your Guide to Using RokFeatureTable for WordPress
You can access RokFeatureTable's main widget settings by navigating to Admin -> Appearance -> Widgets -> RokFeatureTable. Any changes you make here will be reflected in a single occurrence of the RokFeatureTable widget on the frontend of your site.
Title: Sets the title for the RokFeatureTable widget. This is not a required field.
Highlight Column: This option sets the column number you wish to have highlighted by default. This is typically a column or product you wish to bring attention to.
Built-in CSS: RokFeatureTable comes with a default style that integrates well with many WordPress themes. If you want to use your own, or if the theme you are using supports a custom style, you might want to set this param to No.
Theme Selection: RokFeatureTables has the ability to import predefined templates from wp_content/plugins/wp_rokfeaturetable/templates/. RokFeatureTable comes with two predefined templates as examples: Browsers and Price Table.
Current Table Layout: This area of the menu sets the size and content of the feature table. It is the most important component of the widget setup process. More details about this menu are located in the Table Layout section below.
You can access the table layout options via the widget properties menu. This tool allows you to create and fill your feature table with information that includes everything from basic text to custom CSS classes, subline text, links, and styles.
Columns You can add or remove columns to your feature table. Columns can be individually highlighted to emphasize the included content.
Rows Each column can have an independent number of rows. You can add or remove rows using the + or - controls. Each row within a column acts as a single cell.
Class You can use the class control to add a unique CSS class to the cell.
Subline This option allows you to add a sub-line of text to the cell. This is useful for disclaimers or extra information.
Link You can have a particular cell link to a specific URL.
Style This option allows you to assign custom style rules to the cell.
Creating custom themes is very easy. You just need your favorite text editor and some knowledge on how the syntax is. Below an example of custom theme that we are going to cover on all its aspects.
name::padding-top:10px;|Firefox name-sub::Gecko Engine name-classes::class2 class3 button-text::Download button-text-sub::free button-text-link::http://www.mozilla.com/en-US/firefox/all.html --- name::padding-top:10px;|Chrome name-sub::WebKit Engine name-classes::class2 class3 button-text::Download button-text-sub::free button-text-link::http://www.google.com/chrome --- name::padding-top:10px;|Safari name-sub::WebKit Engine name-classes::class2 class3 button-text::Download button-text-sub::free button-text-link::http://www.apple.com/safari/download/ --- name::padding-top:10px;|Opera name-sub::Presto Engine name-classes::class2 class3 button-text::Download button-text-sub::free button-text-link::http://www.opera.com/browser/
Each Column is separated by 3 dashes
---, so every time you are done writing rows, to 'switch' to another column, just add
To create a row, or even better, a cell, you start typing the class name of the reference followed by two colons
::. Let's ignore all the columns and let's just take as reference the first one. Even without knowing the syntax, yet, you can easily tell all the columns and rows are equals, what makes them difference are just the values, but not the structure.
name::padding-top:10px;|Firefox name-sub::Gecko Engine name-classes::class2 class3 button-text::Download button-text-sub::free button-text-link::http://www.mozilla.com/en-US/firefox/all.html
So, as said earlier, we started writing a cell
name::padding-top:10px;|Firefox. This translated means: "Create a cell, use as referenced class name 'name', add some in-line styling
padding-top:10px; and use Firefox as text of the cell.
In the case that you want that cell to have a subline, the next line of the code would contain something like:
name-sub::Gecko Engine. As you can see, 'name' has been kept for referencing to the 'name' cell, but we added a new keyword
-sub. That is what lets RokFeatureTable know that our second line in the code needs to be a subline of 'name'. Translation: "In the cell that has 'name' as reference class add a subline with the text 'Gecko Engine'".
Now, let's say we want our cell to have additional classes. To do so, follow the same rules of '-sub', we write:
name-classes::class2 class3, which translates to: "In the cell that has 'name' as reference class, I also need other classnames:
What follows is not prefixed by any 'name' anymore. That means we are done with the 'name' cell and we are switching to a new one, 'button-text'.
Everything is exactly as in 'name' cell, except we have a new keyword,
NOTE: All the referenced cells allows HTML syntax, if instead of just plain "Firefox" (in the example above), we wanted a bold, red and italic "Firefox" (Firefox) this is how we would have written our cell: