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?
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!
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?
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; }
}
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:
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.
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.
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
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é
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
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
Indexmethod.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
StylesheetViewModel.cs
Views/shared/_stylesheet.cshtml
layout.cshtml
I hope this helps!
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
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:
The above can then be bundled into a cached partial with any other
<head>changes and have it cache on a perpage instance.is working on a reply...