Do you know the canvas-nest? and I want to install it for my theme-casper-two,however,it doesn’t work.
and I think the reason is the canvas is not right, but I don’t konw how to adjust the size of the canvas.
, please help me.
This is my code for the footer.html:
<footer class="site-footer clearfix">
<section class="copyright"><a href="">{{.Site.Title}}</a> {{.Site.Copyright | safeHTML}}</section>
{{if ne .Site.Params.hideHUGOSupport true}}
<section class="poweredby">Proudly generated by <a class="icon-hugo" href="http://gohugo.io">HUGO</a>, ith <a class="icon-theme" href="https://github.com/vjeantet/hugo-theme-casper">Casper</a> theme</section>
{{end}}
</footer>
</div>
<script type="text/javascript" zIndex="10" src="{{"js/canvas-nest.js" | relURL}}"></script>
<script type="text/javascript" src="{{"js/jquery.js" | relURL}}"></script>
<script type="text/javascript" src="{{"js/jquery.fitvids.js" | relURL}}"></script>
<script type="text/javascript" src="{{"js/index.js" | relURL}}"></script>
{{ if .Site.Params.customFooterPartial }}
{{ partial .Site.Params.customFooterPartial . }}
{{ end }}
Add a link to your site where we can see the issue. From the sound of it there are z-indexes set in your stylesheet (the themes style) and the canvas sticks between the top and content section.
Thank you, but I have settled the zIndex 9999999, it still doesn’t work.
Your canvas has the right size, the top header also has 100% height 
what happens is, that 100% means 100% of the available height visible, not 100% of the whole document height.
What you need to do is to set position: fixed on the canvas. This way it will stay on top and not move when you scroll.
You need to test if everything else keeps working because the canvas is on top of all sections. It could be that your forms will stop working… test it and if it breaks I can have a nother look. But position-fixed basically solves your issue.
Thank you, I’m sorry that I don’t know how to change the position to fixed, the config could only change the color and so on, and the js I can’t understand. But I change it in the localhost and I think you’re right, I could see canvas all the page, however I can’t control it well, I could just see it.
That script is not much configurable It doesn’t even have an ID.
Try the following in your CSS:
canvas {
position: fixed;
}
this will make ALL canvas tags fixed. If you don’t use another canvas on the same page it should do the trick.
take the z-index back if the above works.
I have changed the canvas in the screen.css, but it still doesn’t work. In the devTools, the position is still absloute, I’m sorry I am so stupid..
the script in the screen.css, I have change the canvas into fixed.
article, aside, details,
figcaption, figure,
footer, header, hgroup,
main, nav, section,
summary { display: block; }
audio, canvas, video { display: inline-block; position: fixed;}
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
It’s time to open an issue in the repo of the canvas script: https://github.com/hustcc/canvas-nest.js/issues
It seems your theme is not compatible with the script, maybe it’s author has an idea.
Thank you very much, I will try it.
