A directory template for Notion and Super
Perfect for directories of all kinds from products, templates, resources and more. Hunt is a directory template for Super inspired by Product Hunt.
Super Template Tests and Learnings to Review
Adding a button
Adding a button is easy, simply write some text, make it bold and add a Link. Please note: buttons only work with a single text block on a line of it’s own. Refer to the main home page for reference on how the button is used.
Important note about pricing property
In order for the pricing property to show up correctly (in the top right corner of the card) it MUST be the last property in the list. If you remove the price property the information will not display correctly.
If you do not want to include the price tag in the way, you can paste the following snippet into your site settings > code > css tab.
.notion-collection-card__property:last-child, .notion-collection-list__item-property:last-child {
background: none!important;
border-radius: 0px!important;
color: var(--color-text-default)!important;
font-size: 16px!important;
font-weight: 300!important;
opacity: 1!important;
position: static!important;
}
Adding your own Submit form
To add a form where users can submit to your database (like on this page) you will need to use a third-party form system, I recommend Tally forms. Tally is a great tool and allows you to embed forms on a Notion page and connect any submissions with a database.
Template options
Hunt comes with several built in theme options. Simply paste the snippet below into your site settings > code > css tab. Then customize the CSS values by changing out the HEX color code or pixel sizes.
Main styles and colors
:root {
--primary-color: #202B3F;
--color-text-default: #202B3F!important;
--color-bg-default:#FBFCFF!important;
--button-bg-color: #202B3F!important;
--button-text-color: #ffffff!important;
--mobile-menu-background-color: #FFFFFF!important;
--list-item-border: #E1E9FF;
--list-item-hover: #F1F5FF;
--page-width: 1280px;
--button-rounding: 50px!important;
}
Text alignment
By default, the text alignment on the homepage is set to ‘center’. You can disable this with the following snippet:
#page-index .notion-text, h1.notion-heading:first-of-type {
text-align: left!important;
margin: 0!important;
}
Page header alignment
By default, the page header title and icon is aligned center on all pages. You can reset it back to the left hand side using the following snippet:
.notion-header__title-wrapper {
text-align: left!important;
}
.notion-header__icon-wrapper.has-icon, .notion-header__icon-wrapper.has-icon-image {
margin-left: 0!important;
margin-right: 0!important;
left: 0!important;
right: unset!important;
text-align: left!important;
}
Cover image color blending
By default, all cover images blend with a white background color, if you change the theme background color this may need to be changed or you may want to remove it.
To disable the cover image blending gradient, include this snippet:
.notion-header__cover:after {
background-image: none!important;
}
To change the cover image blending color, change the RGB values in this snippet to match your new background color:
.notion-header__cover:after {
background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(251, 252, 255, 1) 98%)!important;
}
Cover image behind page content
By default, cover images position as they would in Notion, (above the page content) except for the home page. The homepage cover is set to position behind the page content.
Reset the homepage cover position so it goes above page content:
#page-index .notion-header__cover.has-cover {
position: static!important;
max-height: 30vh!important;
height: 30vh!important;
margin-top: 0px!important;
}
Set cover image to go behind the page content on all pages
.notion-header__cover.has-cover {
position: absolute!important;
width: 100%!important;
top: 0!important;
margin-top: -20px!important;
height: 100vh!important;
max-height: 100vh!important;
z-index: -2!important;
}
Cover image border radius
:root {
--card-radius: 36px !important;
}
FAQ
I might be releasing an update in the near future to support color themes in Super, however Super’s color theme options are undergoing changes in the near future and I will be working on support for this first!
Earn OP
Qualified participants may be able to earn OP rewards by earning respect in Optimism Fractal meetings. Learn more here.
Contact
You can speak with the founders
You can find the zoom link to join this meeting and RSVP for our upcoming weekly events here. For more details or any questions, you can visit OptimismFractal.com and join our Discord. You can follow
It’s designed to reward public goods, foster collaborations, and create profound benefits for the Optimism Collective!
At each Optimism Fractal meeting, we play an innovative consensus game called the Respect Game. It’s designed to reward public goods, foster collaborations, and create profound benefits for the Optimism Collective!
I think there is something better than create videos
…?
Help Optimism
Pioneering a new thing
Discord
Mirror
Github
Youtube
Rules/Details Press Instructions RSVP
- Meet fellow optimists
- Network with builders
- Earn OP for helping Optimism
- Have fun at weekly events
during weekly meetings and earn respect for helping the collective.
Optimism Fractal meetings are helpful for optimistic creators, builders, and anyone interested in Optimism
This innovative consensus game is designed to reward public goods, foster collaborations, and create profound benefits for the Optimism Collective!