Norway


Let’s say you want to hide the scaling buttons on an . You can totally do that, because you have full control over your embedded Pens if you’re a PRO member.

1) Make a new theme in the Embed Theme Builder

Go there.

- 1x1 - How to Customize a CodePen Embed with Your Own Custom CSS

Make a theme:

- 1x1 - How to Customize a CodePen Embed with Your Own Custom CSS

2) Create the CSS you want to apply to the theme.

Think of it as overriding anything you want to override. I want to hide the scaling buttons, so I’ve found the class name here I want to use.

- 1x1 - How to Customize a CodePen Embed with Your Own Custom CSS

So the CSS I want to write is:

.scaling-choices {
  display: none;
}

3) Get a URL to the custom CSS

I could put that custom CSS anywhere. I could upload it to a server somewhere. I could use ’s hosted assets (that way I could edit it as an asset). Perhaps the easiest way is to do it as a Pen, it, then grab the Direct Code Link. Like hosted assets, I can edit the Pen anytime easily doing it this way.

- 1x1 - How to Customize a CodePen Embed with Your Own Custom CSS

4) Add that URL to the Embed Theme

Then, when editing your theme in the Embed Theme Builder, drop that URL into the Custom CSS area:

- 1x1 - How to Customize a CodePen Embed with Your Own Custom CSS

That’s it! Now the theme will apply that Custom CSS, and in my case, hide those scaling buttons.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here