• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
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
in how_to by (150 points)
    

2 Answers

0 votes
 
Best answer

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.

by (192k points)
0 votes

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? 

by (1.7k points)
edited by
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.