Customize Codepen's Profile

Codepen gives you the possibility to stylize your profile. You can do that by navigating at "edit profile -> customize -> customize profile", and from there you apply a stylesheet.

Let's start!

Take a look at the final result here.

Make a simple plan about what you want to customize. For example, you may want to change the font-size or the header's color. For me, It was mostly about colors and borders.

In the profile page, codepen.io/yourNameHere/ open the "programmers tools" (If you are using windows that's ctrl+shift+i), find the classes you need to target. A good rule is to start with the most general, that would probably be "HTML" or "body".

I wanted to change the background color of the top part of the body:

body {
    background: linear-gradient(to bottom, pink 0%, #b79094 100%);//purple
    background-repeat: no-repeat;
}

My CSS code consists of a gradient color, from pink to purple, that applies only to the upper body, background-repeat: no-repeat.

I also decided to add some transparency to the main-header:

header.main-header{

     background: rgba(25, 25, 25, .6); 

}

Tip: use rgba to change color's opacity. Opacity can be from 0 to 1.

If you want some amazing crazy sh!t in your header you got to go PRO, but if you want something simpler, like a background color, then do:

.profile-header-content{

        background-color: #111723; //almost black 

}

As I was trying to make my avatar bigger and with a circular border, I hit a wall:

• The profile-username-area wasn't visible anymore
•My image was shown in half due to the header-area

My solution:

.profile-username-area{

       margin-bottom: 50px;

}

img#profile-image.profile-avatar{

       border: 3px solid #b79094; //purple

       z-index: 5;

       width: 150px;

       height: auto;

       border-radius: 100px !important;

       &:hover{

            border: 5px solid rgb(251,166,118); //orange

       }

}

Tip: Like I did with the hover effect, to have fewer lines and not repeat yourself use SCSS instead of CSS.

I made a quick change to the pens which are a big part of every profile-page. I added and style the border, and in the same class I also added a hover effect.

div.single-pen.no-user-line{

     border: 3px solid $purple;

     &:hover {

            border: 5px solid $orange;

     }

}

The last thing I am going to share is the style for the header navbar.

/* profile-nav-1 includes: Pens Projects Posts Collections */

.profile-nav-1 {

    a{color: black !important;}

    a:hover{color: white !important;}

    a.active{

       color: orange !important; 

       background:rgba(25, 25, 25, .5);

       padding: 10px !important;

    }

}

Note: If you changed the stylesheet but there is no difference in your page consider to do a hard-refresh (for windows that's: ctrl+f5), in case that doesn't work use !important in your CSS code. If that doesn't work either then I am afraid you are doing something wrong!

I also made a video so you can watch the whole process