Adjust the background color of the date and time selection tool

Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the background?

Answer №1

The CSS file wasn't connected properly.

Answer №2

First, locate the most inner elements (typically DIVs) with these classes:

.custom-widget
.custom-widget-content

Change the background property to a color of your choice and observe the result. If the background doesn't change, move up a parent DIV/element and continue experimenting until you achieve the desired outcome. For instance, by adjusting only 2 rules, the background of the sample1.html demo (from the ptTimeSelect download) was modified.

#ptTimeSelectCntr .custom-widget{
  padding: .2em;
  background:#900;
}

#ptTimeSelectCntr .custom-widget-content {
  margin-top: .1em;
  margin-bottom: .1em; 
  padding: .2em;    
  background:#900;
}

I hope this explanation is useful for you.

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

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

There seems to be a problem retrieving the JSON file

My JavaScript file is designed to fetch a JSON file and execute a function if successful. If there's an error, it should display an alert window with the message "error". However, despite checking the syntax, I keep receiving an error alert every time ...

Implementing onbeforeunload event on body tag with jQuery for Chrome and IE browsers

My current system includes a feature where I need to confirm with the user if they really want to leave the page once a dirty flag is set. I have implemented the following code - when viewing in Firefox, I can see that the page source shows the onbeforeun ...

Tips for adding a text input field within a dropdown menu

Could someone provide guidance on how to place an input text box within a dropdown without using bootstrap? I came across this image showing what I am looking for: https://i.stack.imgur.com/f7Vl9.png I prefer to achieve this using only HTML, CSS, and Jav ...

"Even rows are the only ones being highlighted on the table

I created a table that dynamically highlights all odd rows. To achieve this, I implemented a method to identify the row number and then apply the alt class to those specific rows. In order to highlight the rows on hover, I added a simple :hover selector ...

Executing a Javascript function repeatedly

Here is a sample JavaScript function: function f1() { alert("HI"); } I have two different locations where I am calling the same JavaScript function: <input type="submit" id="btn1" onclick="f1()"/> <input type="submit" id="btn2" onclick="f1 ...

Activate the last div within the identical class

When I make an ajax call to fetch more results and append them to the existing ones on the same page, I want to display a scrolling spinner while the contents are being fetched. I am adding a div at the bottom of the fetched results like this: <div cla ...

Enhance a disabled button by incorporating a ripple effect

I've got a button that toggles on and off depending on the required form fields. When it's enabled, clicking it activates a ripple effect. Now I'd like to have the ripple effect even when the button is disabled. I attempted something simila ...

Adding EventListeners for Click Handling: A Step-by-Step Guide

Here is the part of my code in HTML: <!DOCTYPE html> <html> <head> <h> <title> This page</title> </h> </head> <body> <button id = "go-button" >GO ...

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

I am encountering an issue while trying to fetch rows from two tables using a JOIN and aliases. The problem arises when I attempt to convert the fetched rows into JSON data and assign them to a JSON array. Below is the code snippet: $personal = $db->p ...

The most sophisticated method for creating a 2x2 grid of divs

I have developed a quiz application similar to Buzzfeed with four answer options for each question. The layout on mobile devices is satisfactory, displayed in a 2x2 grid. However, when viewing the app on desktop screens, the answers appear horizontally in ...

Don't forget to include a file upload feature when submitting a form

I'm working with codeigniter and jquery to develop a form that includes text input fields as well as a single file upload option. I'm aiming for the functionality where even if the form validation fails, the uploaded image will still be visible t ...

Can we dynamically adjust font size based on the width of a div using CSS?

My div is set to 70% width and I have a specific goal in mind: To fill that div with text To adjust the font size so that it takes up the entire width of the div https://i.stack.imgur.com/goVuj.png Would it be possible to achieve this using only CSS? B ...

Execute JavaScript script once when route changes

I'm currently working on a system where I want to ensure that my animation-based JavaScript code only runs once after the route changes. The issue I'm facing is that when switching between pages and returning to the about page, the scripts are ca ...

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

let count = 0; while (count < 4) { $('#container').append("<div><input type='textbox' class ='left' id='left-${count}'/><input type='textbox' class ='right' id=' ...

A guide on implementing arrow links in D3.js

i am struggling to add an arrow to one end of a link in my code. even though the links are functioning correctly, i can't seem to figure out how to draw arrows successfully. any assistance on how to implement this would be greatly appreciated. thank y ...

Determine the remaining load time in PHP after submitting a task

Is there a way to incorporate a progress bar that displays the percentage while "preparing the next page" before redirection? I have successfully implemented the progress bar animation, but now I am looking for an approximation of the time it will take be ...

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

ABP's Angular DateTimePicker Component for Effortless Date and Time

I am experiencing an issue with a DateTime field that is supposed to display only the time: HTML: <div class='input-group date'> <input class="form-control" type="datetime" #RequiredByDate name="RequiredByDate" [value]="formatDate(h ...

Issues with jQuery Progress Bar Functionality

As a beginner in jQuery, I am currently working on creating an interactive progress bar using jQuery. My goal is to provide a set of checkboxes on a webpage so that when a visitor checks or unchecks a checkbox, the value displayed on the progress bar will ...