Following our previous post explaining that you can now choose the embed comparison table style, we will detail here the way to completely customize the style of your comparison table.
This post requires some technical skills and is only intended for people that would like to embed a comparison on their website or blog.
To embed a comparison on a website you need to copy and paste following HTML code:
<iframe width="100%" height="270" src="http://socialcompare.com/en/w/playstation3-vs-xbox360-vs-wii#" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"></iframe>
This is the default syntax which produces the following result:
If you want to customize it, you need to change the URL and specifically the part after “#”.
- The default style is just: #
- The compact syntax is: #nofoot;noround;noactions;noflags;header-font-size:12px;header-color:#555;header-border:none;header-padding:2px 5px;cell-font-size:12px;cell-border:none;cell-padding:2px;image-max-width:120px;image-max-height:90px
Click the above links to test the different styles directly. You will notice that the second style better fits the blog space area for this comparison.
Let’s see what we can customize. Below is the list of table’s areas you can change:
- cell: table cells (use cellhover to customize when the cursor is above it, cellodd for cells on odd lines, celloddhover to combine both)
- header: table headers either criteria or items headers (headerodd for header on odd lines)
- item: table headers for items (itemodd for items on odd lines (only if your table is rotated since by default items are columns))
- section: headers/cells for criteria with type header (sectionhover when the cursor is above it)
- corner: the cell in the top left corner of the table (cornerhover: when the cursor is above it)
- link: links in the table (linkhover when the cursor is above it)
- image: the images appearing in the table (useful with max-width, max-height to limit images dimensions)
The syntax is similar to CSS.
On all the table areas given above, you can change the following attributes:
background, border, color, font, font-size, letter-spacing, line-height, max-width, max-height, min-width, min-height, padding, text-align, text-decoration, text-shadow, text-transform, vertical-align, word-spacing.
Append the table part with the attribute you would like to change separated by ‘-’.
For example if you would like to change the text color for items:
If you would like to change the background color for odd lines: you would need to change odd cells and odd headers, and separate multiple modifications with ‘;’:
You can check out a CSS manual to know the accepted values on each attribute.
Following characters are not accepted:
,'"()%! so some values could not be specified (ie.: 100%, url(), !important)
There are some additional options you can add:
- noround: to have no rounded corners in the headers of the table.
- nofoot : to have no footer space at the end of the table.
- noactions : to have no action icons (rotate, restore table, sort, edit/suggest, drag and drop).
- noedit: to have only sort icons on the criteria.
- noflags: to hide the language flags at the bottom of the table.
To easily customize your table style, you can directly edit the URL in your browser (click the link below and edit the URL until you get the style you like):
http://socialcompare.com/en/w/playstation3-vs-xbox360-vs-wii#noedit;nofoot;item-color:#00aa33;header-padding:2px 18px 2px 2px;item-padding:5px;section-padding:10px 2px 2px 2px;section-color:#00aa33;cell-padding:2px;image-max-height:120px
Once you have found the combination you like, replace the URL in the initial HTML code.
Let us know in the comments below, if there are some missing attributes that you would like to customize, or if you have created some nice style you would like to share with others…