Issuu Platform & Services

You can use the sample themes provided here to improve your understanding of how to customize Issuu. The samples may also be used as a starting point for your own custom themes.

Basic Blue Theme

Preview
Download Flash version
Download bitmap version

Flash
Bitmap

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundImage="#Background" backgroundSize="stretch">

  <skin source="skins.swf"/>

  <button action="pagePrevious" horizontalCenter="-40" top="10" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled" />

  <button action="index" horizontalCenter="0" top="10" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down" />

  <button action="pageNext" horizontalCenter="40" top="10" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState="#NextButton_disabled" />

  <dropp left="0" top="50" right="0" bottom="10"/>

</viewer>

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#0183d7" backgroundImage="#150,0,200,147" backgroundSize="stretch">

 <skin source="skins.png" type="image"/>

 <button action="pagePrevious" horizontalCenter="-40" top="10" upState="#38,0,75,36" overState="#38,37,75,73" downState="#38,74,75,110" disabledState="#38,111,75,147"/>

 <button action="index" horizontalCenter="0" top="10" upState="#76,0,113,36" overState="#76,37,113,73" downState="#76,74,113,110" disabledState="#76,111,113,147"/>

 <button action="pageNext" horizontalCenter="40" top="10" upState="#0,0,37,36" overState="#0,37,37,73" downState="#0,74,37,110" disabledState="#0,111,37,147"/>
 
 <dropp left="0" top="50" right="0" bottom="10"/>

</viewer>

Basic Grey Theme

Preview
Download

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundImage="#Background" backgroundSize="stretch">

  <skin source="skins.swf"/>

  <button action="fullScreen" horizontalCenter="-100" top="10" upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" />

  <box direction="horizontal" horizontalCenter="0" top="10">
    <button action="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled" />
    <button action="index" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down" />
    <button action="pageNext" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState="#NextButton_disabled" />
  </box>

  <pageNumber right="#droppContentRight" top="20" />

  <dropp left="0" top="50" right="0" bottom="80"/>

  <dock left="0" bottom="10" right="0" />

</viewer>

Wood Theme

Preview
Download

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#ffffff" backgroundImage="#Background" backgroundRepeat="repeat">

	<skin source="skins.swf"/>

	<box direction="horizontal" horizontalAlign="center" verticalAlign="middle" left="0" right="0" top="14" bottom="#droppContentTop">
		<image source="#Menubar" />
	</box>

	<box direction="horizontal" horizontalAlign="center" verticalAlign="middle" left="0" right="0" top="15" bottom="#droppContentTop">
	    <button action="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled"/>
		<button action="pageNext" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState="#NextButton_disabled"/>
		<button action="index" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down"/>		
		<spacer width="6" />				
	    <button action="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" disabledState="#FullscreenButton_disabled"/>
	    <spacer width="6" />	
	    <button action="share" upState="#ShareButton_up" overState="#ShareButton_over" downState="#ShareButton_down"/>
	    <spacer width="6" />				
	    <button action="print" upState="#PrintButton_up" overState="#PrintButton_over" downState="#PrintButton_down"/>
	    <spacer width="6" />
	    <button action="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over" downState="#ViewModeButton_down"/>
	    <spacer width="13" />
		<pageNumber bottom="12" fontSize="12" color="#89716b" fontFamily="Arial, Verdana"/>
	</box>  

	<dropp left="0" top="50" right="0" bottom="78"/>

	<dock left="0" right="0" bottom="10" height="80"/>

</viewer>

Crayon Theme

Preview
Download

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#ffffff" backgroundImage="#Background" backgroundSize="stretch">

  <skin source="skins.swf"/>

  <box direction="horizontal" horizontalAlign="center" verticalAlign="middle" left="0" right="0" top="15" depth="1">
	<button action="index" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down" toolTip="Show em' all"/>		
	<spacer width="20" />				
	<button action="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" disabledState="#FullscreenButton_disabled" toolTip="All clear skies"/>
	<spacer width="25" />	
	<button action="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled" toolTip="To the past"/>   
	<spacer width="15" />
	<pageNumber top="24" fontSize="12" color="#3399cc" fontFamily="Arial, Verdana"/>
	<spacer width="10" />
	<button action="pageNext" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState="#NextButton_disabled" toolTip="To the future"/>
	<spacer width="30" />
	<button action="share" upState="#ShareButton_up" overState="#ShareButton_over" downState="#ShareButton_down" toolTip="Share the puffy feeling"/>
	<spacer width="20" />				
	<button action="print" upState="#PrintButton_up" overState="#PrintButton_over" downState="#PrintButton_down"/>
	<spacer width="20" />
	<button action="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over" downState="#ViewModeButton_down"/>
  </box>

  <dropp left="0" top="50" right="0" bottom="78"/>

  <image source="#sun" top="10" right="#droppContentRight"/>
  <image source="#cloud1" top="200" left="15" depth="-1"/>
  <image source="#cloud2" top="#droppContentCenter" right="#droppContentRight"/>

  <box direction="horizontal" horizontalAlign="center" verticalAlign="bottom" left="0" right="0" bottom="#viewerBottom:-30">	
	<image source="#grass1"/>
	<spacer width="20" />
	<image source="#grass2"/>
	<spacer width="30" />
	<image source="#grass2"/>
	<spacer width="40" />
	<image source="#grass1"/>
	<image source="#grass2"/>
	<spacer width="100" />
	<image source="#grass1"/>
  </box>

  <box direction="horizontal" horizontalAlign="center" verticalAlign="bottom" left="0" right="0" bottom="#viewerBottom:-50">	
	<image source="#grass1"/>
	<spacer width="200" />
	<image source="#grass2"/>
	<spacer width="100" />
	<image source="#grass1"/>
  </box>

  <dock left="0" right="0" bottom="10" height="80"/>

</viewer>

White Theme

Preview
Download

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#ffffff" backgroundImage="#Background" backgroundSize="stretch">

  <skin source="skins.swf"/>

  <image source="#Menubar" />

	<box direction="horizontal" horizontalAlign="center" left="0" right="55" top="7">
	    <pageNumber fontSize="12" color="#333333" fontFamily="Arial, Verdana"/>
	</box>

  <box direction="horizontal" horizontalAlign="center" left="0" right="0" top="3">
    <button action="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled"/>
    <image source="#Seperator"/>
    <button action="index" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down"/>		
    <image source="#Seperator"/>
    <button action="pageNext" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState=    "#NextButton_disabled"/>
    <image source="#Seperator"/>
    <spacer width="64" />
    <image source="#Seperator"/>
    <button action="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" disabledState="#FullscreenButton_disabled"/>
    <image source="#Seperator"/>
    <button action="share" upState="#ShareButton_up" overState="#ShareButton_over" downState="#ShareButton_down"/>
    <image source="#Seperator"/>				
    <button action="print" upState="#PrintButton_up" overState="#PrintButton_over" downState="#PrintButton_down"/>
    <image source="#Seperator"/>
    <button action="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over" downState="#ViewModeButton_down"/>
  </box>

  <dropp left="0" top="35" right="0" bottom="78"/>

  <dock left="0" right="0" bottom="10" height="80"/>

</viewer>

White Menu Theme

Preview
Download

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" backgroundColor="#ffffff" backgroundImage="#Background" backgroundSize="stretch">

	<skin source="skins.swf"/>

	<box direction="horizontal" horizontalAlign="center" verticalAlign="middle" left="18" right="0" top="15" bottom="#droppContentTop">
    	<button action="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down" disabledState="#PreviousButton_disabled"/>
    	<button action="pageNext" upState="#NextButton_up" overState="#NextButton_over" downState="#NextButton_down" disabledState="#NextButton_disabled"/>
		<spacer width="10" />
		<pageNumber top="24" right="#droppContentRight" fontSize="12" color="#333333" fontFamily="Arial, Verdana"/>
		<spacer width="20" />		
		<button action="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over" downState="#FullscreenButton_down" disabledState="#FullscreenButton_disabled"/>
		<button action="index" upState="#IndexButton_up" overState="#IndexButton_over" downState="#IndexButton_down"/>		
		<button action="print" upState="#PrintButton_up" overState="#PrintButton_over" downState="#PrintButton_down"/>	
		<button action="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over" downState="#ViewModeButton_down"/>
		<button action="share" upState="#ShareButton_up" overState="#ShareButton_over" downState="#ShareButton_down"/>
		<spacer width="20" />
	</box>

	<dropp left="0" top="50" right="0" bottom="78"/>

	<dock left="0" right="0" bottom="10" height="80"/>

</viewer>

Platform & Services

Sample Themes

Basic Blue Theme

Basic Grey Theme

Wood Theme

Crayon Theme

White Theme

White Menu Theme