Skip to content Skip to navigation

OpenStax_CNX

You are here: Home » Content » How to edit custom layouts in Blurb

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

How to edit custom layouts in Blurb

Module by: David Waldo. E-mail the author

Summary: Blurb BookSmart software allows you to create custom books and make your own layouts. However, there are limitations to the layout editor. This module shows you how to dig into the XML code that BookSmart uses and fix some of these limitations.

How to edit custom layouts in Blurb

This module is written for Blurb BookSmart Version 2.5.1.30022. This version allows editing of Layouts but still has some limitations on its use. This module describes how to edit the XML file that contains custom Layouts for BookSmart. I take no responsibility if BookSmart quits working or if you lose data. I am supplying this information so that you will know what I did. Use this information at your own risk.

Reasons for editing the custom layouts

Blurb has added the ability to edit custom layouts in its BookSmart software. However, there are a couple of things that it does not allow you to do that would make editing layouts much nicer.

The first drawback to the layout editor is it does not allow you to make a layout that works for both right and left pages.

The second drawback to the layout editor is it does not allow you to have text boxes that flow text from one box to the next when you paste into them.

As an example, after making a new Small Square blank book in BookSmart I will add several pages and then look at one of the built in Text Layouts. Here are two pages in the book, a left and a right page. Notice that the margin in the center is bigger than the ones on the left and right even though the same page layout is used. Also, the text flows from one text box to the other when text is pasted into the left box.

Figure 1
Figure 1 (graphics1.png)

Now let's make our own layout using the same built in layout. First I will make a blank right page using the Text Layout above.

Figure 2
Figure 2 (graphics2.png)

Now select Edit Layout. The layout editor opens with this view:

Figure 3
Figure 3 (graphics3.png)

Notice that the text boxes are locked. The reason is the text can flow from one to the other. If we want to edit them they must first be unlocked.

Figure 4
Figure 4 (graphics4.png)

Now hit the Apply & Save to My Layouts button and the layout shows up in the new custom layouts. I will name it CustomLayout0. Now after making the same two pages with the new layout I see this.

Figure 5
Figure 5 (graphics5.png)

Notice that the text does not flow to the second text box and the boxes do not change position for the right page. Looking at the middle of the book you can see that the text box for the right page will be too close to the gutter. The header and footer move but the other boxes do not. These "problems" can be fixed by editing the document where the custom layouts are stored.

XML Editor

To edit the custom layouts you can either use a simple text editor or an XML editor. I use XML Notepad 2007 from Microsoft. Pick an editor that works good for you. You should be familiar with XML or other markup languages like HTML.

Custom Layouts in BookSmart

When you make a custom layout in BookSmart the layout information gets added to a file with the name CustomLayouts.layout. This can be found in the library location directory in the subdirectory BookSmartData\CustomLayouts. You may have to search around for this file on your computer.

Opening this file in XML Notepad shows the following.

Figure 6
Figure 6 (graphics6.png)

The different TrimSize items are the different book sizes. Since I made a book of the type Small Square above I will look for the layout that I made. It has the TrimSize:Square.

Figure 7
Figure 7 (graphics7.png)

Notice that there are some pageLayouts in this TrimSize. Opening up the pageLayouts shows the layout I made above.

Figure 8
Figure 8 (graphics8.png)

Let's look at the items in this layout. Notice the title is CustomLayout0. This is the name I gave the layout when I created it. The dimensions of the page (and other dimensions) are given in the units of points. So when you edit in the layout editor, the units of points should be used. Since the page is square, notice that the width and height of the page are the same, 495 points. BookSmart measures from the upper left corner so that the point (x,y)=(0,0) is the upper left corner of the page. Also, the true on the hasHeader and hasFooter mean this page will have a header and a footer. The id is probably generated randomly, but each pageLayout needs to have a unique id.

Now let's look at the containers.

Figure 9
Figure 9 (graphics9.png)

Remember that the page layout had three containers, two text containers and one image container. Notice that the left most text container starts at the x position 45 points. The other two containers both line up at x=237 points.

Editing Custom Layouts

When you start BookSmart it loads the custom layouts for the CustomLayouts.layout file. So, if you edit the file at the same time BookSmart is open you can overwrite your edits. To make and edit custom layouts you should

  1. Open BookSmart and the book you want to edit
  2. Make a Left side page and select a built in layout
  3. Edit the layout and save the layout in your custom layouts
  4. Quit BookSmart
  5. Open XML Notepad and the file CustomLayouts.layout
  6. Edit the layouts and save the file
  7. Quit XML Notepad
  8. Open BookSmart and the book you want to edit
  9. If you edited your layout correctly the changes should be in the custom layouts

Correcting layout for Left/Right pages

The two "problems" I will describe how to correct are how to make a layout work for both the left and right pages and how to get the text boxes to flow the text from one to another.

In order for this to work correctly you must make a layout for the LEFT PAGE first. Make everything line up the way you want the left page to look like and save the layout.

Let's change the layout we made earlier so that it works for both the left and right pages. I made the layout using the left page.

If you examine the built in layouts in BookSmart for the layout we are using you will see that for a right page the left container has x=78 points. The left container for the left page has the same container at x=45 points. Subtracting these gives 78-45=33 points. This is the amount that the containers are translated for the right page relative to the left. This will be different for the different book sizes so you will need to figure out this number for each book size.

Each container in the custom layout has a property called xTranslate. This tells BookSmart how far to move containers for the right side page. This number can be negative if you wish. For this example we will just make them 33 points. In XML Notepad the edits look like this.

Figure 10
Figure 10 (graphics10.png)

I changed the xTranslate values to 33. If I save these changes, open the book in BookSmart and apply these changes to the pages, they will look like the following.

Figure 11
Figure 11 (graphics11.png)

In order to apply the changes to the pages I have to click on another layout and then on the layout we edited. If you just click on the same layout BookSmart thinks it doesn't have to apply the layout since it is already applied to the page.

See now that the containers for the right page have now moved over 33 points so that the center looks right.

Correcting Text Flow

Now let's fix the automatic text flowing from one container to the next.

There are two text containers in our layout and we will make the text flow from the left container to the right container. The text containers have two properties that we will need to change, flowsOrder and contentType. I must say at this point that I do not know exactly what the values are for these properties. However, I do know how to set them to get them to work for me. Here is what I do.

The flowsOrder property is a numbering of the containers to determine the order of the text flow. They are set to -1 now so we will number them starting from 0. The left box will be 0 and the right box will be 1.

Right now the contentType property for the text boxes is 0. I have noticed that the contentType property for the text boxes that flow can be 1. So, I change the value of the contentType to 1. I am not sure what this means but it seems to work.

Here is what the changes look like.

Figure 12
Figure 12 (graphics12.png)

After applying these changes to the pages the book looks like this.

Figure 13
Figure 13 (graphics13.png)

Mirror Pages

When making pages that are mirror images there are a few things to keep in mind. First, text still needs to flow from left to right so be careful not to make it exactly mirror image. Let's make a mirror image of a page with only one text box and one image. Suppose we want to make a version of this built in layout but with the image on the outside rather than the inside.

Figure 14
Figure 14 (graphics14.png)

Edit the layout for the LEFT page and swap the location of the boxes. Save the layout.

Figure 15
Figure 15 (graphics15.png)

Open the layout in XML Notepad. Here is the layout.

Figure 16
Figure 16 (graphics16.png)

When you edit the layout, look at the size of the header since we will want to line things up with the header/footer. The x location and size for the header is width=372, x=45 points. When it is moved by 33 points for the right page it will have x=78. The right side of the header will be at 78+372=450.

Lets figure out the xTranslate for the ImageContainer. The width is 244. After it is translated we want the right side to be at 450. Therefore we want the left side to be at 450-244=206. Right now it is at 45. So we need it to translate 206-45=161 points. Set the xTranslate to 161.

Lets figure out the xTranslate for the TextContainer. The left side is at x=301. After it is translated we want the left side to be at 78. So we need it to translate 78-301=-223 points. Set the xTranslate to -223.

Figure 17
Figure 17 (graphics17.png)

After applying the changes to the pages we have the layout we want.

Figure 18
Figure 18 (graphics18.png)

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks