0
Welcome Guest! Login
0 items Join Now

Super Spring Sale

Spring is in the air, and so are the savings during our Super Spring Sale! Save 50% on single themes and 35% on Club memberships and renewals for a very limited time.

RokFeatureTable

Your Guide to Using RokFeatureTable for WordPress


Widget Options

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.

1
Title
Sets the title for the RokFeatureTable widget. This is not a required field.
2
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.
3
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.
4
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.
5
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.
  1. Title: Sets the title for the RokFeatureTable widget. This is not a required field.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Table Layout

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.

1
Columns
You can add or remove columns to your feature table. Columns can be individually highlighted to emphasize the included content.
2
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.
3
Class
You can use the class control to add a unique CSS class to the cell.
4
Subline
This option allows you to add a sub-line of text to the cell. This is useful for disclaimers or extra information.
5
Link
You can have a particular cell link to a specific URL.
6
Style
This option allows you to assign custom style rules to the cell.
  1. Columns You can add or remove columns to your feature table. Columns can be individually highlighted to emphasize the included content.

  2. 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.

  3. Class You can use the class control to add a unique CSS class to the cell.

  4. Subline This option allows you to add a sub-line of text to the cell. This is useful for disclaimers or extra information.

  5. Link You can have a particular cell link to a specific URL.

  6. Style This option allows you to assign custom style rules to the cell.

Custom Themes

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: class2 and class3".

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, -link.

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: name::padding-top:10px;|<strong style="color:red;"><em>Firefox</em></b>


Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.