I have a website developed using ASP.Net MVC. Now I want to based on the request(based on the country) I want to change the web site theme.
Ex: for USA - theme 1 for Canada - theme 2
If the request is not matching to any theme I want to display default (my current theme).
How can I achieve this dynamically.
Do I need to rewrite my css again or Is there a better way to this?
Please share your ideas
Thanks in Advance :)
You should define a global css file for common styles. Assuming you have some kind of helper method for accessing the current country, you can conditionally load the country specific stylesheet, or load a stylesheet based on a rule e.g. stylesheet with the same name as the country (following code is untested):
<link rel="stylesheet" type="text/css" href="css/global.css">
// conditional
@if (SiteHelper.CurrentCountry == "USA") {
<link rel="stylesheet" type="text/css" href="css/usa.css">
}
// or assume a css file exists with the country name
<link rel="stylesheet" type="text/css" href="css/@(SiteHelper.CurrentCountry).css">
I would generally recommend using a different layout page for each country/theme as it gives you much more control. Essentially you would move the above logic into _ViewStart.cshtml and set the Layout based on the current country.
Not sure if this is the best approach but this is what I am doing. I have a folder structure similar to this:
/Content
layout.css
/Content/Images
/Content/Themes/ThemeUSA
layout.css
/Content/Themes/ThemeUSA/Images
Then I use Helper Extensions to return the correct path for example for an image:
<img src="@Url.Image(Model.EnhImg)" alt="@Model.EnhImgAlt" />
where
public static string Image(this UrlHelper helper, string fileName)
{
string sLocation = Content() + "images/" + fileName;
return helper.Content(sLocation);
}
private static string Content()
{
string sLocation = "~/content/";
string sTheme = (string)HttpContext.Current.Session["Theme"];
if (!String.IsNullOrEmpty(sTheme))
{
sLocation += "themes/" +sTheme + "/";
}
return sLocation;
}
Images in the theme folders have the same name as in the default folder. Same thing for stylesheets.
