What's new for uSkinned in Umbraco 8?

We're now almost at the end of 2019 and it's been a busy year for us at uSkinned. Following the release of Umbraco version 8, we have been hard at work planning, designing, developing, testing (repeat) in preparation for launching a brand new set of themes

Well, we are now delighted to announce the release of the first one, Fabric! :-) This is our new baseline theme and will take over from our previous v7 theme, Source. And, as an added bonus it ships with 3 ready-to-use frontend styles. Don't worry though, you can add as many of your own as you wish - more on that below.

Introduction

In general, we have pretty much started from scratch, taking on board the 4+ years of feedback from our customers and have created a starter kit we're delighted with - and we're sure you will be too! From updating the user-interface within the CMS to upgrading from Bootstrap 3.3.7 to Bootstrap 4.3.1 for the frontend we've done a lot.

So, here's a brief run-down of what's new...

Theme Colour Management

In the past, to make changes to the colour palette provided with our themes would involve a 3-step change, including, getting your hands dirty with a little code. Now, we've pushed the barrier with the introduction of our full theme colour manager. 

uSkinned colour management for Umbraco.

Each theme will ship with provided colours, however, you can now update those in seconds using an intuitive user interface inside Umbraco CMS. You can even add new colours, as many or as few as you'd like or as your brand requires. Once added, simply publish the node and they'll be available to use throughout your site. 

uSkinned colour manager for Umbraco.

uSkinned colour setup for Umbraco.

Unlimited Styles (and themes)

Additionally, you will be able to create an unlimited number of website styles in the Website Styles folder. Allowing you to have multiple sites under one installation that are all using different colour palettes - great for organisations with multiple brands or microsites. Furthermore, you will be able to install additional themes from uSkinned into the same Umbraco CMS solution. Thus, allowing you to not only show varying colour styles and logos on multiple site solution but also multiple website designs and layouts too. You can even set different styles and themes on a page-by-page basis! :-)

uSkinned style picker for Umbraco CMS.

Navigation (Mega Nav)

Our navigation systems have always been pretty flexible, we have never relied on just auto-generating the top-level parents within them. However, previously our themes did auto-generate the dropdowns (child pages) within our Main Navigation, by displaying the pages that were direct descendants of the items you have picked to be in the top level. Although we did include an option to not display any child pages at all.

Mega navigation in Umbraco CMS. 

The new starter kit has changed this, we've introduced a drag-and-drop, unlimited, multi-level mega navigation system to be used when building up your sites Main Navigation. You can have any number of top-level items (internal and external links) with any number of children below. Not only that but you can have as many levels within this as you wish with our new Mega Nav.

Mega nav with uSkinned themes for Umbraco CMS. 

Drag, drop, collapse mega nav items in Umbraco themes. 

Page Types

There is now only one page type available within the CMS. Don't worry though, this doesn't mean a reduction in the flexibility, instead, this means you can now do a lot more! Changing from a Full layout option (previously Advanced Page) to a center columned layout option requires just the click of a button - our code handles the rest. 

Page layout options for Umbraco CMS.

 

Components

Another major overhaul to our starter kit structure has been to our page components. Now that we are using one page type (see above) with different layout settings you can now add all components to all page layouts. Yes, that means you really can have the most flexible solution for both you and your clients.

Pods

Typically, our pods component would allow users to add one style of pod with a heading, text and image. Well, no longer! You can add a variety of different pod types to the one component, including:

  • Text with image - includes, 5 different layout styles
  • Video - inline only or served via a modal box
    • YouTube
    • Vimeo
    • MP4/WebM - Hosted in your own Media section
  • Image - inline only or served via a modal box
  • Form
    • Newsletter
    • Contact
    • Umbraco Form - provided you have a Umbraco Forms license. Remember if you use Umbraco Cloud you won't need the Umbraco Forms license! :-)
  • Blockquote testimonial
  • Related content picker - Choose any Page or Blog Post from your site
  • Code - Embed ANY third party widget
    • Instagram
    • Twitter
    • Facebook
    • YouTube
    • Vimeo
    • Eventbrite
    • Shopify
    • Ecwid
    • Open Table or restaurant booking form
    • WuFoo contact or survey form
    • You name it! Any third party widget available can be displayed on your uSkinned powered website.
  • Reusable Pod
    • Choose any site-wide pod that you have already created in the reusable folder under Website Configuration.

Pod types in Umbraco CMS.

Additionally, you can make a number of setting choices on the component as a whole, including:

  • Items per row - 1 item up to 8 items
  • Enable carousel
    • Show carousel arrows
    • Show carousel navigation
  • Background colours and image

Split Component

This a brand new component. Similar to our pods but with a few extra elements thrown in for maximum control. We've actually been planning this component for a number of versions but never found the correct solution in terms of the user experience. With this component we have eliminated the need for the following legacy components: Form with text, Form with listing and Text with slideshow. Although great components on their own, we always felt that being able to mix and match the content in these sort of layouts would give our users the REAL freedom they need in order to publish varied and flexible page designs. Therefore, we combined them and threw in a few extra options for good measure :-) including:

  • All of the options available in the Pods component
    • Forms, Code etc
  • Image and Video Slideshow - mix and match
    •  Video - inline only or served via a modal box
      • YouTube
      • Vimeo
      • MP4/WebM - Hosted in your own Media section
    • Image - inline only or served via a modal box
  • Multiple pods as a grid or list
  • Subpage or Blog post listings 
  • Code - Embed ANY third party widget
    • Instagram
    • Twitter
    • Facebook
    • YouTube
    • Vimeo
    • Eventbrite
    • Shopify
    • Ecwid
    • Open Table or restaurant booking form
    • WuFoo contact or survey form
    • You name it! Any third party widget available can be displayed on your uSkinned powered website.
  • Accordions
  • Tabs
  • Text Blocks
  • Related Content picker
  • Contact Form
  • Newsletter Form
  • Umbraco Forms

Options for screen size column widths in Umbraco CMS.

When displaying on the page you can choose how to distribute the split between each item, e.g. you pick the column width of each item in the split component then they are displayed on the frontend to a user as such. Additionally, you can even choose the order of the content dependent on the device being used. :-) 

Split block of content in Umbraco CMS.

Banners

A mainstay in our themes since version 1, Banners, have always come packed with great and flexible options. We've now taken them further than ever before with some brand new features. You can now set a video background on any banner type directly from Youtube and Vimeo as well as MP4/WebM from your media section. 

Video options in Umbraco.

We've added a new banner style, Scale. Unlike our other banner styles where the banner item will have a fixed height at each screen size, the Scale banner will now adapt its height dependent on the width of the browser viewport. 

You can now have full control over the position of your text within the banner items too! :-)

Banner styles for Umbraco CMS.

Windows

Similar to banner items above we've included full control over the position of your text within each item! :-)

Position content on top of images for Umbraco CMS.

Price Lists

You can now set items per row as well as choose from two separate layout types.

Pricing and menu lists in Umbraco.

Links

We've now combined two components into one, Links and Resources. These were always pretty similar so we adapted them to be a layout choice. You can now set items per row as well as choose from two separate layout types.

Links options for Umbraco CMS.

Anchor navigation

Add this component to any page to let users quickly auto-scroll between different sections of a page using this Sticky navigation. 

Scrolling anchor navigation with Umbraco CMS. 

Footer

Previously, our footers were fixed to specific layouts depending on the theme design. Well, no more! Similar to our Pods and Split Component you will now be able to build up the content in your footer as you like. You can even set the width of the column individually for each item you add, e.g. Quick links might take up 3 columns whereas your Form should display across 6 - when we say absolute control we mean it!

uSkinned footer controls in Umbraco CMS.

You can a wide variety of content here, including: 

  • All options available with the pods component
    • Forms, code etc
  • Quick links
  • Search fields
  • Social navigation
  • Code - Embed ANY third party widget
    • Instagram
    • Twitter
    • Facebook
    • YouTube
    • Vimeo
    • Eventbrite
    • Shopify
    • Ecwid
    • Open Table or restaurant booking form
    • WuFoo contact or survey form
    • You name it! Any third party widget available can be displayed on your uSkinned powered website.

uSkinned social links in Umbraco CMS.

Footer options in Umbraco CMS with uSkinned.

Buttons and Links

All buttons or links available in a page component or navigation allow you to assign an icon to them. You can also choose each individual button's colour rather than on a component basis.

In conclusion

We pretty much started again from scratch, taking everything we've learned over the past 4.5 years by engaging with our users and built the solution we believe everyone has hoped for. Much of the list above only covers the tip of the iceberg with the new starter kit and to learn it's full potential you should really take it for a spin today! :-) 

Enjoy and #h5yr

 

P.S. We will be releasing three more new Umbraco 8 themes very, VERY soon! Keep your eyes peeled.

comments powered by Disqus

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.

NEW Umbraco V8 themes!

We are now releasing our much anticipated Umbraco V8 themes.