General Information
Those css classes and ids listed below are part of the custom CSS classes used by the editors. Those can be extended by request.
It would be always prefered in case it is required to change the appearence of an element to use classes rather than writing own CSS style into the pages.
In the list below you will always find the class/id name, an example on how to use the the css and an example of the result.
Sometimes additional information will be writen down.
Text Styles
gc_button
<a href="/en/help" class="gc_button">Editor Help</a>
formats a text into a button, usable mostly for links, but can be also used with the span element
gc_button img
<a href="https://goodcalculator.x1fr.com" class="gc_button">
<img src="/icons/icons_common/calc.png">Good Calculator</a>
An image used within the gc_button class will be formatted to be attached to the left side in a proper size
Good Calculatoralign_left and align_right
<p class="align_right">Text</p>
Those classes can be applied to any box, mostly in td-elements of tables to change the align of the text.
Text on the right side!
float
<div class="float">
<img class="float_left" src="/icons/icons_modules/itm_simple_circuit.png">
This is a sample Text!
</div>
<img class="float_left" src="/icons/icons_modules/itm_simple_circuit.png">
This is a sample Text!
<br class="float_stop">
With float_left and float_right elements can be marked to be floated around with text. To limit the text which is floating around an image, it can be put in a div with the float class.
One can also add an elment with the class float_stop at the point the floating should stop.
This is a sample Text!
This is a sample Text!
This is a sample Text!
Image Styles
gc_small_icon
<img class="gc_small_icon" src="/icons/icons_modules/itm_simple_circuit.png">
Small icon that can be used well within text
Sample Text
gc_small_icon_tinted
<img class="gc_small_icon_tinted" src="/icons/icons_common/gredit.png">
Make a small bright icon dark
Sample Text 
gc_medium_icon
<img class="gc_medium_icon" src="/icons/icons_modules/itm_simple_circuit.png">
Medium sized icon, can be well used along many other elements
gc_medium_icon_tinted
<img class="gc_medium_icon_tinted" src="/icons/icons_common/gredit.png">
Make a medium bright icon dark
gc_icon
<img class="gc_icon" src="/icons/icons_modules/itm_simple_circuit.png">
Large Image, used when it's needed to display an image quite well outstanding
gc_icon_tinted
<img class="gc_icon_tinted" src="/icons/icons_common/gredit.png">
Make a bright image dark
bigimage
<img src="/roadmap/roadmap_en.png" class="bigimage">
By default images are limited to 30% of the viewports height. To override this in case you want an image to be shown with the full size (limited to 100% width of the content area) use the bigimage class. But remember not to overuse it as it may harder to read the pages
Tables
tooltip_table (id)
<table id="tooltip_table"><tr><td>Text</td></tr></table>
This table style is used as info box on the floating on the right side of the page for some corner data. A usage can be found for example on the itm_led_matrix page.
This style can be also applied to any other pages for such important data.
| This is the header |
|---|
| A normal Text |
| Text below a line |
| Another header text |
| Normal text 3 |
| The final text |
<table id="tooltip_table">
<tr><th>This is the header</th></tr>
<tr><td>A normal Text</td></tr>
<tr class="tooltip_line"><td></td></tr>
<tr><td>Text below a line</td></tr>
<tr class="tooltip_h2"><td>Another header text</td></tr>
<tr><td>Normal text 3</td></tr>
<tr><td>The final text</td></tr>
</table>
no_background (id)
<table id="no_background"><tr><td>Text</td></tr></table>
A table without any background color or borders.
In case one want to have the grid of a table, but it not being visible
| Text | Text | Text |