Watermarking in a template

Q:  Can I add watermarking in the background of my template design?
A:  The answer is, indeed, yes.  To accomplish this, we can use a combination of specifying an SVG image in the header region using the text view and referencing the content specified below.  With some minor adjustments to fit your needs, the sample below demonstrates how this can easily be done.  

1.  Copy the following code (an SVG image placed inside a block-container)

<fo:block-container z-index="-1" position="absolute" left="5pt" top="5pt" width="100%" height="100%">	
	<fo:block>		
		<fo:instream-foreign-object>			
			<svg xmlns="http://www.w3.org/2000/svg" width="680" 			height="920">			
				<text font-family="Arial Black" font-size="55pt" style="fill:rgb(255,192,192)"  x="-10" y="300" width="680" text-anchor="middle" transform="rotate(-54, 340, 15)">Watermark Sampl Here</text>			
			</svg>
		</fo:instream-foreign-object>	
	</fo:block>
</fo:block-container>

2.  Switch to Text View 

In the View Tab, under the "Document Views" group, select "Text View".  

3.  Paste the Copied Header Content

Using the header content example copied above, paste this within the xsl-region-before flow content as highlighted below.

4. Modify fill color, font, orientation, etc...

Using the example code, users can see the attributes for the SVG image.  For example:  font-family="Arial Black".  Users can make modifications to these attributes to achieve their desired look.  

5.  Preview and Adjust

Users can use the "View Tab" to switch to "Print Preview" and view their watermark.  If any adjustments are needed, one can simply navigate back to the "Text View" to adjust.  Sample output is highlighted below for this example.  

Edited by justinw - 02 May 2012 at 7:24pm

Author	Message / View First Unread Post Share Topic Printable Version Delicious Digg Facebook Furl Google Boomarks Google Buzz MySpace Newsvine reddit StumbleUpon Translate Twitter Windows Live Yahoo Bookmarks Topic Search Topic Options Post Reply Create New Topic
justinw Members Profile Send Private Message Find Members Posts Visit Members Homepage Add to Buddy List Admin Group Joined: 08 Dec 2011 Posts: 157	Post Options Post Reply Quote justinw Report Post Quote Reply Topic: Watermarking in a template Posted: 09 Mar 2012 at 7:44am
	Q: Can I add watermarking in the background of my template design? A: The answer is, indeed, yes. To accomplish this, we can use a combination of specifying an SVG image in the header region using the text view and referencing the content specified below. With some minor adjustments to fit your needs, the sample below demonstrates how this can easily be done. 1. Copy the following code (an SVG image placed inside a block-container) <fo:block-container z-index="-1" position="absolute" left="5pt" top="5pt" width="100%" height="100%"> <fo:block> <fo:instream-foreign-object> <svg xmlns="http://www.w3.org/2000/svg" width="680" height="920"> <text font-family="Arial Black" font-size="55pt" style="fill:rgb(255,192,192)" x="-10" y="300" width="680" text-anchor="middle" transform="rotate(-54, 340, 15)">Watermark Sampl Here</text> </svg> </fo:instream-foreign-object> </fo:block> </fo:block-container> 2. Switch to Text View In the View Tab, under the "Document Views" group, select "Text View". 3. Paste the Copied Header Content Using the header content example copied above, paste this within the xsl-region-before flow content as highlighted below. 4. Modify fill color, font, orientation, etc... Using the example code, users can see the attributes for the SVG image. For example: font-family="Arial Black". Users can make modifications to these attributes to achieve their desired look. 5. Preview and Adjust Users can use the "View Tab" to switch to "Print Preview" and view their watermark. If any adjustments are needed, one can simply navigate back to the "Text View" to adjust. Sample output is highlighted below for this example. Edited by justinw - 02 May 2012 at 7:24pm