You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Revise site design documentation for clarity and organization. Update custom domains, navigation, and planning sections with detailed instructions and best practices. Remove outdated files and enhance overall structure for improved user experience.
description: Configure your own domain name for your Curvenote site
4
5
---
5
6
6
-
::{tip}
7
-
**Objective:**
8
-
Connect your Curvenote site to a custom domain so visitors can find it at your own branded URL.
9
-
:::
7
+
# Set Up Custom Domains
8
+
9
+
## Quick Start
10
+
Configure your own domain name to host your Curvenote site instead of using the default curve.space subdomain
11
+
12
+
You can use Curvenote to host any custom domain that you own, for example a personal blog, lab website, or journal. Custom domains are available with the Curvenote Pro plan or require a subscription to a Lab Group site or Journal hosted with Curvenote.
10
13
11
14
## Before You Start
15
+
12
16
Make sure you have:
13
-
- Admin access to your Curvenote site.
14
-
- Access to your domain registrar (e.g., GoDaddy, Namecheap, Google Domains).
15
-
- The domain name you want to use.
17
+
- A Curvenote Pro plan or Lab Group/Journal subscription
18
+
- A domain name you own and control
19
+
- Access to your domain's DNS configuration
20
+
- Your Curvenote site already set up and working
21
+
22
+
## 1. Configure DNS Records
23
+
24
+
Set up the DNS configuration for your custom domain:
25
+
26
+
### Add CNAME Record
27
+
Navigate to your domain's DNS configuration and add the following `CNAME` record:
**Example**: If your domain is `mylab.com` and you want to use `research.mylab.com`, add a CNAME record pointing `research.mylab.com` to `ssh.curve.space`.
34
+
35
+
```{note}
36
+
If you visit https://ssh.curve.space you will see a custom landing page that points back to this documentation - this is not what will be shown on your site!
37
+
```
38
+
39
+
## 2. Contact Curvenote Support
40
+
41
+
Once your DNS is configured, contact Curvenote support to complete the setup:
Choose and personalize your site’s layout and theme to match your brand and ensure your content is visually appealing and easy to read.
9
-
:::
6
+
# Choose a Layout & Theme
7
+
8
+
## Quick Start
9
+
Customize your site's visual appearance by selecting layouts, colors, fonts, and branding elements to match your organization's identity
10
+
11
+
Your site's layout and theme determine how your content is presented to visitors. Curvenote provides flexible options to create a professional, branded appearance that enhances readability and user experience.
10
12
11
13
## Before You Start
14
+
12
15
Make sure you have:
13
-
- A Curvenote account with access to your site’s settings in the web admin interface
16
+
- A Curvenote account with access to your site's settings
14
17
- Primary and secondary brand colors (hex values)
15
-
- Logo and dark mode logo (SVG or PNG)
18
+
- Logo and dark mode logo (SVG or PNG format)
16
19
- Any preferred fonts or typography guidelines
20
+
- Your site already created and accessible
21
+
22
+
## 1. Access Site Settings
23
+
24
+
Navigate to your site's design configuration:
25
+
26
+
1.**Open the Curvenote web admin interface**
27
+
2.**Select your site** from the dashboard
28
+
3.**Go to "Design" or "Theme Settings"**
29
+
4.**You'll see options** for layout, colors, fonts, and branding
30
+
31
+
## 2. Choose Your Layout
32
+
33
+
Select how your content will be displayed:
34
+
35
+
### Layout Options
36
+
-**Grid – Centered**: Content arranged in a centered grid layout
37
+
-**Grid – Left**: Content aligned to the left in a grid format
38
+
-**Normal**: Standard content width with traditional flow
39
+
40
+
### Choose Based On
41
+
-**Content type**: Articles, journals, or lab websites
42
+
-**Audience preferences**: Academic vs. general public
43
+
-**Brand guidelines**: Formal vs. modern appearance
44
+
45
+
You can change this layout later as your needs evolve.
46
+
47
+
## 3. Configure Brand Colors
48
+
49
+
Set your site's color scheme:
50
+
51
+
### Primary Color
52
+
-**Purpose**: Main brand color for headers, buttons, and accents
53
+
-**Format**: Hex color code (e.g., #003366)
54
+
-**Consider**: Accessibility and contrast with text
55
+
56
+
### Secondary Color
57
+
-**Purpose**: Supporting color for backgrounds and highlights
58
+
-**Format**: Hex color code (e.g., #FFFFFF)
59
+
-**Consider**: How it complements your primary color
17
60
18
-
## Steps to Choose a Layout & Theme
61
+
### Preview Changes
62
+
-**Test readability** of text on colored backgrounds
63
+
-**Check contrast ratios** for accessibility
64
+
-**View in both light and dark modes**
19
65
20
-
### 1. Open Site Settings
21
-
- Navigate to your site in the Curvenote web admin interface.
22
-
- Go to **Design** or **Theme Settings**.
66
+
## 4. Upload Your Logos
23
67
24
-
### 2. Select a Layout
25
-
Curvenote supports several content layouts for landing and listing pages:
26
-
-**Grid – Centered**
27
-
-**Grid – Left**
28
-
-**Normal** (standard content width)
68
+
Add your organization's branding:
29
69
30
-
Choose the layout that best fits your audience and content type. You can change this later.
70
+
### Brand Logo
71
+
-**Location**: Appears in the site header
72
+
-**Format**: SVG or PNG (recommended: square format)
73
+
-**Style**: Simple, clean design without text for flexibility
74
+
-**Size**: Typically 200x200px or larger
31
75
32
-
### 3. Apply Brand Colors
33
-
- Enter your **primary** and **secondary** color values.
34
-
- Preview changes to ensure text and buttons remain accessible and readable.
76
+
### Dark Mode Logo
77
+
-**Purpose**: Used when visitors switch to dark mode
78
+
-**Format**: Same as brand logo
79
+
-**Consider**: How it looks on dark backgrounds
35
80
36
-
### 4. Upload Logos
37
-
-**Brand Logo**: Appears in the site header.
38
-
-**Dark Mode Logo**: Used when visitors switch to dark mode.
39
-
- Recommended: a simple, square format without text for flexibility.
81
+
## 5. Select Typography
40
82
41
-
### 5. Set Fonts
42
-
-**Title/Brand Font**: Typically a bold or distinctive font for headings.
43
-
-**Main Text Font**: Easy-to-read sans-serif or serif.
44
-
-**Technical/Monospace Font**: Used for code snippets or inline commands.
83
+
Choose fonts for different content types:
84
+
85
+
### Title/Brand Font
86
+
-**Use**: Main headings and site title
87
+
-**Style**: Bold or distinctive font
88
+
-**Examples**: Roboto, Open Sans, or your brand font
89
+
90
+
### Main Text Font
91
+
-**Use**: Body text and general content
92
+
-**Style**: Easy-to-read sans-serif or serif
93
+
-**Examples**: Inter, Source Sans Pro, or Georgia
94
+
95
+
### Technical/Monospace Font
96
+
-**Use**: Code snippets and inline commands
97
+
-**Style**: Fixed-width font for code readability
98
+
-**Examples**: Fira Code, JetBrains Mono, or Consolas
99
+
100
+
## 6. Preview and Save
101
+
102
+
Test your design choices:
103
+
104
+
1.**Save your changes** in the settings
105
+
2.**Preview your site** in both light and dark modes
106
+
3.**Check different pages** to ensure consistency
107
+
4.**Test on different devices** if possible
108
+
5.**Verify accessibility** of color combinations
109
+
110
+
## Design Examples
111
+
112
+
### Research Journal
113
+
-**Layout**: Grid – Centered
114
+
-**Primary Color**: Dark blue (#003366)
115
+
-**Secondary Color**: White (#FFFFFF)
116
+
-**Font**: Sans-serif for clean, professional appearance
117
+
118
+
### Lab Website
119
+
-**Layout**: Grid – Left
120
+
-**Primary Color**: University brand color
121
+
-**Secondary Color**: Light gray (#F5F5F5)
122
+
-**Font**: Modern sans-serif for readability
123
+
124
+
### Conference Site
125
+
-**Layout**: Normal
126
+
-**Primary Color**: Conference theme color
127
+
-**Secondary Color**: Complementary accent
128
+
-**Font**: Professional serif for academic tone
129
+
130
+
## Next Steps
131
+
132
+
-[Plan Your Site Design →](./planning.md)
133
+
-[Set Up Custom Domains →](./custom-domains.md)
134
+
-[Configure Site Navigation →](./navigation.md)
135
+
136
+
---
45
137
46
-
### 6. Save and Preview
47
-
- Save your changes.
48
-
- View the site in both light and dark modes to confirm visual consistency.
138
+
💡 **Tip:** Start with a simple, clean design and refine it over time. You can always update your theme as your brand evolves.
49
139
50
-
:::{note} Example
51
-
A research journal might use a clean **Grid – Centered** layout with a dark blue primary color (#003366), white secondary color (#FFFFFF), and a sans-serif body font.
52
-
:::
140
+
⚡ **Important:
141
+
Design Best Practices**
53
142
54
-
## Related Guides
55
-
-[Hero Unit & Background Images](planning.md)
56
-
-[Custom Domains](custom-domains.md)
57
-
-[Navigation & Page Structure](navigation.md)
143
+
- Ensure sufficient contrast between text and backgrounds
144
+
-Use consistent spacing and typography throughout
145
+
-Test your design on different screen sizes
146
+
-Keep your logo simple and recognizable at small sizes
0 commit comments