Customize your scheduling page: Difference between revisions
No edit summary |
No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 61: | Line 61: | ||
Custom CSS (Professional plan only) | Custom CSS (Professional plan only) | ||
</h2> | </h2> | ||
<p> | |||
Custom CSS allows you to customize almost every visual element of your booking page, including: | Custom CSS allows you to customize almost every visual element of your booking page, including: | ||
fonts | </p> | ||
spacing | * fonts | ||
borders | * spacing | ||
layouts | * borders | ||
buttons | * layouts | ||
hidden elements | * buttons | ||
colors | * hidden elements | ||
advanced branding | * colors | ||
To add Custom CSS | * advanced branding | ||
<br> | |||
<p> | |||
To add Custom CSS: | |||
</p> | </p> | ||
<!-- (To apply custom CSS to a widget use: ".widget-theme" in your css code) --> | <!-- (To apply custom CSS to a widget use: ".widget-theme" in your css code) --> | ||
| Line 78: | Line 81: | ||
</p> | </p> | ||
<p> | <p> | ||
2. Select '''Personal account''' or '''Organization account''' tab | 2. Select either '''Personal account''' or '''Organization account''' tab. | ||
</p> | </p> | ||
<p> | <p> | ||
3. Scroll the page to | 3. Scroll the page to <strong>Custom CSS</strong>. | ||
</p> | </p> | ||
<p> | <p> | ||
4. Paste your CSS. | |||
</p> | </p> | ||
<p> | <p> | ||
4. Save. | |||
</p> | </p> | ||
<p> | |||
[[File:SM Branding CSS.png|1200px|center|link=https://help.simplymeet.me/index.php?title=File:SM_Branding_CSS.png]] | |||
</p> | |||
<br> | |||
<p>'''Personal CSS'''</p> | |||
Personal CSS affects only your personal scheduling page. | |||
<p>'''Organization CSS'''</p> | |||
Organization CSS applies to organization booking pages and organization meeting types. | |||
'''Tip''': To style embedded widgets, use the .widget-theme selector in your CSS. | |||
<h2><br> | <h2><br> | ||
Changing Fonts with Custom CSS | Changing Fonts with Custom CSS | ||
| Line 99: | Line 111: | ||
We recommend using '''Google Fonts''', most fonts are free to use, including commercially. | We recommend using '''Google Fonts''', most fonts are free to use, including commercially. | ||
Browse available fonts [https://fonts.google.com/ here]. | Browse available fonts [https://fonts.google.com/ here]. | ||
<!-- | |||
<p>Example:</p> | |||
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); | |||
* { | |||
font-family: 'Oswald', sans-serif !important; | |||
} | |||
<p>Save the CSS and refresh your booking page.</p> | |||
--> | |||
<p>'''Option 2 — Your own hosted font'''</p> | |||
If your company has its own licensed font, you can reference it from your own hosting. | |||
<!-- | |||
<p>Example:</p> | |||
@font-face { | |||
font-family: 'MyCompanyFont'; | |||
src: url('https://your-domain.com/fonts/MyCompanyFont.woff2') format('woff2'); | |||
} | |||
* { | |||
font-family: 'MyCompanyFont', sans-serif !important; | |||
} | |||
--> | |||
<br> | |||
<br> | |||
<p>'''Important'''</p> | |||
If you use fonts '''other than Google Fonts''': | |||
<p> | |||
* you are responsible for obtaining the appropriate font license;</p> | |||
<p> | |||
* you must host the font files yourself;</p> | |||
<p> | |||
* SimplyBook.me / SimplyMeet.me does not provide or host font files.</p> | |||
<p>Support can assist with simple CSS syntax and applying Google Fonts, but cannot '''source, upload, or host''' non-Google font files.</p> | |||