There are times when nopCommerce developers / designers have to implement different layout for each language (if there are more than one languages installed on the store site). The requirement certainly makes sense because in different language the length of words / sentences can be different so if your layout is specific to the content of one language; by changing the language of the store site might create some issues with the layout of the site.
Today, we will go over the process to changing CSS style sheet with language in nopCommerce.
Let's take an example: You have a view page with some content on it. You would like to change some styling depending on the selected language.
What you need to know: You will need to find out the IDs of two languages that are installed on your store site. You can get the ID directly from the SQL Server database.
Two languages: English and French
Now, if you have two different themes installed for each language on your store site, you should go to the theme content folder and add the respective CSS style sheet (for each theme) in the following location:
If your language IDs are as follows
- English: 1
- French: 2
You should include this code on your view page:
var workingLanguageId = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Id;if (workingLanguageId == 1){ Html.AppendCssFileParts(string.Format("~/Themes/{0}/Content/css/styles_English.css", themeName));}else if (workingLanguageId == 2){ Html.AppendCssFileParts(string.Format("~/Themes/{0}/Content/css/styles_French.css", themeName));}
As long as you have the respective CSS files in the correct location, each style sheet will be used depending on the selected language.
Hope it helps!
A copy of this article is also available on Arvixe Blog.
