How to Create a Custom Umbraco uSkinned Component

In this blog post, we'll explore how to create a custom uSkinned component for Umbraco projects, specifically focusing on a simple "Hello World" text display. This detailed guide complements the uSkinned documentation by providing additional insights and practical steps.

Step-by-Step Guide to Creating a Custom uSkinned Component:

1. Access the Umbraco Backoffice:
   • Log into the Umbraco backoffice to begin.
2. Create a New Document Type:
   • In the "Settings" section, navigate to Document Types -> Components -> Component (Block Content).
   • Right-click on "Component (Block Content)" and select "Create".
   • Choose to create a new Element Type.
   • Name your Document Type, for example, "Custom Component".
   • Select an appropriate icon for your component.
   • Create a new tab titled "Content".
3. Define Properties for the Document Type:
   • Add properties to your Document Type, such as text fields or media pickers.
   • In this example, add a text input field and name it "Text Input".
   • Organize properties in the "Content" tab for clarity.
4. Create a New Settings Document Type:
   • Navigate to Document Types -> Components -> Component (Block Settings).
   • Right-click on "Component (Block Settings)" and choose "Create".
   • Create a new Element Type named "Custom Component (Settings)".
   • Follow uSkinned's color guidelines for icons.
   • Click "Compositions" and add the following:
     • Common Block (Settings)
     • Component Minimum (Settings)
     • Item Name (Settings)
   • Click Submit, then Save.
5. Develop the Razor View:
   • Navigate to Partial Views -> uSkinned (or your custom path) -> Blocks.
   • Right-click on "Blocks" and select "Create".
   • Choose "New empty partial view" and name it as your content component, without spaces.
   • Replace existing content with "Hello world" in the Razor view.
   • Click Save.
6. Enable the Component in Umbraco:
   • Go to Data Types -> USN Data Types -> Block List.
   • Select "USN Block Components".
   • At the bottom, click "Add" and navigate to your custom component.
   • Configure the label, custom view (~/App_Plugins/uSkinned/views/block.html), and stylesheet (~/App_Plugins/uSkinned/css/block-editor.css).
   • Set the content and settings models, along with background and icon colors.
   • Click Save.
7. Test the Component:
   • In the Content Section, edit a page and add content from the Main content block list.
   • Select your custom component to see it in action.

Conclusion:

This guide covers the basics of adding a custom component in uSkinned. Stay tuned for a follow-up post on more advanced customization techniques. Remember, steps may vary based on you