I know this has been asked before but I am still unclear as to where I would put CSS? I have inserted html using the html widget and placed the css in the head of the document. Is there some special call that I need to add in order for the css to work?
HTML widget renders an <iframe>. The CSS that you use in <head>, won’t work there I guess. You have to use seperate CSS in the <head> of the HTML widget.
With that being said, try not to use HTML widget and use Inner HTML wherever possible.
1 Like
As in put HTML code into a hype element’s innerHTML.
I am not understanding. When you say “inner html” what are you talking about? I have two sets of code that I am trying to use. One is html and the other is CSS. Where do I put each of those snippets?
Sorry I should have said put your html not iframe.
Add a rect to the scene. Select it the click cmd + alt + e keys
This should open up the innerHTML. ( docs for innerHTML )
1 Like
Thank you for explaining where to put the html. Now where would I put the CSS?
1 Like
same place, read the doc link
Not even sure where to look in that document. It is massively long. I was wondering if it was as easy as adding html and css to a webpage? If not it should be.
If you added a rectangle to your scene and pasted your HTML in it, you can put your CSS right next to it. But you would need to uncheck ‘Protect from External Styles’ (probably) depending on what you’re doing. (We don’t know what you’re doing)
Another way is to simply add it all to an HTML widget. Insert > HTML Widget. Then switch to the Element inspector and click ‘Edit Code Snippet’. This does not require that you uncheck the ‘protect from external styles’ option.
The reason why this isn’t as recommended is because it creates an additional .html page which loads separately (it’s actually a separate HTML page). But there are definitely cases when this is required, though we have no idea what you’re doing so we can’t really advise you.
2 Likes
I am trying to get this code to work in Hype. It’s a ripple effect. Any help would be greatly appreciated!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js"></script>
</head>
<body>
<div class="full-landing-image">
</div>
<script>
$(".full-landing-image").ripples({
resolution: 256,
perturbance: 0.02,
});
</script>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
}
.full-landing-image{
width: 100%;
height: 100vh;
background: url(http://emeraldforeststudios.com/wp-content/uploads/2020/03/Nature.png) no-repeat center;
background-size: cover;
}css placed in the head needs to be enclosed in style tags.
<style>
body{
margin: 0;
padding: 0;
}
.full-landing-image{
width: 100%;
height: 100vh;
background: url('http://emeraldforeststudios.com/wp-content/uploads/2020/03/Nature.png') no-repeat center;
background-size: cover;
}
</style>
Also the url needs to be quoted.
Probably a good idea to have a look through some tutorials
1 Like
Mark, thanks so much. Would the CSS be placed in the head of the html page where I would be inserting the Hype animation? Or is there a place in Hype where I would put the css?
When Hype exports the folder and html it will include anything in the head in the html's head.
If you are not going to use the exported html file then you will need to add the styles to what ever html page that the animation will be in.
You can creat ea .css file and add that to hype's resource library.
The file then will be included with any exports in the resource folder.
Here’s my 2 cents, @DaveMan. What’s worked best for me is to create an external CSS file and then add it to Hype, via the Resources panel. As mentioned already, Hype will include the CSS files when it exports. This also allows you to edit the CSS via a text editor and when you save the edits and go back to Hype, Hype recognizes and applies the changes.
I should note that I only do this when there’s a lot of CSS; otherwise the best method is probably to use inline CSS as others have suggested. I’ve attached a couple of images; hope this helps. - John
1 Like