3% off

How can i adjust the width, height, margins and backgroundcolor?

TSViewer integration
This things are fast and easy possible with CSS (Cascading Style Sheets) directly in the TSViewer code. The first part of the TSViewer code is a CSS layer (div) for the TSViewer, example:
<div id="ts3viewer_1234567" style=""> </div>
You enter CSS rules within the style command of this CSS layer (div). Lets get started.

Width & Height

You specify the width of the TSViewer in pixels, for example a width of 200 pixels looks like this:
<div id="ts3viewer_1234567" style="width:200px; overflow:auto;"> </div>
You can also specify a height if needed (usually not needed), without a specified height the height of the TSViewer will by dynamic (only as big as needed). If you specify a height, the TSViewer will be always have the same height, anything that goes over the specified height will generate a scrollbar or can for example be hidden (controlled by the overflow rule). The TSViewer code div with a specified width and height looks like this:
<div id="ts3viewer_1234567" style="width:200px; height:300px; overflow:auto;"> </div>


The background-color is specified by the CSS background-color rule. You can either write words like black, grey, red, blue, white, etc. or you can specify the color exactly by an HEX code. At this example the background-color is specified by the HEX code for an grey color, its #777777:
<div id="ts3viewer_1234567" style="background-color:#777777;"> </div>
And here a example with the word grey for the background-color:
<div id="ts3viewer_1234567" style="background-color:grey;"> </div>
You use the words if you just need the basic color and you use the HEX code if you need a specific type of color.


This is done by the CSS rule margin. In this example we use the following margins: 10px (top), 5px (right), 15px (bottom) and 0px (left):
<div id="ts3viewer_1234567" style="margin:10px 5px 15px 0px;"> </div>
The order of the margin values is always: top, right, bottom, left.

Multiple CSS rules together

You seperate multiple CSS rules with a semicolon ; betwen them. If we would use all so far explained CSS rules, it would look like this:
<div id="ts3viewer_1234567" style="width:200px; height:300px; overflow:auto; background-color:#777777; margin:10px 5px 15px 0px;"> </div>


Further reading about CSS and its possibilities you can find for example at the W3 Schools for CSS. You can also get help at the TSViewer.com forums.
Please leave a comment if something is not well explained in this guide, bad worded or just wrong. Praise, critism, improvement ideas, everything.