Customizing CSS Styles in ASP.NET MVC for Multilingual Websites

We are looking to make our ASP-MVC website multicilingual and support different languages. One challenge I am facing is how to apply distinct style-sheets for each language, especially when dealing with right-to-left (RTL) languages like Hebrew or Arabic compared to left-to-right (LTR) languages like English.

I have two CSS files containing the same CSS classes: EnglishSite.css and HebrewSite.css. When the selected culture is en-US (as shown in the image), I want to load EnglishSite.css so that all classes on the site use styles from that file. If a different culture is selected, then HebrewSite.css should be used instead.

While there are similar questions on this topic on the site, none of the solutions provided have worked for me. Any assistance you can offer would be greatly appreciated!

jquerycssasp.net-mvc

Answer №1

One way I tackled this issue was by adding a suffix to my views (cshtml). For example:

class="center@(@Session["culture"])"

This allowed me to have variations like centerhe-IL or centeren-US for different cultures. I was able to consolidate these variations into a single CSS file with all the necessary declarations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the font style of the navigation bar

Hey there! I recently downloaded a template from this website: . However, I'm facing an issue with the nav bar displaying strange fonts when using Vietnamese letters. For example, "Nước" shows up as all uppercase and the letters "uo" are shortened. ...

htmlcssnavbar

Efficiently Fill JQUERY Mobile Multi-Pages with Dynamic Content

A Question for JQUERY Mobile Beginners: In my basic JQUERY Mobile application, I have a simple setup with two pages. When the user navigates to PAGE2, I need to make an AJAX call to retrieve a JSON object that contains a list of people along with their DB ...

javascriptjqueryhtmlajaxjquery-mobile

When using jQuery, the value of an input type text field remains constant despite any alerts

My issue involves an input text used to check if the corrected values are being displayed in an alert. However, when I modify a value in the form and check if the updated value appears in the alert box, it still shows the old value. Below is the relevant ...

javascripthtmljquery

Stop working to $(this) in jquery when clicking outside

I'm facing an issue with my code and would like some help. I have a button that toggles the visibility of a filter element, which is working fine. However, I now want to implement a "click outside" effect to close the filter when clicking on any body ...

javascriptjqueryhtml

At 400 pixels screen size, the buttons in the appBar component are spilling out

In my appBar component, I have three buttons that appear fine on large screens. However, when the screen size reaches 400px, they start stretching out of the appBar. Here is how they look on large screens: https://i.sstatic.net/l3nJM.png And this is how ...

cssreactjsdebuggingmaterial-ui

Attempted to display a Google Map within a lightbox, but encountered difficulties in getting it to

I've copied and pasted my code below. It may contain references to Google or Lightbox being undefined, but I'm unsure how to integrate them into the code provided. My goal is to display a Google map within a Lightbox popup, but so far I have been ...

javascriptjquerygoogle-maps

Is there a way to duplicate the background-style:contain effect on an image?

It is important to note that the image source must be declared in the HTML code as it will be dynamic, and therefore background cannot be used here. HTML <div class='some-form'> <form> <button>...<button> <i ...

htmlcss

Steps to display an angled bracket to indicate a line break

I have a div that is editable, allowing me to display the entered text. To indicate each new line, I would like to show a ">" symbol at the beginning of the line. HTML <body> <div> <span> &gt; </span> ...

jquerycsshtml

Issue with Datatable when making an ajax request

My web application utilizes Datatable and AJAX to retrieve data. Below is a snippet of my code: <script> $(document).ready(function() { $('#mytable').DataTable(); } ); </script> <body> <h2>AJAX SELECT&l ...

phpjqueryajaxdatatabledatatables

Obtain the beginning and ending positions of a substring within a larger string

As a beginner in the world of AngularJS and web development, I am faced with a challenge. I have a specific string that is currently selected on a tab, like so: var getSelectedText = function() { var text = ""; if (typeof window.getSelection !== "un ...

javascriptjquerycssangularjshtml

Function triggered twice upon checkbox being selected

Below is the code snippet I am using: $("#cc1").unbind('click').click(function(e) { //somefunction }); This code works perfectly fine for executing a function after clicking the cc1 button. However, when I use the following code: $("#cc1" ...

javascriptjquerybuttoncheckbox

The json_encode() function returned a JSON that is not valid

In my PHP file (although more complex, even with the simplest code it fails), I have: <?php $salida = array(1,2,3,4,5); echo json_encode($salida); ?> The response received is: [1,2,3,4,5] While this appears valid, it's actually not. When pas ...

javascriptphpjqueryajaxjson

Is the oscillator value remaining stagnant in Safari?

Is there a way to utilize the web audio API alongside NexusUI JS for dial/knobs? When I use Chrome, the dial changes the oscillator frequency, but in Safari, it seems to be playing the default 440hz. Can anyone guide me on what could be the issue or what ...

javascriptjquerysafariweb-audio-api

Accessing XML files locally via JavaScript on Chrome or Internet Explorer, with compatiblity for Android mobile devices as well

Looking to extract and display data from an XML file directly in an HTML page without the need for a web server. Ready to dive into using JavaScript, jQuery, or Ajax to get the job done. ...

javascriptjqueryxmlbootstrap-modal

Cropper.js, effortlessly populating a container with a perfectly centered image

I took inspiration from the cropper.js library website but made modifications. You can check out the original example here. Here's my version of the modified example: CodePen Link var image1 var cropper1 var image2 var cropper2 ...

javascriptcsscropperjs

Webgrid columns lose their width after a postback event

I'm working on a simple webgrid that has 3 columns: View columns: grid.Columns( grid.Column("Applicant Name", format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId }, null), style: "AppN ...

css.netasp.net-mvc-4razorwebgrid

Display the current count of selected radio buttons in real-time

I am working with radio buttons that are generated dynamically using a 2D array within a while loop. I want to display the number of radio buttons checked when one is clicked. Here are my radio buttons: $n=0; while($row=mysqli_fetch_row($rs)){?> <f ...

javascriptphpjqueryajax

Utilize ajax to send both images and text simultaneously

I'm utilizing javascript's 'formData' to transmit image files through ajax. Is there a way to append extra data to formData, like a text string? JS: $("#post-image").on("click", function(){ $.ajax({ url: "../../build/ajaxe ...

javascriptajaxjquerymultipartform-data

HTML drop-down menu malfunctioning/missing from view

I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using: * { margin: 0; padding: 0; } body { back ...

htmlcss

Issue with clearTimeout function not functioning properly on keyup event in iFrame

While there may be many similar questions out there, I have yet to find a solution that works for me. Currently, I am developing a WYSIWYG editor and I want it to save when the user performs a keyup action. However, I do not want it to update after every ...

javascriptjqueryhtmliframe