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