31 Monitor the use of your Pressbook – Add Buttons
The last chapter dealt with creating survey forms to link to the Pressbook. This chapter deals with creating feedback buttons for Pressbooks. The survey is then linked to the button. This material was provided by Alice Leutchford from James Cook University.
Aim: To add the “Using this book? Tell us how” button on a pressbook landing page.
Background.
Before you do any of the steps below, you will need to have some forms set up to link to. This can be done in any form building software, as long as you can get a publicly available URL to enter into the html coding area highlighted in green below.
Part 1: Adding CSS into custom styles.
1. Navigate to the admin view of a Pressbook.
2. Find the menu on the left-hand side and click: Appearance – Custom Styles.
3. You will see two boxes:
- 1. The top one has the theme CSS for the style of book you have chosen. It will be called “Theme Web Styles”. This box cannot be edited.
- 2. The second box is called “Your web styles”. This is where you add in all the custom CSS. By default it will be blank.
4. Copy this CSS as per highlighted in yellow and paste it into ‘your web styles’.
a.link-button {
display: inline-block;
color: #ffffff;
font-family: Karla;
font-weight: 700;
text-transform: uppercase;
text-decoration: none !important;
text-align: center;
font-size: 1rem;
padding: 1rem 0;
margin: 20px 30px 20px 0;
width: 14rem;
border-radius: 50px;
border: none;
transition: all 0.5s;
cursor: pointer;
background-color: #0066CC;
}
a.link-button:hover {
background-color: #E3A800;
}
5. Press save. Now your custom CSS is applied.
You wont see any changes yet! We need to use HTML with tags that link to the CSS.
Part 2: Adding HTML into book info
Now we will add the links to the feedback forms into the short description field in the book’s “book info” area with tags that make the links look like buttons. Examples showing how to create a ‘For Educators’ and ‘Feedback’ hyperlink follow.
<br/><br/>
<a class=”link-button” href=”insert your form URL in here between the inverted commas” target=”_blank”>For Educators</a>
<a class=”link-button” href=”insert your form URL in here between the inverted commas” target=”_blank”>Feedback</a>
For UniSQ’s Pressbooks, please use the following set up and link:
<a class=”link-button” href=”https://forms.office.com/r/AAbHaKiAZZ” target=”_blank”>Using this book? <br />Tell us how</a>
