General
General

General

Site Customization

Common CSS Code Snippets

If you're looking to customize your Bullet.so site, you can use CSS code snippets to make changes to your site's design. Here are some common CSS code snippets that you can use:

Change Container Width

:root {
   --container-width: 100%;
}
.notion-page{
  width:var(--container-width)
}

Change Notion Container Width

.notion-full-width, .notion-half-width{
    --notion-max-width: calc(min(1920px, 98vw));
}

Change Link Color

.notion-link{
  color: blue;
}
  • Cover resize and repositing

Add Custom CSS

If you want to add your own custom CSS to your site, you can use the following CSS code:
/* Add custom CSS */
.custom {
  background-color: #007bff;
  color: #fff;
  padding: 10px;
}
You can use the code above to add your own custom CSS to your site. Simply replace .custom with the class name of your choice and add your own CSS properties.

Conclusion

These are just a few examples of the CSS code snippets that you can use to customize your Bullet.so site. By using these snippets, you can create a unique and personalized design for your site. With CSS, you can make your site look and feel exactly the way you want it to.
 
 
  • How to overall site container width
  • How to control notion container width
  • How to center all the elements on the page
  • Add padding to the notion container
  • How to change the link color