Styling

21 Aug, 2022

Bear's built-in style editor turns Bear into a full-fledged website creation platform. All manner of websites from small blogs, to docs (like this documentation), to small business websites can be built using Bear.

Themes

There are a handful of pre-built themes to choose from in the dashboard. These can be used as-is, but also make a good jumping off point for creating custom styles.

You can also choose any no-class css theme as a starting point and include it in the Styles field using @import https://link-to-theme.css; (custom fonts can be imported in the same way).

Custom styles

Bear's themes can be customised using pure CSS in the Styles field. The structure of the theme CSS is set up to easily modify the basics such as font, colour, scale, etc (both for light mode and dark mode, as specified by the @media (prefers-color-scheme: dark) rule).

Bear classes

Bear has a few classes which can be used as CSS selectors to customise specific pages or elements.

Pages

• The root of the homepage: .home {}
• The root of any post: .post {}
• The root of any page: .page {}
  • If page and post styles are the same, both can be selected using .page .post {}
• The root of the blog list page: .blog {}
• The root of the email subscription page: .subscribe {}
• The root of the 404 not found page: .not-found {}

Custom class names

Each post has the header option class_name which adds a class to the root of the post to allow custom styling for that particular page.

Eg:

class_name: contact-page

Elements

• The anchor tag for the title of the blog: .title h1 {}
• The ul of the posts on the blog: .blog-posts {}
• The navigation header: nav
• The codeblocks/hightlights: .highlight, .code {}

Notes

All parts of the front-end blog are selectable and style-able using simple CSS selectors. If there are any difficult-to-access parts of the page please submit an issue.

It is considered very shitty to use CSS to hide the Made with Bear footer. If you have upgraded or are a contributor to the project it's okay (although it would be awesome if you left it in), however for free users this will be reset automatically (or manually).