Developer Portal Home Management
Overview​
This tutorial explains how to manage the Home page of the Developer Portal. You’ll be able to set branding elements (favicon, logo), design promotional banners (slides), manage footer links, and upload custom styles. These settings help align your portal with company identity and improve developer experience.
Prerequisites​
You must have:
- Admin access to APIM Console > Admin > Home Management
- Properly sized image assets and logo files
- Footer information (URLs, copyright)
Step-by-Step Tutorial​
Step 1. Set Site Information​
| Field | Example |
|---|---|
| Site Name | SK Developers (auto-filled if already configured) |
Step 2. Upload Favicon​
- Upload a square image with 1:1 aspect ratio
- Actual display size is 16x16px
Example:
- File name: favicon-sk.png
- Dimensions: 64x64px
- File type: png
Use a simplified company logo or symbol for visibility at small sizes.
Step 3. Upload Logo Image​
- Upload a rectangular logo with auto width and max height 40px
- Recommended max size: 150px wide
Example:
- File name: logo-skapim-dark.svg
- Type: svg
- Dimensions: Auto width × 40px height
Step 4. Manage Slide Images​
- Recommended size: 2000px × 550px
- Each slide can be linked to an internal or external page
- You can reorder, toggle visibility, or delete
Mock Slides:
| Slide | Image | Link | Order | Active |
|---|---|---|---|---|
| 1 | slide-api-intro.jpg | /readme?page=intro | 1 | Checked |
| 2 | slide-openapi.png | /readme?page=docs | 2 | Checked |
| 3 | slide-auth.png | /readme?page=auth | 3 | Checked |
| 4 | slide-api-key.png | /readme?page=apikey | 4 | Unchecked |
| 5 | slide-monitoring.png | /readme?page=monitoring | 5 | Unchecked |
Use consistent aspect ratios to avoid layout issues.
Step 5. Set Slide Interval​
Select how often slide images change (1–30 seconds)
Example: Set interval to 2 seconds
Step 6. Configure Footer​
Footer Copyright| Field | Value |
|---|---|
| Text | COPYRIGHT © BY SKAPIM ALL RIGHTS RESERVED |
You can add Help/Contact/Terms/Custom links:
| Label | URL |
|---|---|
| About Us | https://skapim.co.kr/about |
| Help | https://skapim.co.kr/help |
| Contact | https://skapim.co.kr/contact |
| Terms & Conditions | https://skapim.co.kr/terms |
Click X to remove or use the edit icon to modify.
Step 7. Upload Custom Style Files​
You can upload:
- CSS files for theme override
- Images (e.g., custom backgrounds)
- Fonts (e.g., .ttf, .woff, etc.)
Example File Types:
- custom-dark.css
- corporate-banner.png
- Roboto-Regular.woff2
Accepted formats: css, jpg, jpeg, png, ico, tif, tiff, gif, bmp, raw, eot, ttf, woff, woff2
This allows advanced customization of the Developer Portal’s appearance.
Step 8. Save All Changes​
After all changes are made, click the Save button at the bottom.
Best Practices​
- Use compressed, optimized images to improve loading time
- Ensure all slide links point to valid internal or external documentation
- Preview uploaded assets across multiple devices
- Maintain branding consistency (color palette, fonts) via custom CSS
- Keep slides and footer content updated as portal evolves