# General Welcome to the SleekWP documentation. These guides are designed to help you get the most out of all SleekWP plugins, providing detailed explanations and practical examples for common tasks and advanced customizations. Whether you're using a single plugin or the entire suite, you'll find the information you need here. ## About SleekWP SleekWP is a suite of innovative WordPress plugins designed to enhance your website's functionality, streamline your workflow, and empower you to build more engaging and powerful online experiences. Each plugin is crafted with a focus on ease of use, robust features, and seamless integration with WordPress. ## Individual Plugin Documentation Find detailed guides for each of our plugins: - SleekAI: [View SleekAI Documentation](https://fabrikat.local/sleek/ai/documentation/) - SleekMotion: [View SleekMotion Documentation](https://fabrikat.local/sleek/motion/documentation/) - SleekPixel: [View SleekPixel Documentation](https://fabrikat.local/sleek/pixel/documentation/) - SleekView: [View SleekView Documentation](https://fabrikat.local/sleek/view/documentation/) ## Getting Support If you have any questions, encounter issues, or need assistance with any of our SleekWP plugins, please don't hesitate to reach out to us. - **Email**: [hi@sleekwp.com](mailto:hi@sleekwp.com) We're here to help you make the most of SleekWP! --- # White Label White-labeling allows you to rebrand the SleekWP plugins, presenting them as your own to your clients or users. This is perfect for agencies and developers looking to offer a seamlessly integrated and branded experience within the WordPress admin area. ## How It Works The white-labeling functionality is controlled via a WordPress filter: `sleekwp/whiteLabel`. By adding this filter, you can provide an array of settings that define your custom branding, including names, logos, and even admin menu icons. ## Implementing White-Labeling To white-label the SleekWP plugins, you'll add a filter to your theme's `functions.php` file or a custom plugin. This filter should return an array with your desired branding configuration. ```php add_filter( "sleekwp/whiteLabel", function () { return [ "enabled" => true, "app" => [ "type" => "total", // Can be "total" or "parts" "colors" => [ "primary" => "217 100% 47.6%", // Example HSL for primary color accent // Add other color overrides here, e.g., "background" => "0 0% 98%" ], "logo" => [ "total" => [ // Used when type is "total" "logoUrl" => "https://your-brand.com/images/logo-full.svg", ], "parts" => [ // Used when type is "parts" "logoUrl" => "https://your-brand.com/images/logo-square.svg", ], ], "names" => [ "total" => [ // Used when type is "total" "plugins" => [ "ai" => "Your AI Name", "motion" => "Your Animation Tool", "pixel" => "Your Design Suite", "view" => "Your Data Manager", ], ], "parts" => [ // Used when type is "parts" "prefix" => "YourBrand", // e.g., "YourBrandAI", "YourBrandAnimate" "plugins" => [ "ai" => "AI", "motion" => "Animate", "pixel" => "Design", "view" => "Layers", ], ], ], ], "wp" => [ "admin" => [ "menu" => [ "parent" => [ "text" => "Your Brand WP", // Main parent menu item text "icon" => "Cjxzdmcgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSJhcHBzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibXVsdGl0YXNrYWkvbG9nby1ncmF5IiBmaWxsPSIjQTdBQUFEIj4KICAgICAgICAgICAgPHBhdGggZD0iTTM2NS4yMTc1NzIsNy4yNTQ2NzMxMWUtMTUgQzQxNi4yNTcwMiwtNC4yMTUxNzRlLTE1IDQzNC43NjUxNTcsNS4zMTQyNjYyNCA0NTMuNDI0NDE3LDE1LjI5MzM0NzMgQzQ3Mi4wODM2NzYsMjUuMjcyNDI4MyA0ODYuNzI3NTcyLDM5LjkxNjMyNDIgNDk2LjcwNjY1Myw1OC41NzU1ODM1IEM1MDYuNjg1NzM0LDc3LjIzNDg0MjcgNTEyLDk1Ljc0Mjk3OTggNTEyLDE0Ni43ODI0MjggTDUxMiwzNjUuMjE3NTcyIEM1MTIsNDE2LjI1NzAyIDUwNi42ODU3MzQsNDM0Ljc2NTE1NyA0OTYuNzA2NjUzLDQ1My40MjQ0MTcgQzQ4Ni43Mjc1NzIsNDcyLjA4MzY3NiA0NzIuMDgzNjc2LDQ4Ni43Mjc1NzIgNDUzLjQyNDQxNyw0OTYuNzA2NjUzIEM0MzQuNzY1MTU3LDUwNi42ODU3MzQgNDE2LjI1NzAyLDUxMiAzNjUuMjE3NTcyLDUxMiBMMTQ2Ljc4MjQyOCw1MTIgQzk1Ljc0Mjk3OTgsNTEyIDc3LjIzNDg0MjcsNTA2LjY4NTczNCA1OC41NzU1ODM1LDQ5Ni43MDY2NTMgQzM5LjkxNjMyNDIsNDg2LjcyNzU3MiAyNS4yNzI0MjgzLDQ3Mi4wODM2NzYgMTUuMjkzMzQ3Myw0NTMuNDI0NDE3IEM1LjMxNDI2NjI0LDQzNC43NjUxNTcgMCw0MTYuMjU3MDIgMCwzNjUuMjE3NTcyIEw3LjI1NDY3MzExZS0xNSwxNDYuNzgyNDI4IEMtNC4yMTUxNzRlLTE1LDk1Ljc0Mjk3OTggNS4zMTQyNjYyNCw3Ny4yMzQ4NDI3IDE1LjI5MzM0NzMsNTguNTc1NTgzNSBDMjUuMjcyNDI4MywzOS45MTYzMjQyIDM5LjkxNjMyNDIsMjUuMjcyNDI4MyA1OC41NzU1ODM1LDE1LjI5MzM0NzMgQzc3LjIzNDg0MjcsNS4zMTQyNjYyNCA5NS43NDI5Nzk4LDQuMjE1MTc0ZS0xNSAxNDYuNzgyNDI4LC03LjI1NDY3MzExZS0xNSBMMzY1LjIxNzU3Miw3LjI1NDY3MzExZS0xNSBaIE0xODUuODQxMDQ4LDEyMSBMMTA1LDEyMSBMMTA1LDM5MSBMMTY4LjU2NTA2NiwzOTEgTDE2OC41NjUwNjYsMjI0LjIyNzUzOSBMMTcwLjgwNjk4NywyMjQuMjI3NTM5IEwyMzUuNjkwODMsMzg5LjI4NjEzMyBMMjc2LjMwOTE3LDM4OS4yODYxMzMgTDM0MS4xOTMwMTMsMjI1LjE1MDM5MSBMMzQzLjQzNDkzNCwyMjUuMTUwMzkxIEwzNDMuNDM0OTM0LDM5MSBMNDA3LDM5MSBMNDA3LDEyMSBMMzI2LjE1ODk1MiwxMjEgTDI1Ny41ODI1MzMsMjg4LjE2Nzk2OSBMMjU0LjQxNzQ2NywyODguMTY3OTY5IEwxODUuODQxMDQ4LDEyMSBaIiBpZD0iQ29tYmluZWQtU2hhcGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==", // Base64 encoded SVG string ], "plugins" => [ // Names for plugin sub-menu items if "type" is "parts" or if parent menu is different "ai" => "AI Tools", "motion" => "Animation Settings", "pixel" => "Design Hub", "view" => "Data Views", ], ], ], ], ]; } ); ``` ## Configuration Details ### Root Level - **`enabled`** (bool): Set to `true` to activate white-labeling. ### App Configuration This section controls the branding within the plugin interfaces themselves. - **`type`** (string): Determines the branding strategy. - **`"total"`**: Uses a single comprehensive logo (`app.logo.total.logoUrl`) and full names for each plugin (`app.names.total.plugins`). This is suitable if you want to completely rebrand the suite under one umbrella. - **`"parts"`**: Uses a smaller, often square logo (`app.logo.parts.logoUrl`) combined with a prefix (`app.names.parts.prefix`) and individual plugin names (`app.names.parts.plugins`). This creates a consistent but modular branding, e.g., ` ` (like "YourBrandAI"). - **`colors`** (array): An associative array to override default UI colors. See the "Customizing Colors" section below for details. - **`logo`** (array): - **`total.logoUrl`** (string): URL to your full brand logo, used when `app.type` is `"total"`. - **`parts.logoUrl`** (string): URL to your compact/square brand logo, used when `app.type` is `"parts"`. - **`names`** (array): - **`total.plugins`** (array): Associative array mapping SleekWP plugin slugs (`ai`, `motion`, `pixel`, `view`) to your desired full names when `app.type` is `"total"`. - **`parts.prefix`** (string): A prefix string used before each plugin name when `app.type` is `"parts"`. - **`parts.plugins`** (array): Associative array mapping SleekWP plugin slugs to your desired individual names when `app.type` is `"parts"`. These names will be appended to the `prefix`. ### Customizing Colors The `app.colors` array in your filter allows you to override the default color scheme used by SleekWP plugin interfaces. These keys directly map to CSS custom properties (variables) that define the look and feel of the plugins. When you specify a color in the filter, you only need to use the part of the CSS variable name that comes after `--sleek-`. For example, to change the primary color (`--sleek-primary`), you would use the key `primary` in your `colors` array. Most color values should be provided as HSL strings (e.g., `"240 6% 10%"`). Here are the available CSS variables you can customize. For each, use the key in the `colors` array that matches the name after `--sleek-`. ```css --sleek-total: 0 100% 0%; --sleek-background: 0 0% 100%; --sleek-background-reverse: 0 0% 100%; --sleek-foreground: 240 10% 4%; --sleek-background-secondary: 240 5% 97%; --sleek-foreground-secondary: 240 5% 96%; --sleek-card: 0 0% 100%; --sleek-card-foreground: 240 10% 4%; --sleek-primary: 240 6% 10%; --sleek-primary-foreground: 0 0% 98%; --sleek-secondary: 240 5% 96%; --sleek-secondary-foreground: 240 6% 10%; --sleek-muted: 240 5% 96%; --sleek-muted-foreground: 240 4% 36%; --sleek-accent: 240 5% 96%; --sleek-accent-foreground: 240 6% 10%; --sleek-success: 160 84% 39%; --sleek-success-foreground: 0 0% 98%; --sleek-destructive: 0 84% 60%; --sleek-destructive-foreground: 0 0% 98%; --sleek-border: 240 6% 90%; --sleek-border-secondary: 240 6% 90%; --sleek-ring: 240 10% 4%; --sleek-ring-offset: var(--sleek-background); --sleek-textarea: 240 6% 100%; --sleek-textarea-alt: 240 6% 92%; --sleek-radius: 0.5rem; --sleek-scrollbar: 240 6% 72%; ``` Note for `ring-offset`: If customizing through the filter, provide an HSL color string (e.g., `"0 0% 100%"`). This replaces the default CSS behavior which uses `var(--sleek-background)`. Note for `radius`: This expects a CSS size string, not an HSL color (e.g., `"0.5rem"`, `"8px"`). Example usage in the filter: ```php // ... inside your add_filter callback ... "app" => [ // ... other app settings like type, logo, names ... "colors" => [ "primary" => "217 100% 47.6%", // Overrides --sleek-primary "background" => "0 0% 98%", // Overrides --sleek-background "foreground" => "240 10% 10%", // Overrides --sleek-foreground "radius" => "0.75rem" // Overrides --sleek-radius // ... add other color/value keys as needed ], ], // ... ``` ### WP Configuration This section controls how the plugins are presented within the WordPress admin area. - **`admin.menu`** (array): - **`parent.text`** (string): The text for the main parent menu item in the WordPress admin sidebar (e.g., "Your Brand Tools"). - **`parent.icon`** (string): A base64 encoded SVG string for the parent menu icon. You can use an online converter to get this from your SVG file. - **`plugins`** (array): Associative array mapping SleekWP plugin slugs to the names you want displayed for their respective sub-menu items. These names appear under the parent menu item. By configuring these options, you can effectively transform the appearance of SleekWP plugins to align with your brand identity, providing a cohesive experience for your users. ---