Login URL: https://app.cloudcannon.com
Welcome to CSE Support
This guide will help you manage content on the Coastal Science & Engineering website using CloudCannon, our content management system. You'll also find our design standards for reference.
Last updated: September 2026
Support
This page is password protected. Please enter the password to continue.
CloudCannon Tutorials
Learn how to use CloudCannon to manage your website content efficiently.
Getting Started
Video placeholder: Getting Started with CloudCannon
Replace with your actual video embed code
Menu Promos
What are Menu Promos?
Menu Promos are the featured cards that appear in your desktop navigation dropdowns. Each card includes an image, title, description, and link to help guide visitors to important pages.
Editing Menu Promos
- Access the editor: In the CloudCannon sidebar, click Menu Promos. You'll see a list of all existing promo cards. Click the card you want to edit.
- Title: Type your new heading text in the Title field.
- Description: Add a single brief sentence—this appears below the title on the live site.
- Image: Click the + button to upload a new image or select an existing one. A preview will appear to confirm your selection.
- URL: Click the + button, choose "Link to a page," and select from your existing pages. Alternatively, type the path manually using this format:
/about/story/or/solutions/beach-nourishment/ - Save: Click Save in the top-right corner, check the box next to your edited card, and click Save selected. Your changes go live immediately.
Important: When the editor opens, only use the left column. The right column is for blogging and doesn't apply to promo cards. Don't use the Clear button (X) on images unless you're immediately replacing them. Only use internal paths starting with
/ for URLs.
Team
Video placeholder: Adding Team Members
Replace with your actual video embed code
Team Member Information
- Name: Full name
- Title: Job title/position
- Photo: Professional headshot (square, 600x600px recommended)
- Bio: Brief professional biography
- Email: Contact email (optional)
- LinkedIn: Profile URL (optional)
Solutions
Video placeholder: Adding & Editing Solutions
Replace with your actual video embed code
Solution Fields
- Title: Solution name
- Description: Brief overview
- Content: Detailed solution information
- Icon: Solution icon (optional)
- Images: Supporting images (recommended: 1200x800px)
Projects
Video placeholder: Adding & Editing Projects
Replace with your actual video embed code
Project Fields
- Title: Project name
- Location: Geographic location
- Client: Client name (optional)
- Year: Completion year
- Challenge: Problem statement
- Approach: Your solution
- Impact: Results achieved
- Images: Before/after photos (recommended: 1200x800px)
- Testimonial: Client quote (optional)
FAQs
Video placeholder: Adding & Editing FAQs
Replace with your actual video embed code
FAQ Fields
- Question: The FAQ question
- Answer: The detailed answer
- Category: Optional category for grouping FAQs
- Order: Display order on the page
Contact
Video placeholder: Managing Contact Information
Replace with your actual video embed code
Contact Fields
- Office Name: Location or office name
- Address: Physical address
- Phone: Contact phone number
- Email: Contact email address
- Hours: Office hours (optional)
Troubleshooting
Common issues and solutions when working with CloudCannon.
Content Not Saving
- Check your internet connection
- Look for error messages in the CloudCannon interface
- Try refreshing the page and saving again
- Verify you have the correct permissions for the content
Images Not Uploading
- Check file size (should be under 500KB for optimal performance)
- Verify the image format (WEBP, JPG, or PNG)
- Ensure the image dimensions meet the recommended sizes
- Try a different browser if the issue persists
Formatting Issues
- Use the formatting toolbar instead of pasting formatted text
- Paste as plain text first, then apply formatting
- Check for hidden characters or special formatting from other sources
- Refer to the design standards for proper heading and text styles
Can't Find a Page or Section
- Use the search function in CloudCannon
- Check the correct collection (News, Projects, Team, etc.)
- Verify you're looking in the right site structure
- Contact support if content seems to be missing
Need Help?
If you need additional assistance or have questions, we're here to help.
Design Standards
Reference these standards to maintain consistent design across all content.
Images
Follow these standards to ensure images look great and load quickly across all devices.
- Aspect Ratio: Use 16:9 ratio for all hero and feature images
- Format: WEBP preferred for best compression, JPG/PNG acceptable
- Resolution: Minimum 1200px width for featured images
- File Size: Keep under 500KB for optimal performance (compress before uploading)
- Alt Text: Always include descriptive alt text for accessibility
- Naming Convention: Use descriptive, lowercase names with hyphens (e.g., beach-erosion-project-hero.webp)
Recommended Dimensions
- Hero Images: 1200x675px (16:9 ratio)
- Project Images: 1200x675px (16:9 ratio)
- Team Photos: 600x600px (1:1 square ratio)
- News Images: 1200x675px (16:9 ratio)
Important: Images that don't follow the 16:9 aspect ratio may appear cropped or distorted on the website. Always check image dimensions before uploading.
Color Palette
Sky Blue
#51ABE3
Used for: CTAs, links, accents
Teal
#2FC0CC
Used for: Section labels, highlights
Light Blue
#C9EAF6
Used for: Page header backgrounds (detail pages)
Navy Blue
#273B81
Used for: Headlines, titles
Charcoal
#333333
Used for: Body text
Gray
#666666
Used for: Secondary text, labels
Light Gray
#F8F9FA
Used for: Section backgrounds
White
#FFFFFF
Used for: Backgrounds, cards
Brand Gradient
#273B81 → #22865F
Used for: Backgrounds, buttons, accents
Typography
The CSE website uses Inter as its primary typeface for clean, modern readability across all devices.
Font Family
Inter
Primary font for all text
Heading 1
Protecting Coastal Communities
36px mobile / 56px desktop / Bold (700)
Heading 2
Our Approach
32px mobile / 48px desktop / Bold (700)
Heading 3
Beach Nourishment
20px mobile / 28px desktop / Semibold (600)
Heading 4
Project Details
18px mobile / 20px desktop / Semibold (600)
Lead Text
This guide will help you manage content on the Coastal Science & Engineering website using CloudCannon, our content management system.
20px / Normal (400)
Body Text
Coastal Science & Engineering specializes in comprehensive coastal engineering solutions, from erosion control to long-term coastal planning.
16px (base) / 18px (tablet+) / Normal (400)
Section Label
Our Services
20px / Medium (500)
Icons
The CSE website uses Phosphor Icons for a clean, consistent iconography system. Phosphor offers over 1,200+ icons in six weights, providing flexibility for various design needs.
Logo Usage
Primary Logo (Light Background)
Use on white or light-colored backgrounds
Logo on Dark Background
Use white/inverted version on dark backgrounds