Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • BEWD 90 posts 302 karma points
    Nov 20, 2021 @ 17:45
    BEWD
    0

    Different stylesheet per site in Multi Site Umbraco instance

    Hi

    I am currently building a website in Umbraco 8 that consists of a holding company site and then 4 other sites which are child sites within the same Umbraco instance. Basically it’s a bar / pub company and its 4 difference venus. Each site will have exactly the same layout etc but the styling, colours etc will be different per site.

    Because the layout is consistent regardless of what site you are on I don’t want to create different MasterPages but I can’t figure out how I can assign a different stylesheet depending on what site I am on?

    Basically the structure is as follows and for each pub site I would like to use a different stylesheet while only keeping one masterpage. Is this something that’s possible?

    Home

    --- About Us

    Pub Site A

    --- About Us

    Pub Site B

    --- About Us

    Pub Site C

    --- About Us

    Thanks

    Ben

  • Corné Hoskam 80 posts 587 karma points MVP 2x c-trib
    Nov 20, 2021 @ 17:50
    Corné Hoskam
    0

    Hi BEWD,

    Absolutely, nothing that's stopping you from doing this! One of the ways to solve this, would be to dynamically set the Stylesheet you want to use in a master template from a (master-)controller, and depending on which domain is requested, choose the appropriate Stylesheet!

    Hope this helped!

    Corné

  • BEWD 90 posts 302 karma points
    Nov 21, 2021 @ 15:25
    BEWD
    0

    Hi Corné

    Thanks for the reply, I have tried to assign stylesheets based on the parent page name etc but I cant get that to work. I have never done a multi site before so unsure how to do things based on domain name?

    Are you able to give an example as to how this could work?

    Thanks for you help

    Ben

  • Dennis 75 posts 397 karma points MVP
    Nov 22, 2021 @ 07:32
    Dennis
    101

    Hi BEWD,

    I might be able to give you an example! You need to perform this logic on every page, so what you can do, is create your own base controller and override the Index method.

    I would like to present a different approach to you though, which might be more suitable in cases where some sites do need a different stylesheet and some don't and the impact in your code is minimal.

    I suggest you make a child action controller to render your stylesheet like this:

    StylesheetController.cs

    public class StylesheetController : SurfaceController
    {
        [ChildActionOnly]
        public ActionResult Get()
        {
            var model = new StylesheetViewModel
            {
                Stylesheet = GetStylesheetByHostName(Request.Url.Host)
            }
            return PartialView("_stylesheet", model);
        }
    
        private static string GetStylesheetByHostName(string hostname)
        {
            // ... your logic to pick a stylesheet over here
        }
    }
    

    StylesheetViewModel.cs

    public class StylesheetViewModel
    {
        public string Stylesheet { get; set; }
    }
    

    Views/shared/_stylesheet.cshtml

    @inherits UmbracoViewPage<Stylesheet>
    <link href="@Model.Stylesheet" rel="stylesheet" />
    

    layout.cshtml

    <html>
    <head>
        @Html.Action<StylesheetController>(nameof(StylesheetController.Get))
    </head>
    </html>
    

    I hope this helps!

  • Marc Love (uSkinned.net) 432 posts 1691 karma points
    Nov 22, 2021 @ 09:57
    Marc Love (uSkinned.net)
    0

    Hi Ben,

    The uSkinned Site Builder allows you to have a multi-site environment with different styles (designs) applied to each site in Umbraco. You can sign up for a free hosted trial at:

    https://trial.uskinned.net

    All designs you will see in this demo are hosted on the same Umbraco Instance. You can switch between each design demo in the top dropdown.

    https://portal.uskinned.net/demos/stroma/24014/

    This could save you a lot of work straight out-of-the-box. You are not restricted on functionality and are able to extend the base functionality as you see fit.

    Cheers,

    Marc

  • Damien Holley 179 posts 540 karma points
    Sep 27, 2022 @ 01:03
    Damien Holley
    0

    Older post, but I would avoid introducing a new controller as you are introducing another 3 points of failure in the routing (controller, view, viewmodel). This will also use more RAM and CPU for every pageload as it is not cached.

    If you wish to determine which site you are on AND you are using the same templates for pages on both sites (if you are not then you can use 2 layouts, 1 for each site, this also allows you to change the gtm codes and other features), then I would recommend something like the following using strong model types:

    var cssUrl = Model.Root() is [doctypeModel1] ? [css url path 1] : [css url path 2];
    <link href="@cssUrl" type="stylesheet" />
    

    The above can then be bundled into a cached partial with any other <head> changes and have it cache on a perpage instance.

Please Sign in or register to post replies

Write your reply to:

Draft