USING CSS IN WIX

Learn how to use Codepen Pens and other CSS elements in Wix.

 

Obvious warning:

Only use scripts you have permission to use. If you are using anything for commercial purposes make sure you are using it only if it has a license that allows it.

 

 

 

 

 

Basic HTML Structure:

Using custom CSS in Wix requires you to use iframes. Any code that goes inside an iframe is usually comprised of HTML, CSS, and Javascript. No Corvid there!

So let's get you comfortable with a very basic HTML structure first:

<!DOCTYPE html>

<html>

<head>

</head>

<style>

</style>

<body>

<script>

</script>

</body>

</html>

The very first tag is <!DOCTYPE html>, which is just a way of telling the browser we are using HTML5 - the latest version with all the bells and whistles.

After that is the <html></html> tag which actually contains all of our HTML. You might also see this referenced to as markup - HTML stands for HyperText Markup Language. Notice that the beginning of a section in HTML is marked by some tag in <> and is closed off with </>.

If a Pen uses any non-standard version of CSS or Javascript, like LESS and JQuery, you will have to import them first inside the <head></head> tag.

Next up is <style></style>. This is where our CSS will go.

The <body></body> is for our purposes just where the script and actual HTML elements from the HTML Codepen tab will be inserted.

Lastly, if you find a Pen with some Javascript, it will go inside the script tag with one minor adjustment:

<script type="text/javascript"></script>

Of course there are many fantastic online resources like MDN Webdocs and W3 Schools if you're interested in learning more about any of these, but this tutorial is for the dead simply copy paste method.

Placing the CSS:

In Codepen, the middle column of script usually contains the CSS. If you see that the text next to the little cog settings icon says CSS only, then all you have to do is copy and paste everything from that column to your style tag:

<style>

//-----PASTE HERE-----

</style>

If, on the other hand, the text next to the cog says something like CSS (LESS), then you have two options. The first option is to click on the Change View button, and select the .css option in the Direct Code Links section. Then you can copy and paste that.

However, if this is not an option or if it does not work as expected, you can import whichever version of CSS is inside the parentheses by going directly to the developers' website for the instructions. For example, for LESS you would do this:

<html>

<head>

<link rel="stylesheet/less" type="text/css" href="styles.less"/>

<script src="less.js" type="text/javascript"></script>

</head>

Then you can copy and paste what is inside the CSS column into your style tag.

Placing the JS:

Similarly to the CSS, if the right-hand column says only JS and nothing else, you can copy and paste inside the script tag. Not all Pens require Javascript, so you can leave out the script tag altogether if there's none.

<body>

<script type="text/javascript">

//-----PASTE HERE-----

</script>

Otherwise, in the case of JQuery, look for the .js file in the Change View tab. If you need to, you can import like this:

<html>

<head>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="   crossorigin="anonymous"></script>

</head>

In this case, you can leave the body's script tag as-is:

<script type="text/javascript"></script>

Placing the HTML:

Everything in the HTML section on the left, paste between the end of the script and the close of the body tag:

</script>

<!-----PASTE HERE----->

</body>

If the HTML tab contains HAML or Pug, you can find a converter online to make it into pure HTML, but it is possible it will not work depending on what that particular environment the Pen is intended for.

And that's it! Quick and easy. If the maker of the Pen embedded a link to support their work, consider donating for the hassle they saved you!