Skip to main content
All CollectionsCreator Network
Custom CSS for Creator Profile
Custom CSS for Creator Profile

Create advanced styling and designs to your Creator Profile with CSS.

Updated over a week ago

How to advance your Creator Profile's styling and design

Below are the common classes you may encounter for their respective elements, in the event you want to make changes while editing your Creator Profile.

Here's a list of CSS classes that you can target to make customization easy (all classes are the same across all templates) for different pages of your site:

Site-wide

Site-wide CSS classes will cause updates across all of the pages you have on your Creator Profile.

List of CSS classes

Page

This will apply to all pages you have of your Creator Profile.

.page { css goes here }

Page-[type]

This will apply to specific pages you have in your Creator Profile. In order, it'll update the newsletter posts page, links page, Recommendations page, and the products page.

.page-posts { css goes here }
.page-links { css goes here }
.page-recommendations { css goes here }
.page-products { css goes here }

Header

This targets the section that includes the creator name, creator byline, creator bio, and the email capture form.

.header { css goes here }

Creator name

This targets the first text header.

.creator-name { css goes here }

Creator byline

This targets the second text header.

.creator-byline { css goes here }

Creator bio

This targets the text paragraph in the header.

.creator-bio { css goes here }

Creator avatar

This targets the image icon in the header.

.creator-avatar { css goes here }

Subscribe form

This targets the email form on the main Creator Profile page and the email pop-up forms on individual posts pages.

.subscribe-form { css goes here }

Subscribe button

This targets the button of the email form on the main Creator Profile page and the button of the email pop-up forms on individual posts pages.

.subscribe-button { css goes here }

Navigation

This targets the navigation menu.

.navigation { css goes here }

Footer

This targets the footer.

.form { css goes here }

Share button

This targets the X, Facebook, and email contact buttons on the bottom left of each page.

.share-button { css goes here }

Social shares

This targets the section that includes X, Facebook, and email contact buttons on the bottom left of each page.

.share-buttons { css goes here }

Posts page

Customize the way your posts show up on your Creator Profile.

List of CSS classes

Featured post

This targets the featured post on the Creator Profile.

.post-featured { css goes here }

Featured post badge

This targets the badge that says "featured post".

.post-featured-badge { css goes here }

Locked post badge

This targets the locked post badge.

.post-locked-badge { css goes here }

Posts section

This targets the whole section where all the posts are displayed.

.posts { css goes here }

Posts

This targets the individual posts that are displayed.

.post { css goes here }

Title post

This targets the title of each posts that is displayed.

.post-title { css goes here }

Preview text

This targets the preview description of each post that is displayed.

.post-intro { css goes here }

Post thumbnail

This targets the thumbnail images of each post that is displayed.

.post-thumbnail { css goes here }

Post details

This targets the section of the posts' details that include the "Read now" button, when it was posted, and time it takes to read it.

.post-meta { css goes here }

Single post page

You can also make specific CSS changes to the individual newsletter posts that are published to the Creator Profile. This is the view when creators are reading the post on web.

List of CSS classes

Post container

This targets the container for the entire post, including the content of the post, email capture, and the additional posts.

.post-container { css goes here }

Post title

This targets the title of the post.

.post-title { css goes here }

Post meta

This targets the posts' details that include the when it was posted, and time it takes to read it. This includes the additional posts' details at the end of the page.

.post-meta { css goes here }

Post intro

At the end of the individual post, there's a section of additional posts. This targets the preview description of each post that is displayed.

.post-intro { css goes here }

Read more section

This targets the section of additional posts at the end.

.post-preview { css goes here }

Email form

This targets the form at the end of the individual post.

.post-subcribe-form { css goes here }

Sidebar

This targets the section the sidebar next to the individual post.

.sidebar { css goes here }

Back button

This targets the back-arrow button on the individual post.

.back-button { css goes here }

Email pop-up

On the side bar, there's a subscribe button. This targets the email form that pop-ups after you hit the subscribe button.

.dialog { css goes here }

Email pop-up close button

This targets the "X" close button on the email pop-up

.close-button { css goes here }

Recommendations

Make changes to the Recommendations page of your Creator Profile. You can better highlight the different creators you're recommending!

List of CSS classes

Recommendations section

This targets the section where all the Recommendations are displayed.

.recommendations { css goes here }

Recommendations header

This targets the header of the Recommendations section.

.recommendations-heading { css goes here }

Recommendations description

This targets the description of the Recommendations section.

.recommendations-description { css goes here }

Recommendations form

This targets everything in the Recommendations section except the text header and description.

.recommendations-form { css goes here }

Recommendations submit

This targets specifically the email field and button at the in the Recommendations section.

.recommendations-submit { css goes here }

Recommendations creator

This targets each creator recommendation slot that is displayed.

.recommendation-creator { css goes here }

Recommendations sponsored badge

This targets the sponsored badge next to any Paid Recommendations you have.

.recommendation-sponsored { css goes here }

Recommendation names

This targets the business or personal brand name of each Recommendation.

.recommendation-name { css goes here }

Checkbox

This targets the checkboxes next to each Recommendation.

.recommendations-checkbox { css goes here }

Products

Update your digital storefront on your Creator Profile with more changes that matches your branding.

List of CSS classes

Product section

This targets the products section where all the products are displayed.

.product { css goes here }

Product

This targets the individual product layouts.

.product { css goes here }

Product name

This targets the name of the product displayed.

.product-name { css goes here }

Product description

This targets the description of the product displayed.

.product-description { css goes here }

Content details

This targets the content details of your product, which typically includes the cost, name of product, description, and button.

.product { css goes here }

Links

Many creators use this page as their link-in-bio on their social media profiles. Make any appropriate updates that might increase clickthroughs to your other content.

List of CSS classes

Links section

This targets the links section where all the products are displayed.

.links { css goes here }

Links

This targets the individual links that are displayed.

.link { css goes here }

Link icon

This targets the image icon next to each individual links that are displayed.

.link-image { css goes here }

Link text

This targets the text displayed for each individual links that are displayed.

.product-description { css goes here }

Link URL

This targets the link URL if it has been enabled.

.link-url { css goes here }

Link description

This targets the link description if it has been enabled and added.

.link-url { css goes here }

Link arrow

This targets the arrow next to all the links.

.link-arrow { css goes here }

Custom page

Custom pages are additional pages that you can build from scratch!

List of CSS classes

Custom page

This targets the whole section of the custom page

.custom-page { css goes here }

Did this answer your question?