Utilize Jquery Mobile ThemeRoller's design on your MVC4 mobile app for a cohesive and professional look

After creating an MVC4 Mobile application in Visual Studio 2013, I am struggling to apply jquery mobile themeroller themes to it.

I attempted to replace the existing theme css with my custom theme, but it does not seem to be working at all.

See the code snippet below:

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css" /*custom theme file*/));

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    @Styles.Render("~/Content/mobileCss", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")  
</head>

Can anyone please point out what I might be missing in this setup?

Update:

I am having difficulty overriding the custom theme I created using themerollers. I have considered directly adding references to files like so:

<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.min.css" />

After adding these CSS files, I include the necessary JS files. However, when I set the data-theme attribute to 'a', 'b', or 'c, I do not see the customized colors from themeroller reflected on the controls.

Answer №1

It seems like you forgot to include your theme bundle in the rendering process. The current code is only rendering the default site.css. Update the line as follows:

@Styles.Render("~/Content/mobileCss", "~/Content/css")

Change it to:

@Styles.Render("~/Content/mobileCss", "~/Content/themes/base/css")

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

Grid items in Material UI are not positioned next to each other

I am encountering an issue with the Grid component in material-ui. The grid items are currently stacking below each other instead of beside each other, and I'm unsure of what is causing this behavior. My intention is for the grid items to stack on top ...

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

Tips for fixing ReferenceError: Cookies is undefined

Currently, I'm configuring a modal that will be hidden once the user submits their request. if ( Cookies.get("submitted") && JSON.parse(Cookies.get("submitted")) ) { $("#booking-form-modal").hide(); return true; error page ...

Is it possible to create a list item animation using only one div element?

I'm currently working on achieving a dynamic animation effect for list items similar to the one demonstrated in Pasquale D'Silva's design example: https://medium.com/design-ux/926eb80d64e3#1f47 In this animation, the list item disappears wh ...

Is there a way to modify the displayed value of json_encode() with jQuery?

I am using the json_encode() function to insert data into the database. How can I retrieve just the values of name_units from the units row in the database? This is how the output looks like in PHP code (generated by json_encode()): my_table=>units=& ...

I'm having trouble modifying the backdrop to 'true' or removing it after setting it to 'static' in Bootstrap. Can anyone help me troubleshoot this issue?

I have been encountering an issue with changing the backdrop setting from 'static' to 'true' in Bootstrap modal. Here is the code I am using: $('#modal').modal({backdrop: 'static', keyboard: false, show: true}); ...

CSS and JavaScript Nav Menu Collapse (No Bootstrap)

I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar. Despite trying various solutions from Stack Overflow, I still haven't found one that works for me. Therefore, I am rea ...

Determine if a specific date occurred at least one day ago using momentjs

Is there a way to determine if a specific date is at least one day (24 hours) in the past using momentjs? For example: const currentDate = moment() const isAtLeastOneDayAgo = currentDate.subtract(dateToVerify) > 1 // How can this be done? ...

Iterate over a JSON array using jQuery

I am attempting to iterate through this data to extract the 'name' values. Here is my current code, but it does not seem to be functioning correctly. I have tried a few variations from suggestions here, but none of them have worked. $.get("/ ...

The issue with the before selector causing the button label to overlap on top of the button remains

Check out the code snippet When hovering over the button, the "Sign Up!" label disappears. I tried adding color: rgba(32,32,32,1); to both the .button element and the ::before selector as a backup, but the label still won't display on top of the butt ...

Handling a WCF POST request with JQuery resulting in a 400 Bad Request HTTP Response

I'm encountering an issue with my JQuery POST not being accepted by the WCF Service. Below is the JavaScript code for the POST: function jqueryPost() { var url = "/LoggingTest"; $.post(url, { message: "test message" }); } To handle the POST ...

JQuery Form Validation - Detecting Input Changes

Currently, I have a form set up with jQuery validation that works well, but I want to enhance its functionality. The form uses a plugin for validation, but it only checks for errors upon submission. I'm interested in finding a way to validate the fiel ...

JSON data not being returned by Ajax

I am attempting to execute a basic Ajax request that communicates with a groovy script and retrieves the JSON string generated by the script. Here is my Ajax: var urlPath = "connections.groovy"; $.ajax({ url : urlPath, type: 'GET', ...

Issue with jQuery UI: Accordion not functioning properly

I have created a nested sortable accordion, but there seems to be an issue. Within the 'accordion2' id, the heights of each item are too small and a vertical scroll bar appears. The content of the item labeled '1' is being cut off, show ...

Exploring the possibilities of device orientation in combination with 3D transforms

Imagine a project that aims to create a cube with sides representing different geolocations. The cube's sides for east, west, up, ground, north, and south are meant to always point in their respective directions. To gather the necessary data, the proj ...

The AJAX navigation feature does not function properly on Windows or Safari browsers, whether on a Mac or PC

Currently, I am facing an issue with a menu that is loaded via jQuery but maintained in a separate html file. The purpose of keeping it separate is to update it in one place rather than having to make changes on every page. The menu was functioning properl ...

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

Unique Custom Resources like CSS and JavaScript are used to ensure a consistent appearance across all applications

We have identified a challenge where we aim to develop custom CSS, Javascripts and other resources to maintain consistent look and feel across all our applications. These applications could be built using GWT, Thingworx, JSP, etc., and may differ in natur ...

Ways to manipulate external CSS classes with styled components without direct access

Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...