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, 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:


     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:


        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:


       margin-bottom: 50px;



       border: 3px solid #b79094; //purple

       z-index: 5;

       width: 150px;

       height: auto;

       border-radius: 100px !important;


            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.{

     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;}{

       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 laugh

That's it guys, I hope you liked it.


Find me on twitter or youtube, thanks.


Leave a comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.