How to change CSS style sheet with language in nopCommerce

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:

nopcommerce language css

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.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment