--- title: "Managing your custom styles" date: "2017-12-20T11:37:35+00:00" summary: "Learn to manage, edit, disable, and delete custom styles in Site Studio. Streamline your workflow with step-by-step instructions for exporting, locking, and reordering styles to optimize your site's appearance and functionality." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/managing-your-custom-styles" id: "fb74b3b0-bc3a-4623-8d29-cdaedcb47e09" --- Table of contents will be added You can manage your existing Custom styles including editing, disabling, disabling selection and deleting them. Editing a custom style ---------------------- 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to edit 3. Click **Edit** 4. On the next screen, edit the style [using the Style builder](/drupal-starter-kits/add-ons/site-studio/using-style-builder "Using the style builder") 5. Click **Save and continue** 6. The changes you have made to your style will be applied ![a6ca964e-editing-a-custom-style.png](https://acquia.widen.net/content/cnrekruffm/web/a6ca964e-editing-a-custom-style.png?v=15958e96-2ec9-4891-bb94-7d99cff0d5a9) Disabling a custom style ------------------------ When you disable a Custom style it will no longer be used and its CSS will be removed from your style sheet. Any content using the style will use the base style. **Note:** Any extended style will also be disabled. 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to disable 3. Click **Disable** 4. On the confirmation screen, click **Disable** ![f8287837-disabling-a-custom-style.png](https://acquia.widen.net/content/ez3qwnwfgj/web/f8287837-disabling-a-custom-style.png?v=d97c2314-b405-4996-96bb-679446bbd0d4) Enabling a custom style ----------------------- When you enable a Custom style its CSS will be applied to your style sheet. Navigate to Site Studio > Styles > **Custom styles** 1. Find the Custom style you want to enable 2. Click **Enable** 3. On the confirmation screen, click **Enable** ![031680fe-enabling-a-custom-style.png](https://acquia.widen.net/content/7lfz6s9myf/web/031680fe-enabling-a-custom-style.png?v=7e5c29cb-23ae-4aa6-8909-9e6297f76b47) Disabling selection of a custom style ------------------------------------- When you disable selection of a Custom style it will no longer appear as an option to select in the layout builder elements. Disable selection allows you to depreciate a style without it breaking instances where it's used currently. 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to disable selection 3. Click **Disable selection** 4. On the confirmation screen, click **Disable selection** ![07869f71-disabling-selection-a-custom-style.png](https://acquia.widen.net/content/rvg3vmnuod/web/07869f71-disabling-selection-a-custom-style.png?v=ef6fd2d3-4380-4471-b673-56aaea458496) Enabling selection of a custom style ------------------------------------ When you enable selection of a Custom style it will appear as an option to select in the layout builder elements.  1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to enable selection 3. Click **Enable selection** 4. On the confirmation screen, click **Enable selection** ![68220b85-enabling-selection-custom-style.png](https://acquia.widen.net/content/wpdh38rdpd/web/68220b85-enabling-selection-custom-style.png?v=52563524-b7fd-46e0-86d6-5bef532d3a4d) Export a custom style --------------------- Site Studio allows you to export a single base style to a package file. 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to export 3. Click **Export package to file**, for more information on [exporting configuration](/drupal-starter-kits/add-ons/site-studio/sync-package-export-and-import "Sync package export and import") using Site Studio sync 4. A .yml file will then be downloaded ![5b1174f4-export-custom-style.png](https://acquia.widen.net/content/inwh0qdrnq/web/5b1174f4-export-custom-style.png?v=631409d7-0a4e-4340-94ce-a5d2fca84a8a) Lock a custom style ------------------- Locking a base style will stop the base style from being overridden if changes are detected when importing using Site Studio sync. 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to lock 3. Click **Lock entity** ![c43c1525-lock-entity-custom-style.png](https://acquia.widen.net/content/pqbgoz0mac/web/c43c1525-lock-entity-custom-style.png?v=179d6b3d-19e1-4aa1-8442-0af3018a5d52) Deleting a custom style ----------------------- When you delete a Custom style it will permanently remove the CSS and configuration. Any content using the style will use the base style. **Note:** Any extended styles will also be deleted. 1. Navigate to Site Studio > Styles > **Custom styles** 2. Find the Custom style you want to delete 3. Click **Delete** 4. On the confirmation screen, click **Delete** ![92f201e6-deleting-a-custom-style.png](https://acquia.widen.net/content/azx5lctopm/web/92f201e6-deleting-a-custom-style.png?v=4b41a5c4-3d5a-40a2-a368-8fa480d32291) Reordering your custom styles ----------------------------- The order that the Custom styles are shown in the list is the actual order they are written in the style sheet. Most of the time this will not have any impact but there are some instances where it will. For example, if you apply two styles to the same element and they both include the same CSS property, the CSS property in the style that comes last will be applied. This is due to CSS specificity.  For this reason, you can reorder the styles in your Custom style list to change their specificity. To reorder your styles: 1. Navigate to Site Studio > Styles > **Custom styles** 2. Open the section with the Custom styles you want to reorder 3. Drag your Custom styles up or down to reorder them 4. Click **Save** at the bottom of the screen to save your changes. ![f2f07c74-reorder-custom-style.png](https://acquia.widen.net/content/2emym1cmx1/web/f2f07c74-reorder-custom-style.png?v=667f2cc7-9b43-4e22-8fd3-73bfbcbefaff)