> ## Documentation Index > Fetch the complete documentation index at: https://developers.appstle.com/llms.txt > Use this file to discover all available pages before exploring further. # Get custom CSS for customer portal > Retrieves the custom CSS styling configuration for the customer portal. This endpoint returns all custom CSS rules that have been configured to customize the appearance, layout, and branding of the subscription customer portal. **What is Custom CSS?** Custom CSS allows merchants to fully customize the visual appearance of their customer portal beyond the basic theme settings. This enables complete brand alignment and creates a seamless experience that matches the merchant's main store design. **Custom CSS Capabilities:** - **Layout Customization**: - Modify page layouts and spacing - Adjust grid and flexbox configurations - Control responsive breakpoints - Customize navigation and sidebars - **Typography**: - Custom fonts and font families - Font sizes, weights, and line heights - Letter spacing and text transforms - Heading and paragraph styles - **Colors and Branding**: - Brand color palette application - Custom background colors and gradients - Button and link styling - Hover and focus states - Border colors and shadows - **Component Styling**: - Subscription card appearances - Form input styling - Button designs and interactions - Modal and dialog boxes - Navigation menus - Product images and thumbnails - **Advanced Features**: - CSS animations and transitions - Media queries for responsive design - Pseudo-elements and pseudo-classes - Custom icons using CSS - Transform and filter effects **CSS Structure:** The returned CSS includes: - Global styles for portal-wide consistency - Component-specific styles - Responsive design rules - Theme overrides - Custom animations - Print styles (optional) **Common CSS Selectors Available:** ```css /* Portal container */ .subscription-portal { } /* Subscription cards */ .subscription-card { } .subscription-card-header { } .subscription-card-body { } /* Buttons */ .btn-primary { } .btn-secondary { } .btn-cancel { } /* Forms */ .form-control { } .form-group { } .form-label { } /* Navigation */ .portal-nav { } .nav-item { } /* Product displays */ .product-item { } .product-image { } .product-title { } ``` **Use Cases:** - Apply custom branding to match main store design - Create unique visual experiences for different customer segments - Implement seasonal or promotional themes - Enhance mobile responsiveness - Add accessibility improvements (high contrast, larger fonts) - A/B test different portal designs - Integrate with design systems - Implement dark mode or theme switching **Important Notes:** - CSS is sanitized for security (XSS prevention) - Certain properties may be restricted for security reasons - External resources (fonts, images) must use HTTPS - CSS is cached for performance - changes may take a few minutes to propagate - Invalid CSS syntax is automatically filtered out - Some core portal elements have !important styles that cannot be overridden **Best Practices:** - Use specific selectors to avoid conflicts - Test across different browsers and devices - Keep CSS organized with comments - Use CSS variables for maintainability - Minify CSS for production performance - Consider accessibility in color choices (WCAG compliance) - Provide fallbacks for advanced CSS features **Security Considerations:** - CSS is sanitized to prevent code injection - External URLs are validated - JavaScript in CSS is blocked (e.g., expression(), behavior()) - Data URIs are validated for malicious content **Authentication:** Requires valid X-API-Key header ## OpenAPI ````yaml /subscription/admin-api-swagger.json get /api/external/v2/subscription-custom-csses/{id} openapi: 3.0.1 info: description: >- Comprehensive API documentation for managing subscriptions, payments, and related operations. These APIs allow you to programmatically manage subscription lifecycles, handle payments, configure products, and integrate subscription functionality into your applications. title: Admin APIs version: 0.0.1 servers: - url: https://subscription-admin.appstle.com security: [] tags: - description: >- Core APIs for managing the complete subscription lifecycle including creation, updates, pausing, resuming, and cancellation of subscriptions. name: Subscription Management - description: >- APIs for managing subscription payment methods, processing payments, handling payment retries, and updating billing information. name: Subscription Payments - description: >- APIs for managing subscription contracts including delivery schedules, pricing, order notes, billing cycles, and shipping addresses. name: Subscription Contracts - description: >- APIs for managing products within subscriptions including adding, removing, updating quantities, and swapping products. name: Subscription Products - description: >- APIs for handling billing operations, payment processing, and financial transactions related to subscriptions. name: Billing & Payments - description: >- APIs for managing discounts and promotional codes applied to subscriptions. name: Subscription Discounts - description: >- APIs for managing one-time add-on products that can be purchased alongside recurring subscription items. name: Subscription One-Time Products - description: >- APIs for managing subscription plans, pricing tiers, and plan configurations. name: Subscription Plans - description: >- APIs for managing customizable product boxes and bundles where customers can select multiple items. name: Build-a-Box & Bundles - description: >- APIs for managing the product catalog including product information, variants, and inventory. name: Product Catalog - description: >- APIs for managing operational settings, configurations, and administrative functions. name: Operations & Settings - description: >- APIs powering the customer-facing portal where subscribers can manage their own subscriptions. name: Customer Portal - description: APIs for managing customer information, profiles, and account details. name: Customers - description: >- APIs for retrieving aggregated subscription data, customer subscription history, and account-level subscription information. name: Subscription Data - description: >- APIs for managing delivery profiles, shipping rates, free shipping configuration, and delivery method options on subscriptions. name: Delivery & Shipping - description: >- APIs for managing storefront customization including custom CSS, theme settings, label translations, and merchant-defined widget configuration. name: Customization - description: >- APIs for configuring cancellation flows, retention offers, cancellation reason management, and win-back automation. name: Customer Retention paths: /api/external/v2/subscription-custom-csses/{id}: get: tags: - Customization - Customer Portal summary: Get custom CSS for customer portal description: >- Retrieves the custom CSS styling configuration for the customer portal. This endpoint returns all custom CSS rules that have been configured to customize the appearance, layout, and branding of the subscription customer portal. **What is Custom CSS?** Custom CSS allows merchants to fully customize the visual appearance of their customer portal beyond the basic theme settings. This enables complete brand alignment and creates a seamless experience that matches the merchant's main store design. **Custom CSS Capabilities:** - **Layout Customization**: - Modify page layouts and spacing - Adjust grid and flexbox configurations - Control responsive breakpoints - Customize navigation and sidebars - **Typography**: - Custom fonts and font families - Font sizes, weights, and line heights - Letter spacing and text transforms - Heading and paragraph styles - **Colors and Branding**: - Brand color palette application - Custom background colors and gradients - Button and link styling - Hover and focus states - Border colors and shadows - **Component Styling**: - Subscription card appearances - Form input styling - Button designs and interactions - Modal and dialog boxes - Navigation menus - Product images and thumbnails - **Advanced Features**: - CSS animations and transitions - Media queries for responsive design - Pseudo-elements and pseudo-classes - Custom icons using CSS - Transform and filter effects **CSS Structure:** The returned CSS includes: - Global styles for portal-wide consistency - Component-specific styles - Responsive design rules - Theme overrides - Custom animations - Print styles (optional) **Common CSS Selectors Available:** ```css /* Portal container */ .subscription-portal { } /* Subscription cards */ .subscription-card { } .subscription-card-header { } .subscription-card-body { } /* Buttons */ .btn-primary { } .btn-secondary { } .btn-cancel { } /* Forms */ .form-control { } .form-group { } .form-label { } /* Navigation */ .portal-nav { } .nav-item { } /* Product displays */ .product-item { } .product-image { } .product-title { } ``` **Use Cases:** - Apply custom branding to match main store design - Create unique visual experiences for different customer segments - Implement seasonal or promotional themes - Enhance mobile responsiveness - Add accessibility improvements (high contrast, larger fonts) - A/B test different portal designs - Integrate with design systems - Implement dark mode or theme switching **Important Notes:** - CSS is sanitized for security (XSS prevention) - Certain properties may be restricted for security reasons - External resources (fonts, images) must use HTTPS - CSS is cached for performance - changes may take a few minutes to propagate - Invalid CSS syntax is automatically filtered out - Some core portal elements have !important styles that cannot be overridden **Best Practices:** - Use specific selectors to avoid conflicts - Test across different browsers and devices - Keep CSS organized with comments - Use CSS variables for maintainability - Minify CSS for production performance - Consider accessibility in color choices (WCAG compliance) - Provide fallbacks for advanced CSS features **Security Considerations:** - CSS is sanitized to prevent code injection - External URLs are validated - JavaScript in CSS is blocked (e.g., expression(), behavior()) - Data URIs are validated for malicious content **Authentication:** Requires valid X-API-Key header operationId: getSubscriptionCustomCssV2 parameters: - description: Id in: path name: id required: true schema: format: int64 type: integer - description: API Key (Deprecated - Use Header X-API-Key instead) in: query name: api_key required: false schema: type: string - in: header name: X-API-Key required: false schema: type: string responses: '200': content: application/json: examples: Success Response: description: Success Response value: |- { "id": 12345, "shop": "example-shop.myshopify.com", "customCss": "/* Global Portal Styles */\n" + ".subscription-portal {\n" + " font-family: 'Helvetica Neue', Arial, sans-serif;\n" + " background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n" + " min-height: 100vh;\n" + "}\n\n" + "/* Subscription Cards */\n" + ".subscription-card {\n" + " border-radius: 12px;\n" + " box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n" + " background: white;\n" + " padding: 24px;\n" + " margin-bottom: 16px;\n" + " transition: transform 0.2s ease, box-shadow 0.2s ease;\n" + "}\n\n" + ".subscription-card:hover {\n" + " transform: translateY(-2px);\n" + " box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n" + "}\n\n" + "/* Primary Button Styling */\n" + ".btn-primary {\n" + " background-color: #4A90E2;\n" + " border-color: #4A90E2;\n" + " color: white;\n" + " font-weight: 600;\n" + " padding: 12px 24px;\n" + " border-radius: 6px;\n" + " transition: all 0.3s ease;\n" + "}\n\n" + ".btn-primary:hover {\n" + " background-color: #357ABD;\n" + " border-color: #357ABD;\n" + " transform: scale(1.02);\n" + "}\n\n" + "/* Form Inputs */\n" + ".form-control {\n" + " border: 2px solid #E0E0E0;\n" + " border-radius: 6px;\n" + " padding: 10px 14px;\n" + " font-size: 14px;\n" + "}\n\n" + ".form-control:focus {\n" + " border-color: #4A90E2;\n" + " box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);\n" + " outline: none;\n" + "}\n\n" + "/* Responsive Design */\n" + "@media (max-width: 768px) {\n" + " .subscription-card {\n" + " padding: 16px;\n" + " }\n" + " .btn-primary {\n" + " width: 100%;\n" + " }\n" + "}", "enabled": true, "version": 2, "lastModified": "2024-02-20T14:45:00Z", "createdAt": "2024-01-15T10:30:00Z", "updatedAt": "2024-02-20T14:45:00Z" } schema: $ref: '#/components/schemas/SubscriptionCustomCssDTO' description: Custom CSS successfully retrieved '401': content: application/json: example: detail: Valid X-API-Key header is required status: 401 title: Authentication required type: https://example.com/errors/unauthorized description: Authentication required '403': content: application/json: example: detail: API key does not have permission to view custom CSS settings status: 403 title: Insufficient permissions type: https://example.com/errors/forbidden description: Insufficient permissions to view custom CSS '404': content: application/json: example: detail: No custom CSS has been configured for this shop status: 404 title: CSS not found type: https://example.com/errors/not-found description: Custom CSS not found - No custom CSS has been configured components: schemas: SubscriptionCustomCssDTO: properties: bundlingCSS: type: string bundlingIframeCSS: type: string customCss: type: string customerPoratlCSS: type: string id: format: int64 type: integer shop: type: string required: - shop type: object ````