Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
Embedded Pens take a big leap forward today. Now you have 100% control over the look of the embeds with the new Embed Builder. From the Embed Builder, you can change all of the colors used, decide on a border, control the animation stopping, and change the default tab. And that’s not all!
You can bring up the Embed Builder from any Pen.
It will bring up a popup like this:
There are a lot of options here, but each one gives you control over how the Embedded Pen will look on your site. My favorite: drag the bar along the bottom of the Embed preview to adjust the height to get it just right for showing off.
Theming Makes It Easy
All those color settings and choices you make can be saved as a theme.
The beauty of a theme is that they can be updated right from the Embed Builder, all your Embedded Pens that use that theme will instantly be updated. That means you can design your Embedded Pens to perfectly match your site, and not worry that if you redesign your site later they will clash. You can just update the theme they use and they will match again!
All users get a “Default” theme, which you can alter however you wish. PRO users can create and manage unlimited themes.
The Dedicated Embed Builder
Going to the Editor View of the Pen you want to embed is no longer the only way to get the embed code. There is now a dedicated area just for Embeds. You can get there from the main menu:
This brings you to the dedicated Embed Builder:
This area allows you to choose from Pens you own on the left. Clicking them updates the active Pen inside the Embed Builder. This can be pretty handy when, for example, writing a blog post where you know you’ll need to embed several Pens. Easier to do it all without having to bounce around different pages of the site.
PRO users get some extra awesome features in the Embed Builder.
Create and manage unlimited themes. Very useful if you have multiple sites with different looks.
Hide the Tab Bar
Want to show just the result (or just some code)? PRO users can hide the tab bar, which also hides the CodePen branding.
Link to your own
.css file, giving you absolute and total control over every aspect of the Embedded Pen. Want a gradient background for the Tab Bar? You go ahead and do it!
Theme Your Pen Directly With CodePen
If you’re a PRO user, you have the ability to link to a custom .css file to customized your Embedded Pens. You can create that
.css file directly on CodePen! Essentially you use the Pens as Resources feature, where you can pull the CSS directly from any Pen.
To make it easier, I’ve set up a Pen you can Fork, customize, then use in your theme.
- Fork this Pen
- Customize with CSS however you wish. Feel free to user any preprocessor you like.
- Add .css to the end of the URL, like: http://codepen.io/chriscoyier/pen/toHcm.css
- Put that URL into the Custom CSS input in the Embed Builder.
- Your theme will now use that look!
Prefer to watch? Let me show you how it all works:
Make sure to let us know if you build a really cool theme and how you use it.