cal.pub0.org/apps/docs/pages/developer/adding-css.mdx

33 lines
1.5 KiB
Plaintext
Raw Normal View History

Migrate docs to mono repo (#1814) * Initial commit Created from https://vercel.com/new * Update config * Homepage * Self-hosting * Integrations * More docs pages * Developer docs * Update billing.mdx * Update install.mdx * Fix install guide * More fixes * Adding CSS guide * Fix capitalisation on Microsoft page * Added delete account update * Added Zapier integration question * Added GMeet integration part * Added Delete Account to Settings * unnecessary question mark * Added a link to Settings * Added stuff in Billing * Added a link to cal.com/signup * Capitalization * Added language change * Added more stuff in Event Types * Added how to change email * Added FAQ page * Spelling mistake * Added a title to FAQ * Added more stuff to Billing * Availability multi-booking * Deleted from Availability added to FAQ * Added to FAQ * Removed the dot * Added stuff to FAQ * Add license warning to adding CSS page * Update docker.mdx * Add import instructions * removed readme until we have our own * updated favicon, added cal sans * added new cal sans * Create README.md * renamed all github links * renamed more github links * Added team's Event Types * Clarified the Google Meet integration * Spelling error * Added primary calendar tutorial * Removed tutorial * primary calendar selection * Moved to subdirectory * Matching configs * Shares eslint config between web and docs * Removes format-schemas * Updates env file location in turbo * [docs] updates monorepo intructions Co-authored-by: baileypumfleet <pumfleet@hey.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: milospuac <97884287+milospuac@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@richelsen.net>
2022-02-11 19:33:35 +00:00
import Callout from 'nextra-theme-docs/callout';
# Adding CSS
<Callout>
Adding or modifying CSS counts as changing the code, so as per [our license](https://github.com/calcom/cal.com/blob/main/LICENSE) you must either open-source your modified version or purchase an enterprise license.
</Callout>
Cal.com uses [TailwindCSS](https://tailwindcss.com) as a replacement for traditional CSS styling within the application, but some people prefer to add CSS styles themselves.
CSS files should be stored in the `styles` directory within the codebase.
Within the `styles` directory, you will find two CSS files, `fonts.css` and `global.css`. We suggest not to add to these files, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
## Adding new stylesheets
Firstly, create the CSS file inside the `styles` directory.
Then, open the `pages/_app.tsx` file, and you will see the following two lines:
```javascript
import "../styles/fonts.css";
import "../styles/globals.css";
```
Duplicate one of these import statements and change the path to link to your new CSS stylesheet, like so:
```javascript
import "../styles/your-new-stylesheet.css";
```
<Callout type="warning" emoji="⚠️">
These styles will apply to all pages and components in your application.
</Callout>
Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside `pages/_app.tsx`**.