search

printdotio / pio.js

An embeddable widget that enables users to quickly and easily monetize a webpage by enabling photo-product sales of its images.
4 stars 0 forks source link

Custom CSS #111

Closed sebnun closed 8 years ago

sebnun commented 8 years ago

Hi, I followed the documentation of the javascript SDK, I'm not sure what I'm doing wrong but I can't customize the widget with css.

this is my code:

<html>
<head>

</head>
<body>

 <div id="container"></div>

<script src="https://az412349.vo.msecnd.net/pio/pio.latest.v2.js"></script>

<script>

var el = document.getElementById('container');

PIO.config({

recipeId:"(my live recipe Id)",
url:"https://widget.print.io/widget/",
embedInElement:el,

style: {
showHeader: true,
cssUrl:'/custom.css'
},

iframeStyles:{
        width:"100%"
}

});

PIO.open();

</script>

</body>
</html>

I tried with cssUrl:'custom.css' and cssUrl:'http://picsirl.rocks/custom.css' but it doesn't seems to load the css file.

My intention is to have the widget with width and height 100% of the page, not in a popup + custom css. Thanks.

micahasmith commented 8 years ago

do you have a url that supports https to try it on?

sebnun commented 8 years ago

no, only http

micahasmith commented 8 years ago

What sort of web server do you run on your localhost

sebnun commented 8 years ago

I'm testing the widget on hostgator on http://picsirl.rocks , they use apache the custom css is in http://picsirl.rocks/custom.css

I'm fairly new to javascript, does the widget have to be on an https site to work?

micahasmith commented 8 years ago

you want it on https, especially b/c users enter credit card info in the widget, and that just looks shady w/o https.

but the css issue is all https.

image