DM Josh Millgate on Twitter to ask about the cover image on twitter and CSS

Fix CSS cover photo for Optimism Fractal.com

removing header from a page

Fixing dimensions on linked databases in gallery view

Thank you Melvin. I sent that by prematurely by accident before as I was writing the following.

Hi Cam, thanks a lot! The blog is looking way better now and I'd appreciate if you could still work out how to make some code and let me know how i can override the default.

One issue that I'm experiencing is that the size/dimensions of gallery items in the same linked database look different on pages outside of the main blog page, which sometimes results in cutting off text or important elements of the picture. At the end of each blog article I often include a 'Related Posts' section which links to a few other blog articles. I do this by creating a linked database view of the Optimystics Blog Database in notion and setting some filters to show only the relevant related articles. This mostly works well, but the pictures are square in each of these pages whereas they are rectangular on the Optimystics.io/blog where the database is originally located. As a result some of the text or image is cut off in the square images, as you can see in the example screenshot above.

There are about 30 blog articles, so I imagine that it would be time consuming and somewhat inefficient to change the code for each of these blog articles individually. Do you know how to adjust the CSS code to make these linked database views all have the same rectangular proportions as on Optimystics.io/blog? Also, is it possible to make whatever CSS adjustments to the code on the entire blog database so i don't need to set the code individually for each (or is the best/only way to do this to set the global sitewide code)?

Hiding the Cover Image and Hierarchical CSS Settings

There is also another related improvement that I’ve also been thinking about making and would be grateful if you could advise:

I’ve thought a lot about displaying all the pages for videos and show notes in a database view (instead of as images as you can see on OptimismFractal.com/videos) as we briefly discussed a few months ago, but one issue that has prevented me from doing this is that the videos pages don’t have the thumbnail image in the cover photo or near the top of page. Each video page has a youtube video embedded at the top with the proper thumbnail, but it is not an image at the top of the page so when i display the database it in gallery mode then the gallery in Super doesn’t display the image for each episode.

I think that a good solution to this would be to use a piece of CSS code that hides the cover image on the page, which would enable me to put the correct thumbnail in the cover photo to show in the gallery view while still having the youtube embed at the top of the page (and not having the image repeat twice at the top of the page with both an image file and youtube embed). I think I remember seeing this CSS code somewhere and searched for it but couldn’t find it. Is there a piece of code that I can add to hide the cover photo on the super site?

Also there are about 200 pages with videos and show notes across my websites, so there is a similar issue as described in the question above about the blog. If it’s possible to set the code for all page in a database, then I’d like to move the videos and show notes pages to their own databases so that I can easily apply this code to all of these pages without affecting the display of the cover image on other pages. If I set the code for a database or page with a database in super, then is it possible to make the code affect all it’s child pages as well so that all the videos pages will also not show the header (while other pages on the website still do show header images)?

The websites are looking much better than ever and I really appreciate all your help!

considering move the videos to a new database

since it is a youtube embed

2. The cover image on the top of OptimismFractal.com is good enough for now, but

Thank you very much Cam, your responses were super helpful. I'm glad you enjoyed the shopping as well. I wrote some replies to your messages and will share them as soon as possible.

Since our last correspondence I've been playing around with the CSS of the website and making it look a lot better, but I'm now having a major issue and would appreciate your help with this.

My current goal is to improve the header image on the homepage of OptimismFractal.com so that the header is not too tall, as it is currently taking up a large amount of space which makes it so that you can’t see anything below the cover image when you first open the page unless you scroll. The main issue with this is that it means that I need to add many line breaks before the first elements under the cover photo or else they will be on top of the cover photos, which makes it so that there's lots of black space near the top of the home page on some devices.

To resolve this issue, I added a bit of CSS code that Josh Millgate provided in set up instructions for this template (called Hunt) which allows me to set a different height for the cover image. I added it and looks excellent in the Super preview window, but it does not work at all in regular browsers. The code that he provided is the following:

#page-index .notion-header__cover.has-cover { position: static!important; max-height: 30vh!important; height: 30vh!important; margin-top: 0px!important; }

You can see the following screenshot to see how it looks in the Super Preview window and a browser.

I’d love to make it look like the preview images in the first two screenshots and have no idea why it’s looking like the third image on all browsers right now. Do you know why this is looking so different in a Super preview window compared with a browser? Can you please help provide CSS code that will allow me to make the cover image look shorter on all browsers?

If it's helpful, here is the complete CSS code that I'm currently using that is resulting in these screenshots:

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


:root {
    --primary-color: #202B3F;
    --color-text-default: #F4F0DF!important;
    --color-bg-default:#000000!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;
}

.notion-header__cover:after {
      background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(0, 0, 0, 0) 98%)!important;
  }
  #page-index .notion-header__cover.has-cover {
    position: static!important;
    max-height: 50vh!important;
    height: 500vh!important;
    margin-top: 0px!important;
}
  #page-index .notion-text, h1.notion-heading:first-of-type {
    text-align: left!important;
    margin: 0!important;
}


.notion-toggle {
    display: none !important;
}

[id^="page-blog"] .notion-property__text.notion-collection-card__property {
  padding-left:0px !important;
}

.gallery .notion-collection-card__property.notion-semantic-string {
  line-height: 1.6rem !important;
}

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

:root { --primary-color: #202B3F; --color-text-default: #F4F0DF!important; --color-bg-default:#000000!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;}

.notion-header__cover:after { background-image: linear-gradient(to bottom, rgba(251, 252, 255, 0), rgba(0, 0, 0, 0) 98%)!important; } #page-index .notion-header__cover.has-cover { position: static!important; max-height: 50vh!important; height: 500vh!important; margin-top: 0px!important;} #page-index .notion-text, h1.notion-heading:first-of-type { text-align: left!important; margin: 0!important;}

.notion-toggle { display: none !important;}

[id^="page-blog"] .notion-property__text.notion-collection-card__property { padding-left:0px !important;}

.gallery .notion-collection-card__property.notion-semantic-string { line-height: 1.6rem !important;}

Here is the Head Code:

<link href="https://joshmillgate.github.io/hunt/style.min.css" rel="stylesheet" />

Here is the Body Code:

<script defer src="https://joshmillgate.github.io/hunt/script.min.js"></script>

As a temporary solution I just removed the cover image and switching it with an image at the top of the page. This works well enough for now, but I'd really appreciate if you can help me figure out how to make it work with a cover photo as I think this looked much better with less black space surrounding the first image. You can see how it currently looks here:

Can you please also provide CSS code that will enable me to center the buttons? Right now the buttons are all aligned to the left and it would be great to center them. You can see the RSVP and Learn More buttons in the screenshot to see what i mean:

Respond to Cam’s Most Recent Messages

Glad to hear the shopping went well!

Perfect, all the changes you made work well and I really appreciate it!

Do you know how can I change the color of the Nav Bar 3 line drawer? This icon is white on the EdenFractal.com website, which makes it difficult to see in the following screenshot at the top of the site and impossible to see after scrolling down where the background is white. I looked for an option to change this in the Design settings for Super but couldn’t find any way to change this

The border that has a different color like on Ethereum.org . An outline that goes around both the image, title, and text. Potentially with a line between the text/title and the image.

Ask About Optimizing for Mobile

• How can we make it so that it looks good on mobile without so much space at the top while also looking good on desktop?
‣
We need to add many extra lines below the cover image so that it does not look like the image in the toggle where the title is over the image. Is there any way to resolve this issue to get the benefits of the fading cover image all the way at the top but make it so that we don’t need to add so many lines
1. Would a different CSS template or update to the CSS template work better for this?

Improve OptimismFractal.com Website (and Create Educational Resources)

Ask about Optimizing for High Resolution Monitors

• When using a cover image, there seems to be a trade-off where optimizing for mobile makes the image look worse on high resolution monitors
Test if this also occurs when not using a cover photo and instead using a very large or fully stretched image at the top
Test both of these on two different dev site pages to see if i can get it to work better without needing to ask Cam first
• There seem to be two reasons for this trade-off
‣
One issue is that we need to add extra lines to make it look good on a high resolution monitor, which makes it look worse on a phone with too much space
1. The other issue is that the cover image needs to be the right proportions in accordance with the higher resolution height.
• It’s rather difficult to describe this, so I took some screenshots in this toggle and it may be helpful at some point to do a screen recording then send it to Cam to show the issue

• I think the best solutions to this are to either:
1. Ask Cam how to improve the CSS Code so that we can use a detailed image that fades at the top of the OptimismFractal.com site without these issues
2. Use an image that is not a cover photo at the top of the website, but is rather a fully stretched or just a very large photo at the top
3. Use a very simple cover image at the top that doesn’t have details on the side, like on the Eden Fractal or Optimystics website

Next Step

• I just tried doing this and wasn’t showing the top image at a larger height
• I asked chatgpt about it for a while and didn’t make progress, as you can see below

Ask about adding background color to certain portions of the site

Is it possible to add a different background color to certain portions of the site? If so, how?

This would look better than just using the notion line divider or wavy line.

Ask about Using Callouts to Stylize the page

• I just tried adding the following sections to Optimism Fractal Dev Site 2 in call-outs and am wondering if using callouts might provide an easy way to customize the look of the site and make it look good
• One thing to note is that it doesn’t seem possible to add columns or headers directly into the call out in notion, but they can be added by creating them outside of the callout then dragging them into the call out
• Another thing to note is that i replace the callout symbol with the color of the background because otherwise it shows the lightbulb on https://optimismfractal.com/dev-site2
• Im not sure if there’s too much space at the top or bottom of the callout- maybe good to check this
• Another important thing to note is that callouts can be placed next to each other in columns which is nice, but the height of the callout is dependent on much content is in the call out. So if one callout has an extra line or few of text, then it will be an extra line or few longer than the other call out (unless i add extra blank lines to the other callout)
if this is a good solution, then consider asking how to remove the callout symbol with CSS

• One minor issue with using callouts is that there is a greater margin on the left side than the right because it includes a section for the logo. This is more noticeable on smaller callouts than larger callouts
consider asking if its possible to remove extra space on the left side for the icon
check to see how it looked when putting many items in one call out and if this resolves the issue as is

• A potential issue with callouts is that they are quite square and might not look so great if i use many callouts, so generally i think that using one or two large callouts is probably better than using many callouts

• i also tested putting multiple database items and multiple items in the callout box, which might work nicely as well
review this

Ask how to make the backround of drop down menu black

i just tried changing settings of navbar and design settings and it’s not changing

Consider asking about setting a container or standard margin for everythin on the page like Ethereum.org

• on ethereum.org, no matter how wide the page or how much you zoom out… there is a maximum size of all the elements on the screen
• This may be helpful to provide more predictability and standardization into the web design so that the window never stretches too much or cuts off key elements

• If you zoom in to a smaller screen size (like that of a phone) then it still looks good too
• I think this can be achieved by just using a simple top picture that doesn’t include any logos or key elements other than the sunny flower logo

consider asking Cam if there is a way to do set up this kind of container, maximum width of elements, or margins

• Update: i think this can probably be acheived by using callouts or margins on the text, then using an image at the top instead of a cover image

Ask about how to center text, align it centered and change the margins for the top of the homepage

This is much wider and doesn’t look so good

I just added black screenshots to the side as a temporary fix to improve the margins

Ask about CSS Code to Remove the title from a page

• It would also be helpful to have the CSS code snippet easily available and accessible so we can add it to blog articles as desired, since some posts already have a title in the picture and don’t need an extra title above it

How can i make it so toggles show up in OptimismFractal.com/welcome?

To Do

Consider making the CSS improvements via Super.so for the Optimism Fractal Notion Community site

hi Dan,

for Issue #1 image size and position, please see this video: https://share.cleanshot.com/Xz2wz5Hm

#2 - I can't seem to access your Notion pages - Optimystics.io/videos - can you please check the sharing - might have expired.

#3a for the card sizes

Here is some updated code:

.notion-collection-card__cover.large, .notion-collection-card__cover.large img {
  height: max-content!important;
}

to replace the one that I provided last week that looks like this:

.notion-collection-card__cover.large, .notion-collection-card__cover.large img {
  height: 400px !important; /* make the images bigger */
}

For #3b and #3c - can you please send me the page that you want the 2x rows and the border?

For the top of the page on edencreators that is incorrect I made the content of the navbar have a transparent background

And you can hide the navbar completely here in Navigation > Navbar > type Hidden

IMPORTANT Please force refresh the dashboard in the browser to load the new code in your Dashboard, and then refresh the site so you can see the changes.

Hey Cam, thank you very much for the thoughtful replies. Sorry for taking a while to respond, I just got the chance to try what you suggested.

Regarding #1 about image size and position, I watched the video you shared and tried making the images wider in Notion as you instructed. It’s a bit strange because I previously tried this without success and a colleague recently got all the images to look good without doing this (then it stopped displayed well again), but it’s now working perfectly. Thank you!

Regarding #2, hmmm… I just checked and the notion page permissions showed that you still had access. I tried revoking your access and giving you full access again. Are you able to access it now?

Regarding #3a, I just added this CSS code to Optimystics.io/blog and it looks really nice. There are two minor issues that I’d appreciate if you can help resolve: 1. The title and text is slightly offset, with the title starting more to the left than the text. Is it possible to align the text with the title or center the title?

2. I noticed that the bottom of the letter g is getting cut off in some of the titles. Is there any way to fix this so the bottom of the g won’t be cut off?

You can see what i mean in the picture below:

Regarding #3b and #3c: Yes, I’d like to use the 2x rows and the border on the homepage of OptimismFractal.com, which can be found the notion page linked below. There isn’t such a gallery view database on the page above because I haven’t gotten it to look good yet and this homepage is visited frequently.

https://www.notion.so/edencreators/OptimismFractal-com-c238e1244229466ba8b7753b74104b6f

I created a new page at OptimismFractal.com/dev-site where you can see a draft database that I’d like to use with 2x rows and border. I just gave you access to the notion page for this webpage, which you can see at the link below:

https://www.notion.so/edencreators/OptimismFractal-com-test-dev-site-82472e4cbdbc46c4840f6cd9d017f1bd?pvs=4

https://optimismfractal.com/dev-site

I’m also very interested in using the 2x rows with the border on the Optimystics.io/blog and other pages that feature a linked. You can see the notion page for the blog below:

https://www.notion.so/edencreators/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?v=6cf34bfe6f4149a1b97f450d962730dc&pvs=26

Thank you for adding the code to make the header have a transparent background. I have a few questions about issues that are now occurring and would appreciate your help on these:

• The left and right borders are still showing around the cover image on EdenFractal.com and EdenCreators.com. Previously there was no white or blue vertical line to the left and right when you first open this site, but now I can’t remove the vertical lines on the left and right side of the screen. How can I remove these left and right border lines?

• How can I change the color of the Nav Bar 3 line drawer? This icon is white on the EdenFractal.com website, which makes it difficult to see in the following screenshot at the top of the site and impossible to see after scrolling down where the background is white. I think this used to be more visible but now it’s very difficult to see.

• I think that that 3.1 update automatically changed the font style on EdenFractal.com and EdenCreators.com, so now there is very little line spacing between lines of text. For example, can see this in the picture below from EdenFractal.com/videos where text that includes a link has a nice vertical line spacing but text lines that don’t include a link are very close together . How can i add more spacing above/below each line of text to make it easier to read and less crowded?

Haha sounds good, happy birthday! Enjoy shopping with your wife 😃

Thank you. When you get the chance I’d appreciate if you can help with the following as well:

Regarding #3b and #3c:

Yes, I’d like to use the 2x rows and the border on the homepage of OptimismFractal.com, which can be found the notion page linked below. There isn’t such a gallery view database on the page above because I haven’t gotten it to look good yet and this homepage is visited frequently.

https://www.notion.so/edencreators/OptimismFractal-com-c238e1244229466ba8b7753b74104b6f

I created a new page at OptimismFractal.com/dev-site where you can see a draft database that I’d like to use with 2x rows and border. I just gave you access to the notion page for this webpage, which you can see at the link below:

https://www.notion.so/edencreators/OptimismFractal-com-test-dev-site-82472e4cbdbc46c4840f6cd9d017f1bd?pvs=4

https://optimismfractal.com/dev-site

I’m also very interested in using the 2x rows with the border on the Optimystics.io/blog and other pages that feature a linked . You can see the notion page for the blog below:

https://www.notion.so/edencreators/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?v=6cf34bfe6f4149a1b97f450d962730dc&pvs=26

but now the images are looking good on pages like OptimismFractal.com/videos without

Hi Dan - I will work through these today. Cam.

ok

1. Images in synced blocks are not displaying correctly. It looks like some of the images have a different width set - some are showing page-width and the ones that look ok are showing normal. I recommend adjusting the width and position of the images in Notion to see if that fixes up how super sees the image. Even though these look the same in Notion, the different page width of your Super site will be able to show the differences that would otherwise not be noticed on the Notion page.
2. I note that you've already tried re-sizing the images - Can you please invite me to this page with edit access so I can inspect the layout inside Notion and see if I can work out what is happening? cam@super.so
3. Implementing a gallery database is a good way to show this information - it does not rely on synced blocks and it's really easy to create multiple views and filters for different parts of the site. Here is some custom code you can try on the blog gallery.

.notion-collection-gallery.large {
  grid-template-columns: 1fr !important; /* make the gallery one column wide */
}

.notion-collection-card__cover.large, .notion-collection-card__cover.large img {
  height: 400px !important; /* make the images bigger */
}
.notion-collection-card .notion-property__title .notion-property__title__icon-wrapper {
  display: none !important; /* hide the page icon */
}

May 1

Thank you very much for the insightful response and css code for the gallery view.

1. I checked the notion page for OptimismFractal.com/media and Optimystics.io/videos and they both have the "Full Width" option turned off. I believe that both sites are using the same exact CSS code from a template I purchased last year, so I think the page with would be set to be the same in Super as well. Please let me know if there's anything else I should check here.

2. Yes I just gave you access to the pages for both OptimismFractal.com/media and Optimystics.io/videos. The notion links for these are provided in my previous messages.

3. Great, I agree with the benefits of gallery databases. I just tried adding it to the Blog page and it's starting to work but I have a few questions/issues:

a. The pictures are much less wide than the text, which looks rather awkward, as you can see in the picture below. I tried increasing the height to about 900px in the code that you provided and this makes the width about the same as the text below as I want, but if the window size is smaller or I'm on mobile then this adds a lot of black space between the picture and the text (also shown below). Is it possible to add some other property such as width or a ratio to make sure that the pictures will be the same width as the text on any screen size?

Here's how it looks on mobile with a 1000px height

b. I'd also like to be able to display two blog posts on one row in some pages, rather than just one. I tried changing the part of the code for "grid-template-columns: 1fr " to '2fr' or just '2' as it seems like this is how I can enable two gallery items on each row rather than one, but it's not changing anything. How can I display two gallery pages on a line instead of just one?

c. Is there CSS code that can be added to frame each gallery page with a box around the image and the text? I'd love to display some of the gallery items in this way to provide a more structured view, similar to how Ethereum.org does this in the following picture

Hi Cam, I have a few questions and would greatly appreciate your help:

1. When I upgraded to Super 3.1, many of my synced blocks with images stopped displaying correctly. For example, prior to Super 3.1 I had many pictures of youtube thumbnails featuring shows on my videos page and they looked great with full sized pictures and the text well positioned beneath it. I synced this across multiple locations throughout a couple sites on Super and it looked great in all places. You can see how one of these synced blocks looked below before Super 3.1 and the next picture after to see how it looks after updating to Super 3.1. These pictures are both live at Optimystics.io/videos, which you can see at https://www.notion.so/edencreators/Optimystics-Videos-4aa0cc0fe82f46fd8fb6a8548b7a5732?pvs=4.

Do you know why Super is doing this to synced blocks and how to fix it?

An example of a well spaced picture and text before Super 3.1 is below. For some reason there are some synced blocks that still are sized perfectly like this and I’m not sure why… I suspect that it may have something to do with where the pictures are synced but I don’t know why that would make a difference or if there is some other issue taking place.

Mis-sized pictures after Super 3.1 are shown below. It displays different depending on the monitor or screen size and I don’t understand why it positions some synced blocks differently than others. I also experienced a similar issue with synced pictures many months ago but it haven’t experienced it in a long time and I’m not sure if Super 3.1 reintroduced a similar kind of issue again.

2. I tried un-syncing some of the blocks since that is what fixed a similar issue I experienced many months ago. However after un-syncing, the pictures and text are not properly aligned like in the first photo shown above. I also tried resized the pictures to make it look like the first picture and haven’t been able to make it look right yet. You can see this at OptimismFractal.com/media, which is hosted at https://www.notion.so/edencreators/Media-eac86b8f965a415c9a69c2b58aa97103?pvs=4. These videos are intended to sync with the Optimystics videos page linked above. The images show perfectly aligned with the text in some displays but look totally different in other window sizes or displays, as you can see in the two pictures below. Do you know how I can make the pictures and text show up in more alignment like they used to do in the first picture above (before Super 3.1)?

3. I’m considering implementing a gallery database to display video thumbnails and descriptions instead of using the synced picture and text blocks like in the notion pages linked above. This could resolve the issues above and also be a more flexible way to display this kind of content for other reasons as well. However, I’ve tried creating a database for videos and haven’t figured out how to make the database gallery show large enough cards. I’ve tried setting the Card Size to Large in the Gallery Layout section, but the cards are still showing very small. I’d like to be able to display Cards that are the size of the first picture above or have two cards in one row, but even with the large card size the site only shows small cards with 3 cards in each row on an average laptop sized window. You can see an example of this at Optimystics.io/blog, which is hosted at https://www.notion.so/edencreators/Optimystics-Blog-6cf34bfe6f4149a1b97f450d962730dc?pvs=4 . 3a. How can I make the card sizes larger I can display images like video thumbnails and blog posts with this database architecture? Is there some CSS code to resize gallery cards or is there an option for this in Super’s settings? 3b. How can I remove the page icon at the left side of the title of each these blog posts? I turned off ‘Show page icon’ in the Gallery layout settings for the database but it still shows the little document icon next to the title of each blog post. I think this didn’t show before Super 3.1, though I am not sure.

I'd still like to try the version with the cover photo and am wondering if this code would not allow me to add a cover since it seems to indicate that it removes the cover image.

Do you know if this code snippet would remove the ability to add a cover image and do you have any idea how I can make the cover image work correctly?