Successful adding CSS from Codepen?

Tips & Tricks
,
1

Is anyone successful adding Codepen templates to your universe site?

The Code option says you can add HTML, CSS, or Java but nothing from Codepen seems to work with universe websites.

IMG_2163
IMG_21631170×746 59.4 KB

2 Likes
2

Hi user, we care each other here, no worries. And sorry for the delay too, we’ve seen your post just few minutes ago. Your concern has been found as a error with your custom code block on univer.se is that right?

If so, I have the answer for you.

  1. You code may not be working for some reasons:
    A. Yhe code provided by CodePen may not be completed, as we know some users don’t let you get all codes so they apply strategies to their codes.
    B. Your code (HTML, CSS, JAVASCRIPT) must have a HTML body with a beginning and end, otherwise your code won’t work.
    C. If your code continues not working, then you should check the code in a new browser window with your CodeChecker. Try W3Schools for testing.

If nothing provided above helps you, then feel free to reach the Univer.se support: click here to reach the Univer.se Help center and start a chat with them.

4 Likes
3

So bear with me- novice coder!

Does CodePen work specifically in an i-frame? Because the Block only supports that type of coding.

This is so cool! I looked over the homepage for it, but what exactly is Codepen?

Did you create your own code? What's it supposed to do?!

1 Like
4

Hi @angie, Codepen can be used as i-Frame, of course, but it can also be used in a separate format by just taking every single structure of the pen. Let me give you some examples what i-Frame is and its use, What Codepen is and how I use it.

An iFrame (short for inline frame) is an HTML element that allows you to embed another HTML document within the current webpage. It's like a window embedded in a web page through which you can display content from another source. iFrames are commonly used to display advertisements, videos, maps, or any other content from external websites right? Ok so here's a basic example of how an iFrame works in HTML:

<iframe src="https://www.codepen.io/yourusername/penid"></iframe>

In this example, the content of https://www.codepen.io/yourusername/penid which will be displayed within the iFrame on the webpage. Place where the Pen code is placed.

Also,

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoID" frameborder="0" allowfullscreen></iframe>

A YouTube videoID would be replaced with the unique identifier of the YouTube video you want to embed. Kinda same as a code embedded.

The difference that when iFrames are useful for integrating external content, they should be used responsibly, as they can potentially be a security risk if not handled properly. And that’s why I recommend taking every single piece of that pen, and use it in your html body. Of course it might not work for some of them but you can always fix it anyway, nothing is impossible. Is it?

Ok, in my experience (a little) by the way. I use code pens to set them in a separate way and paste it to my html page. And it’s easier for me so I can change style to the way I want.
Let me show you this: Click Here. Once you click it, you’ll see what it is. I used that coding from THIS PEN by @someydotme. I did not use i-Frame instead I worked on building it on a own html body.

So yea, if you guys need to know more about what Codepen is and who they are, feel free to click here: About Codepen Page.

4 Likes