CSS for SuperChartBoy

SuperChartBoy is pretty powerful already — and we’re not even out of beta yet. During the beta period, lifetime (including post-beta) SuperChartBoy licenses are complementary for all MyReviewPlugin customers. I’m seeing all sorts of really need implementations on dozens of customers’ websites so far. One thing some of the coolest share in common is a willingness to dive in to the CSS and get started on their own themes. Read on to learn more about the theming process for those with some CSS experience.

SuperChartBoy is built to allow you to create your own theme. To do that, simply go to the SuperChartBoy directory, navigate in to the themes/ subdirectory and copy one of the existing ones (if you’re not sure which to clone, take a look at them first and see which you like the best — or just start with basic).

Inside the theme directory is a file called style.css. This is the main theme file for the table: anything you write in this file will be included on any page that has your table on it.

In this file, we write CSS always prefaced with the form table.scb.scb_theme_THEMENAME — this says to select the SCB tables that have the theme THEMENAME (where THEMENAME is the name of your directory). If you change the directory, you have to change THEMENAME. For example, for the basic theme, this says table.scb.scb_theme_basic.

After that portion of the selector, you can select any element within the table. Literally any element can be selected thanks to the way SuperChartBoy adds CSS classes1. If you haven’t watched it yet, the MyReviewPlugin Advanced CSS Customization tutorial gives you a leg up here, you can watch it any time above.

The HTML for a table in SuperChartBoy looks something like this (depending on whether it is vertical or horizontal):

<table class=’scb scb_theme_basic scb_horizontal’ [...]>
<tr class=’scb_first_row[...]‘>
[all your table data]

Everywhere there is a CSS class, you can select it in your theme by using the syntax “.classname“, for example, to make the padding of all horizontal tables 5px, you could write:

table.scb.scb_theme_YOURTHEME.scb_horizontal { padding:5px; }

Now, to quickly sum up (some of – there are literally hundreds after all, to find others use the Advanced CSS technique in the video above) the available classes, we have a quick listing here:

  • scb_horizontal, scb_vertical – applies to the table itself and indicates whether we’re rendering a horizontal or vertical table.
  • The table itself has classes for literally every other option: sort order, sort type, number of posts, etc.
  • scb_first_row, scb_first_col – placed on the first row (tr) and the first column (td) of each table.
  • scb_last_row, scb_last_col – as above, but this time the last row and column.
  • scb_row_#, scb_col_# – change # to any number to select a particular row or column: for example scb_row_3 represents the 3rd row.
  • scb_element_name – selects the element name row or column (in horizontal tables, this is the first row, in vertical tables, the first column), that is the column that contains the title fields for the table elements.
  • scb_even, scb_odd – selects even/odd rows or columns (applies to both rows and columns, select a particular one of the options by doing something like tr.scb_even)
  • Every widget defines its own CSS classes, for example scb_predefined wraps every predefined widget, and scb_rank wraps every rank widget. Use the Advanced CSS video above to identify these classes in more detail as desired.

1 While it isn’t likely at this point, if there is something you want to select but can’t figure out how, there are many ways to add your own classes without modifying the core code, and if its a good idea, we’ll add the class to the main SuperChartBoy build for everyone to use. Get in touch via the ticket system.

Comments are closed.