Common CSS Snippets
For creators with more unique needs for their Gumroad product pages and profiles, we've compiled here a few of the most common CSS snippets. This is not an exhaustive list by any means, and we encourage you to explore the possibilities of Custom CSS.
How to enable CSS snippets
In order to edit CSS on your products and profile pages, you need to Upgrade your account in the Settings menu.
On your profile pages, audience page, and product pages, you will see a STYLE button in the navigation bar. This is an example from the profile page.
Click Style and you will see a dropdown menu, with a box for Custom CSS snippets.
Drop these snippets into your Custom CSS box, separated by line breaks, then click Update account details to save all changes. Changes will go live immediately.
In these examples, XXXX represents a color or size that you would enter. If representatives from Crayola inform us that XXXX is indeed a color, we will gladly change this article. If you are entering a Hex value for your color, remember to add a #in front of it.
Product Pages
Your product page is the individual page of an individual product. There are quite a few things to customize on this page.
Profile Pages
Profile pages are where all of your products are listed in one place. Learn more about them here!
| |
<!-- CHANGE THE COLOR OR VISIBILITY OF YOUR PROFILE PAGE'S BANNER (THE BOX AROUND YOUR BIO) --> |
| |
.seller-main { background-color: red; |
| |
} |
| |
|
| |
<!-- REMOVE THE FOLLOW BUTTON AND PROMPT FROM YOUR PROFILE --> |
| |
.creator-profile-card .creator-profile-card__form, .creator-profile-card--medium .creator-profile-card__form, .creator-profile-card--small.creator-profile-card__form { |
| |
display: none!important; |
| |
} |
| |
|
| |
<!-- FIX THE LOCATION OF YOUR PROFILE'S BACKGROUND IMAGE --> |
| |
#user_page { background-attachment: fixed; } |
| |
|
| |
<!-- CHANGE THE FONT COLOR OF YOUR PROFILE'S BIO --> |
| |
.seller-main .bio { color: red; font-color: red; } |
| |
|
| |
<!-- CHANGE THE SIZE OF YOUR PROFILE PAGE'S PROFILE PHOTO --> |
| |
.seller-main .profile-picture-holderimg { width: 500px; height: 500px; } |
| |
|
| |
<!-- REMOVE THE TEXT OVER YOUR PROFILE'S PRODUCT IMAGES --> |
| |
#user_page#products .gridster .product-row.product .product-main .preview-container .product-name-container .product-name { text-indent: 100%; white-space: nowrap; overflow: hidden; } |
| |
|
| |
<!-- CHANGE THE FONT COLOR OVER YOUR PROFILE'S PRODUCT IMAGES --> |
| |
#user_page#products .gridster.product-row.product .product-main .preview-container .product-name-container .product-name { color: red; } |
| |
|
| |
<!-- ALWAYS SHOW PRODUCT TITLES ON YOUR PROFILE'S PRODUCT IMAGES --> |
| |
#user_page .creator-profile .gridster .product-row.product .product-main .preview-container .product-name-container { opacity: 1; } |
Audience Landing Pages
Learn more about the audience feature here!
| |
<!-- CHANGE THE COLOR, SIZE, OR FONT OF YOUR NAME --> |
| |
#user_page .user-follow-contenth1 { color: red; font-size: 500px; font-family: Arial; } |
| |
|
| |
<!-- CHANGE THE COLOR, SIZE, OR FONT OF YOUR BIO/DESCRIPTION --> |
| |
#user_page .user-follow-contentp { color: red; font-size: 500px; font-family: Arial; } |
| |
|
| |
<!-- CHANGE THE SIZE OF YOUR PROFILE PICTURE --> |
| |
.user-follow-content .profile-picture { width: 500px; height: 500px; } |