Getting Started
Your profile theme controls how your NerdyTag profile looks to visitors. Customize colors, fonts, images, and styling to match your brand and personality.
Accessing the Customization Page
- Log in to your NerdyTag account
- Navigate to your Dashboard
- Click on Customize in the sidebar menu
- You'll see a live preview of your changes on desktop
📌 Note: All changes are previewed in real-time! Don't forget to click "Save Theme" when you're happy with your design.
Choosing a Template
Templates are pre-designed themes that give you a great starting point for customization.
How to Apply a Template
- Scroll to the Choose a Template section at the top
- Browse through the available template previews
- Click on any template to apply it instantly
- The template colors, fonts, and styles will be applied to your profile
- Customize individual elements to make it your own
💡 Tip: Templates are just starting points! Feel free to customize any aspect after applying a template.
Color Customization
Colors are the foundation of your profile's visual identity. Choose colors that reflect your brand and ensure good readability.
Profile Colors
| Color Element | Purpose | Usage |
|---|---|---|
| Profile Text | Main text color | Used for profile description and content |
| Social Icon Color | Social media icons | Icon color for social platforms |
How to change: Click on the color picker box to open a color selector. Choose your desired color or enter a hex code.
Button Colors
| Color Element | Purpose |
|---|---|
| Button Color | Main button background color |
| Button Text | Text color inside buttons |
| Button Border | Border color around buttons |
| Social Button | Background for social icon buttons (can be transparent) |
⚠️ Important: Ensure button text has good contrast with the button background for readability!
Background Colors
Your background color is the foundation that everything else sits on. Choose a color that complements your overall design.
- Background Color: The main color behind your profile content
- Can be combined with gradients for more visual interest
- Works with or without background images
Gradient Effects
Gradients create smooth color transitions that add depth and visual interest to your profile.
Background Gradients
- Enable the Use Gradient toggle in Background Colors
- Choose a Secondary Color to blend with your background
- Select a Direction (left to right, top to bottom, diagonal, etc.)
- Or use Quick Presets for instant professional gradient combinations
Button Gradients
- Scroll to Button Customization section
- Enable Use Gradient Buttons
- Set your secondary button color
- Choose gradient direction
- Apply quick presets for instant gradient styles
- Left to Right
- Right to Left
- Top to Bottom
- Bottom to Top
- Diagonal variations
💡 Tip: Gradients work best with colors that are similar in brightness or complement each other on the color wheel.
Images
Banner Image
Your banner appears at the top of your profile and makes a strong first impression.
Uploading a Banner
- Scroll to the Banner section
- Click the upload area or drag and drop an image
- Crop your image to the recommended 8:3 aspect ratio
- Click "Crop & Upload" to save your banner
Banner Specifications
| Specification | Recommendation |
|---|---|
| Recommended Size | 1200 x 300 pixels |
| Aspect Ratio | 8:3 (wide banner) |
| File Format | JPG, PNG, GIF |
| Maximum Size | 10MB |
Banner Masking PREMIUM
Apply a stylish mask effect to your banner for a more professional look. This feature is available to premium users.
Background Image
Add a background image to your profile for additional visual interest.
Uploading a Background
- Navigate to the Background section
- Click the upload area or drag and drop your image
- Image will be applied immediately
- Configure display settings as needed
Background Display Options
| Setting | Description |
|---|---|
| Repeat Image | Tile the image across the profile or display it once |
| Display Size | Auto (original size), Stretch Height, or Cover/Fit |
| Background Blur | Add blur effect from 0-100px for subtle backgrounds |
💡 Tip: Use background blur (20-40px) to make text more readable over busy background images.
Avatar Settings
Customize how your profile avatar appears.
Avatar Border
Enable the avatar border to add a colored outline around your profile picture, making it stand out more prominently.
- Toggle Enable Avatar Border on or off
- Border uses your button color for consistency
- Adds professional polish to your profile
Typography
Typography choices significantly impact your profile's readability and personality.
Font Family
Choose from a curated selection of web-safe fonts:
- Click the Choose Font dropdown
- Browse available fonts with live previews
- Select your preferred font
- Font applies to all text on your profile
Font Weight
Control how bold or light your text appears:
| Weight | Best For |
|---|---|
| Light | Elegant, minimal designs |
| Normal | Most profiles, good readability |
| Medium | Slightly bolder, professional |
| Semi Bold | Strong emphasis |
| Bold | Maximum impact, attention-grabbing |
| Extra Bold | Very strong, bold statements |
💡 Tip: Use the Live Preview section to see exactly how your chosen font and weight will look on your profile.
Button Customization
Customize every aspect of your profile buttons to match your style.
Border Settings
Border Width
- Range: 0-10 pixels
- 0px = no border
- 2-3px = subtle definition
- 5-10px = bold, prominent borders
Border Style
| Style | Appearance |
|---|---|
| Solid | Continuous line (most common) |
| Dashed | Evenly spaced dashes |
| Dotted | Series of dots |
| Double | Two parallel lines |
Border Radius
- 0px: Perfect squares/rectangles
- 5-10px: Slightly rounded corners (modern look)
- 15-20px: Very rounded (friendly, approachable)
- 25px: Maximum roundness (pill shape)
Layout Settings
Social Links Position
Choose where your social media icons appear:
- Top Position: Social icons appear above your main content
- Bottom Position: Social icons appear below your links
Social Button Style
- Fully Round: Perfect circles for social icons
- Square with Rounded Corners: Squares with soft edges
📊 Preview: The Button Preview section shows a live sample of your button with all current settings applied!
Premium Features
Unlock advanced customization options with a premium subscription.
Advanced Button Styles PREMIUM
Apply 3D effects to your buttons for a more dynamic appearance:
- Raised Right: Buttons appear elevated with a shadow on the right
- Raised Left: Buttons appear elevated with a shadow on the left
- Default: Flat button appearance
Remove Branding PREMIUM
Remove the NerdyTag logo and "Powered by" text from your profile footer for a completely custom branded experience.
Custom CSS PREMIUM
For advanced users: Add custom CSS code to create completely unique styling that goes beyond the standard customization options.
- Access the CSS Editor from the Customize page
- Write custom CSS rules
- Preview changes in real-time
- Save and apply to your profile
⚠️ Note: Custom CSS requires knowledge of CSS syntax. Incorrect CSS may affect your profile's appearance.
Design Tips
Color Harmony
- ✓ Ensure good contrast between text and background colors
- ✓ Use button text colors that stand out against button backgrounds
- ✓ Consider your brand colors when choosing your color scheme
- ✓ Test your profile on both light and dark screens
- ✓ Limit your palette to 3-4 main colors for cohesion
Typography Best Practices
- ✓ Choose fonts that match your brand personality
- ✓ Ensure text is readable at all sizes
- ✓ Use font weight to create visual hierarchy
- ✓ Avoid overly decorative fonts for body text
Image Guidelines
- ✓ Use high-quality images for best results
- ✓ Keep banner images under 10MB for fast loading
- ✓ Test background image blur for text readability
- ✓ Ensure images are appropriate for your audience
- ✓ Match image colors to your overall theme
Button Design
- ✓ Make buttons clearly clickable
- ✓ Use consistent button styling throughout
- ✓ Ensure button text is always readable
- ✓ Test gradient effects for visibility
- ✓ Consider mobile users when sizing buttons
💡 Pro Tip: Start with a template, make small changes, and save frequently. You can always use "Reset Theme" to start over!
Troubleshooting
Changes not saving?
- ✓ Click the "Save Theme" button at the bottom of the page
- ✓ Wait for the success confirmation message
- ✓ Check your internet connection
- ✓ Try refreshing the page and making changes again
Colors not displaying correctly?
- ✓ Ensure you've saved your theme after making changes
- ✓ Clear your browser cache and refresh
- ✓ Check if gradients are enabled/disabled as intended
- ✓ Verify hex color codes are valid (6 characters)
Images not uploading?
- ✓ Check file size is under 10MB
- ✓ Ensure file format is JPG, PNG, or GIF
- ✓ Try using a different image
- ✓ Check your internet connection
- ✓ Disable browser extensions that might block uploads
Preview not updating?
- ✓ Preview updates in real-time on desktop
- ✓ Mobile users: use the preview button
- ✓ Refresh the page if preview stops updating
- ✓ Check browser console for errors
Made a mistake?
- ✓ Click "Reset Theme" to restore last saved version
- ✓ Changes only apply after clicking "Save Theme"
- ✓ Consider applying a new template to start fresh
Need more help?
📧 Contact Support: If you're experiencing issues not covered here, please contact our support team with:
- Description of the issue
- Browser and device you're using
- Screenshots if applicable
- Steps to reproduce the problem