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

1) Make a new theme in the Embed Theme Builder

Make sure you’re logged in and go to the Embed Theme Builder (there is a link in the main user menu).

Make a theme:

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.

So the CSS I want to write is:

.scaling-choices {
  display: none;
}Code language: CSS (css)

3) Get a URL to the custom CSS

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

This works by adding .css to the end of the URL. So if the Pen is:

https://codepen.io/chriscoyier/pen/kYxMPECode language: JavaScript (javascript)

Then the “raw CSS” is at:

https://codepen.io/chriscoyier/pen/kYxMPE.cssCode language: JavaScript (javascript)

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:

---

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