How to Create a Custom Umbraco uSkinned Component

March 06, 2024

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