How to enable Sistr on your site

Sistr uses jQuery and works with version 1.3 or higher. Download the latest version of jQuery and click here to download the Sistr files. To enable Sistr on your website, follow these simple steps:

In order to be able to use Sistr on your webpage you must reference 2 scripts. One for the jQuery library and one for the Sistr jQuery plug-in. Add this code snippet to your webpage: 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.sistr.js"></script>

Sistr will be directed to the right titles or text in your webpage by using a jQuery selector as soon as your page has been loaded. On the result set of that selector you will have to call the .sistr() function provided by the sistr.jquery.js plug-in. Add this code to your HTML page and you're good to go. 

$(document).ready(function() {
	$("h1").sistr({
		font: "Arial",
		size: 22,
		color: "#FFCC00"
	});
});

Properties

Using the .sistr() function you can give Sistr a couple of properties. At the moment, these properties are supported:

  • font
    • Set the source of your custom font. This needs to be an URL to the TTF file you want to use.
    • Type: string
    • Default value: ""
  • fontName
    • The set name of the font you want to use.
    • Type: string
    • Default value: "Arial"
  • xap
    • Set the location to a custom xap file you want to use (only used when you have embedded a font, for more info see below).
    • Type: string
    • Default value: ""
  • size
    • The font size in pixels.
    • Type: double
    • Default value: 12
  • color
    • Foreground color of your text, in hexadecimal value.
    • Type: string
    • Default value: "#000000" (black)
  • rotation
    • Rotation of your text. Positive values are clockwise, negative are counter clockwise.
    • Type: double
    • Default value: 0 (horizontal, from left to right)
  • lineHeight
    • Sets the line height, in pixels.
    • Type: double
    • Default value: 0 (which will revert to the Silverlight default value, which is a Double.NaN)
  • paddingTop
    • Provides padding on the top (within the silverlight object).
    • Type: double
    • Default value: 0
  • paddingRight
    • Provides padding on the right (within the silverlight object).
    • Type: double
    • Default value: 0
  • paddingBottom
    • Provides padding on the bottom (within the silverlight object).
    • Type: double
    • Default value: 0
  • paddingLeft
    • Provides padding on the left (within the silverlight object).
    • Type: double
    • Default value: 0
  • transparent
    • Make the Silverlight background transparent.
    • Type: boolean
    • Default value: false
  • maxWidth
    • Silverlight will automatically set it's width and height. With this parameter you can set a maximum width.
    • Type: object
    • Default value: 0 (disabled, any value larger than 0 will enable it)
  • shadow
    • Enable a shadow on the text. The value should be a shadow object (see below).
    • Type: object
    • Default value: object with parameter enabled set to false

Shadow

You can add a shadow effect to your text by adding the parameter 'shadow' to your Sistr properties (see above). This parameter requires an object with any of these parameters:

  • enabled
    • Enable or disable the shadow effect.
    • Type: boolean
    • Default value: false
  • blur
    • Set the spread (radius) for the shadow blur effect (in pixels).
    • Type: double
    • Default value: 5
  • depth
    • Set the depth of the shadow.
    • Type: double
    • Default value: 5
  • color
    • The shadow color in a hexadecimal value.
    • Type: string
    • Default value: "#000000" (black)
  • direction
    • Set direction of the shadow.
    • Type: double
    • Default value: 3
  • opacity
    • Sets the opacity or transparency of the shadow.
    • Type: double (min 0, max 1)
    • Default value: 0.3

Custom fonts

You're able to use custom fonts with the Sistr plug-in. You can either do this by supplying the plug-in with the correct URL to the TTF file you are hosting somewhere by setting the font property. Don't forget to supply the fontName property to select the font as the active font.

Another way of using custom fonts is to embed them in the xap file's dll. This way no one will be able to easily get the TTF file you used. This feature has been implemented to secure copyrighted fonts. To do this you will need to download the Sistr source code and edit it using Expression Blend 3 (download).

Create a custom XAP file

Open Microsoft Blend 3 and select the Textbox in the XAML tree on the left:

Select your custom font in the Text properties window on the right and enable the "Embed" checkbox to embed the font in the new xap file:

Then simply rebuild the project and use the generated xap file for your titles. You can set the plug-in to use your personal xap file by filling in the xap property (see above).