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
That's it guys, I hope you liked it.
Find me on twitter or youtube, thanks.
Leave a comment