This article will help you implement vertical stripes on the Cover page for the booklet output. This is useful when you are designing a front cover for your booklet output.
This is possible by creating and modifying a custom template. You can find out how to create a custom template here:
https://innovasys.zendesk.com/hc/en-gb/articles/360000765543-Creating-A-Custom-Template
In this case, the relevant base template is the Booklet "Classic" (Topics) Template. Once the template is created, the template editor will be opened. You then need to follow these instructions to add the stripes on your cover page:
- In the template editor, navigate to Page Types and create a new page type - we recommend naming this page type "CoverPage.html". You then need to select "Clone an existing Page Type" and clone "Standard.html".
- Select "CoverPage.html" and then click the Edit button on the toolbar.
- Replace the <Body> section of the new page type with this HTML:
<body OnLoad="OnLoad()"> <div class="verticalStrip1"> </div> <div class="verticalStrip2"> </div> <div class="verticalStrip3"> </div> <div id="i-cover-page-heading-content" id="i-cover-page-heading-content" style="padding-left:80px"> <!--DXMETADATA start type="BookletHeading" --><!--DXMETADATA end--> </div> <div class="i-body-content" style="padding-left:80px" id="i-body-content"> <!--DXMETADATA start type="TopicSection" name="BodyText"-->Body<!--DXMETADATA end--> </div> </body>
- You then need to add a style rule to insert the stripes into the page. You need to either add the style rules to your custom stylesheet in your project (this is useful if you wish to include this in different projects with different colors) or add the style rules into a custom stylesheet in your custom template (this is useful if you have multiple projects in which you wish to use the same branding). For further information on adding a new stylesheet, please see this topic: https://innovasys.zendesk.com/hc/en-gb/articles/360000905866-How-To-Add-A-New-Stylesheet-To-Your-Project
- Once you have decided where to save your style rules, you need to open up the custom stylesheet and insert the following:
.verticalStrip1 { position:fixed; top:0; left:0; width:20px; opacity: .4; background-color:blue; height:100%; } .verticalStrip2 { position:fixed; top:0; left:20px; width:20px; background-color:red; height:100%; } .verticalStrip3 { position:fixed; top:0; left:40px; width:20px; background-color:black; height:100%; }
- Save your changes - for the template, you need to close the template editor, which will prompt you to Save your changes - press Yes. You also need to close your stylesheet that you have used for step 6 - you will be prompted you to save your changes again - select Yes.
- Select the custom template to be used in your Booklet Profile - you can do this from the Booklet Profile Editor, by right clicking a build profile and selecting Edit. Switch to the Templates, page and then navigate to the "Booklet Topics" template drop down and select your new custom template. If you have multiple booklet build profiles - you will need to make sure this new custom template is being used in each profile you wish to have these vertical stripes on your cover page.
- Finally, you need to set the Page Type to "Coverpage.html" for your cover page topic. To do this, select your Cover Page in the Project Explorer and navigate to the properties window (in the bottom left hand corner). From there, expand the dropdown for "Page Type" and select "Coverpage.html".
This will show three lines to the left of your content - one being blue with an opacity value, the second being red and the third being black. You can add more lines or remove lines if necessary by adding another <div> in section 1 and adding another style selector in section 2, and adjusting the padding of the rest of the content. You can also change the color and size by changing the CSS in section 2.
HelpStudio provides the ability to leverage standard CSS to define custom styles through the Stylesheet Editor and Style Picker. Using CSS effectively does require some knowledge and experience of how to apply it to different HTML elements; providing detailed support on how to create specific CSS style rules is outside the scope of support available for HelpStudio. We recommend w3schools.com as a good place to start learning about CSS and Google is a good resource for figuring out how to create specific CSS style rules for a particular purpose.
Once this is complete, your output should look like this:
0 Comments