Tutorial: Insert your own logo

It is easy to insert a custom logo into one of the existing Issuu themes by following the steps outlined below.

Step 1. Configure the Theme

The first step is to configure the theme on your website: Follow the steps in the Configuration section of the Getting Started guide, but use the desired Issuu theme instead of the basic theme provided there.

Step 2. Upload the Logo

You can upload the logo graphic (a PNG, JPG, or GIF image file) to any location on your website.

Step 3. Edit the layout.xml File

Open the layout.xml file for your theme and insert the following line of code at the end, right before the closing of the viewer element:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" ... >

 ...

 <object source="http://example.com/images/logo.png" />

</viewer>

The value of the source attribute should be replaced with the complete URL to the image file uploaded in Step 2. (Note: Using a partial URL won’t work even though the image file is on the same website as the theme.)

Once this is done, upload the modified layout.xml file to your website, overwriting the old version of the file.

Try It Out

Now when you point the Viewer to the theme on your website, it should load the theme and display your custom logo in the top-left corner. e.g.

http://issuu.com/jesper/docs/gan_issuu?mode=embed&documentId=080311154822-183d3d8334a544518a0d5e324f2543d4&layout=http://example.com/issuu/themes/grey/layout.xml

Adjusting the Size, Position, and Depth

You can go back to Step 3 to adjust the size, position, and depth of the logo using the sizing, positioning, and depth attributes.

For example, the logo may be stretched to a specific size, say 100 px. by 50 px.:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" ... >

 ...

 <object source="http://example.com/images/logo.png"
  width="100" height="50" />

</viewer>

... it may be moved to a specific location, say to the bottom-left corner of the Viewer, offset by 4 px.:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" ... >

 ...

 <object source="http://example.com/images/logo.png"
  left="4" bottom="4" />

</viewer>

... and it may be brought in front of or pushed behind other objects:

<?xml version="1.0"?>
<viewer xmlns="http://issuu.com/viewer/1.0" ... >

 ...

 <object source="http://example.com/images/logo.png"
  depth="1" />

</viewer>

In the example above, since the depth of every object by default is 0, setting its depth to 1 brings the logo in front of all other objects. Likewise, the depth may be set to a negative value like -1 to push it behind all other objects.

 

 

Overview