can i not use transparency for the frame?

Question

Hi,

I have several questions... :)

I would love to create a frame below my file that is transparant but does show the 'download a pdf button'. But when i set the frame to 'no colour', the little cloud icon is no longer visible. For example, when i set the frame to white it does show the icon in black. Currently i have it with the frame in white (https://lucyenclaire.nl/wp-content/uploads/in5-archives/archief/index.html), but i would prefer transparant. Can I solve that?

Also, top left we have an overview of the steps. Is there a way to make that sticky to the top left? Feels bit more 'professional' and up-to-date than how it currently moves down along with the page. How can i create that?

Finally, the pdf downloaded with the button has many faults and not working as it should at all. Is there a way to solve that?

Thanks so much for your help!

Cheers, Anouk

Answer 1

Transparency on the viewer display frame was always supported but the text and icons default to white. As of v3.6.5 they will appear as black when the frame color is set to None.

Answer 2

To make the viewer display transparent, go to in5 > Export HTML5 with in5 and in the Viewer Display section, set Frame Color to None. It sounds like you might have gotten that far but then the icon didn't show up because the icon was white and was being displayed on a white background. To change the icon to black, add the following CSS in the Resources section:

#viewer-options-bar{
 fill:#000;
}

If you want the icon to be the purple color of your text, you could replace the fill with the hex number of the purple (#474077).

Pinning an object is a frequently requested feature. It's not currently available, but it might be available in a future release.

And can you describe the issue that you're having with the pdf download? 

Comments

This will be the default setting (dark text and icons) when Frame Color is set to None when v3.6.5 is released soon.

---

Hi Myra, thanks for your quick reply! I will try to add the CSS :). And hope the pinning will be available soon, fingers crossed! The issue with the pdf is the buttons with the pop-up. They work great in html5, but not in the pdf.

---

And thanks @Justin, good to know! :) While I am writing this, I thought of something else as well.... will there also be a way to adjust the look & feel and size of the banner with the social media icons that can be added?

---

Hi Myra, is there an explanation somewhere on how to add CSS to the resources section? Because when I add it to resources > CSS > + > paste your code in > then it said "invalid URL"

---

Can you explain a little more about the pdf issue? When you exported with in5, in the Viewer Display section, did you have the PDF download field left blank for in5 to export a PDF of the current document? And if so, the problematic buttons are on which page of the PDF?

---

Here's more info on how to add CSS to the Resources section:
https://ajarproductions.com/in5course/?lesson=resources
You use a text editor, paste the CSS into a new file, and save it as a text file with the .css extension. Then in the Resources section, under CSS, click the + and browse for that .css file.

---

You can customize the colors of the social media widget with CSS that you can add in the Resources section, too. For instance, if you wanted to make the icons all the same purple color and make the background the gray that is 2 blocks from the purple one in your document, you could add the following CSS:

#share-wrap {
    background-color: rgba(203,203,215,.65);
}
#share-wrap > a#sb-fb { background-color:#474077}
#share-wrap > a#sb-tw { background-color:#474077}
#share-wrap > a#sb-li { background-color:#474077}

The size change is doable, but it's a little trickier because it affects the placement of the icons. What sort of size change did you want?

---

@Anouk for right now changing the look of the social media icons has to be done with CSS, but we're always open to feature suggestions.

---

Hi Myra, a late reply to all your great help, but I was away on the holidays. Anyways, back into work-mode now :). As for the pdf. If you take a look at this file: https://lucyenclaire.nl/wp-content/uploads/in5-archives/archief-1/index.html   ... you will see in the 2nd step two i-buttons: when you click on it, it shows a pop-up with more info. Click again and it's gone. If you download a pdf with the cloud button, the same buttons are not showing properly and not functioning. So I tried adding a pdf file when exporting with in5 (viewer display), hoping it would download that specific file... but we still have the same problem with the buttons.

---

Hi Anouk, I hope the holidays were enjoyable. I checked out the link you sent. It seems to be working as I would expect in Chrome. Which browser are you using? And can you describe how they aren't showing properly after downloading a pdf?

---

Hi Myra, the holidays were great thanks!
And yes, the problem is not the html file but the pdf created from the html file. So when using the 'download a pdf' icon (the little cloud), the i-buttons in the pdf are not working and it always shows the close sign (x). So I created a pdf myself, and linked that file when exporting... but it does not show the pdf I created when I test it and we are still facing the same issues.

---

I downloaded the pdf from the link and tested it with Adobe Acrobat Pro DC. When I click on any of the i-buttons, a pop-up with content shows in addition to the X to close it, but the i-button that was behind it disappears. Is this pdf the one you created or one that was generated?

---

Aha, yes so you are seeing the one I created. The i-button disappearing is on purpose, because somehow in a pdf the i-button always remains on top of the information-textbox... very strange, as it works properly in the html, but not in a pdf. So I created a seperate file for the pdf, hiding the i-button when the info-box pops-up. Anyways, I think you see the right one and I am not because I was watching the pdf file in safari because after clicking the download-pdf icon, it automatically opens the pdf file online (i.s.o. in Adobe Acrobat) and online it is not showing properly... the problem then is that readers will not know the pdf is not working properly online... is there a way to change the setting so the icon only downloads the pdf in stead of immediately showing it in the browser?

---

Unfortunately, you can't control which application a user has set to open pdfs. They might not even be using Acrobat Reader or Acrobat DC. Here's an article Justin wrote on a bunch of issues with interactive pdfs: https://ajarproductions.com/blog/2018/03/26/interactive-pdf-is-dead-heres-what-you-can-create-from-indesign-thats-even-better/. Because your interactivity is better using HTML5 from in5, how do you envision your audience using the pdf? It looked like it was the same content.

---

I was a request from the client to also offer a download, but I think we will just advice against it. Because it was just not work well in most cases. Thanks for all your support! Cheers, Anouk