Color schemes for items in the Windows store app

I'm having trouble changing the background color of an item in my split application. I've tried using CSS, but nothing seems to work.

Here is the template for the item (default style):

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-info">
            <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            <h4 class="item-description" data-win-bind="textContent: description"></h4>
        </div>
    </div>
</div>

CSS attempt:

.item {
    background-color: red;
}

This is how it currently looks like:

Also, I want to change the violet color and the light gray color around violet (on hover) to something else.

javascripthtmlcsswindows-runtimewindows-store-apps

Answer №1

When it comes to changing the violet color, there are a few considerations:

Have you implemented your template for a ListView? Utilizing this method in my own application has allowed me to customize the default CSS. Please be aware: Any modifications will apply to all ListViews within your applications.

.win-selectionhint,
.win-listview:not(.win-selectionstylefilled) .win-container.win-selected:hover .win-selectionborder,
...

This code snippet is designed to eliminate the color surrounding selected list items and prevent hovering colors on those selections.

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

What is the method to define a loosely typed object literal in a TypeScript declaration?

We are currently in the process of creating TypeScript definitions for a library called args-js, which is designed to parse query strings and provide the results in an object literal format. For example: ?name=miriam&age=26 This input will produce th ...

javascripttypescripttypescript-typings

Encountering a CORS issue while attempting to make a GET request to an API in an

Looking to retrieve HTML data from a website using an API. The target URL is: https://www.linkedin.com/ Trying to fetch the HTML page as text from this specific URL. Here's what I attempted: getData() { const api = "https://www.linkedin. ...

javascriptangularapicors

What could be causing req.params to come back as undefined?

I have reviewed two similar questions here, but none of the suggestions in the comments seem to be resolving my issue. app.get('/:id', function(req,res) { console.log(req.params.id); }); app.get('/:id', function(req, res) { db.que ...

javascriptnode.jsexpress

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Even with minify and uglify plugins implemented, the React App remains unminified

I am facing a major issue with my reactjs app in production, as it exceeds 1.8 MB. I urgently need to reduce the size of the app. Below is the analysis from webpack: https://i.sstatic.net/skVfV.png Here is my webpack.config.js: const path = require( ...

javascriptreactjswebpack

Retrieve file server domain using JavaScript or jQuery

I'm trying to extract the domain name without the "http(s)://www." from a file link. For example, if the script returns "example.com", I want it to parse through links like "http://www.example.com/file.exe" or "https://example.com/folder/file.txt#some ...

javascriptjquery

Eliminate image line breaks associated with hyperlinks without the need for table cells

My webpage includes a <div> with various images: <div> <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> </div> However, whenever I add a hyperlink to any of the images, it causes an unwante ...

htmlcss

Is there a way to recover a deleted element from an array?

I have a list of user cards, and my task is: Clicking the "undo" button: will restore the last card that was deleted (using an array) Question 1: How can I create an array from the displayed cards list? Question 2: How do I restore the last deleted card? ...

javascriptjqueryarraysajax

The "div width 100%" property functions flawlessly when tested locally, yet fails to operate on the live server

Hello, I recently launched my new website at www.leafletsdistributors.com. However, I'm encountering an issue with the Get in touch section (the light grey colored area). Despite setting the width to 100%, it's not fully extending across the scre ...

htmlcss960.gs

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

Unable to open file:/// on localhost in the browser

I have been working on a website that can display the folders and files on a client's machine in an HTML table. Everything was functioning correctly, but I encountered an issue with creating href links for files on the client's machine which were ...

pythonhtmllocalhosthrefinternet-explorer-11

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

I'm struggling to grasp the concept of fetching external data using server-side rendering with the getServerSideProps method. In particular, I am facing difficulties with the search functionality and how to handle the returned data. As someone who is ...

javascriptjsonnext.jsfetch-api

Show a property from the local storage as an option in ng-options

Within my Angular application, I keep crucial victim data in local storage. This data is then showcased in the view where it can be altered (via a <select>): <h1>Victim #{{victim.numero}}</h1> <label>Victim status</label> &l ...

javascriptangularjslocal-storageng-options

Switching between different sections of a webpage

Seeking assistance with implementing a transition effect between sections on a single-page application. All sections are located on the same page, but only one section is displayed at a time. When an event occurs, the display property of the requested sect ...

javascripthtmlcsscss-transitions

Having difficulty implementing getJSON function in CodeIgniter framework

My goal is to integrate AJAX calls into my website using codeigniter in order to receive live updates from the database. The click button function properly and displays all JSON data, however, I am facing an issue when trying to display a specific array a ...

phpjavascriptajaxcodeigniter

What is the best way to pass a VueJS object to be stored in a Laravel controller?

I am facing an issue with my methods where the data is not getting stored in the database. I am unsure why the information is not being sent to the controller. Even though I input the correct data, it fails to load into the database. However, it does pass ...

javascriptphpdatabaselaravelvue.js

Encasing the window global variable within an AngularJS framework

Currently, I am encapsulating a global variable within a factory in order to make it injectable. Here is an example of how it's done: angular.module('Analytics').factory('woopra', [ '$window', function ($window) ...

javascriptangularjswoopra

Contrast between using " and '

Similar Inquiry: When to Utilize Double or Single Quotes in JavaScript Comparison of single quotes and double quotes in JS As I delve into creating a Node.js Express web application, I've noticed that the tutorial consistently uses ' ins ...

javascriptnode.jsexpress

Obtaining the local IP address of my system with React JS

Is there a way to retrieve the local IP of my computer within a React JS application? I would appreciate any suggestions on how to accomplish this. ...

javascriptreactjselectron

Extracting data from the response object and injecting it into the request

Once the file has been successfully uploaded, the 'uploadSuccess' callback event is triggered, providing information about the newly created media. The 'hashed_id' value within this object is crucial for my PUT request. I attempted to ...

javascriptjqueryjsonajax