Customizable styling using SQL and PHP

I've reached a dead end with this issue. Here's the current situation: When User 1 clicks "not available," the background of a div turns red and updates on all other users' screens.

CSS:

#User1 
{
    background-color: green; <--This is the part I need to modify.
    height: 40px;
    width: 40px;
    margin-left:-8px;
    margin-top:-8px;
}

HTML:

<!DOCTYPE HTML>
<html>
<head><link href="css/HTML.CSS" rel="stylesheet"><meta http-equiv="refresh" content="5"></head>
<body>
<div id="User1"></div>
</body>
</html>

My question is, how can I retrieve the CSS value from my SQL database? I am able to write to it without any issues, but I'm not sure how to make it update so that everyone can read the new value.

Thank you for any assistance.

Answer №1

One way to optimize loading times is by utilizing a dynamic PHP-CSS file and implementing caching to temporarily store it, thereby reducing the number of requests.

To implement this, create a PHP file and specify the content type in the header as text/css

header("Content-type: text/css; charset: UTF-8");
//Your SQL queries should be inserted here

Answer №2

Dynamic CSS code can be written using less.css. Simply write your styles in a LESS file and the server will automatically convert it to a .css file.

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

Error in CSS styling affecting image display on responsive website

My CSS seems to have a bug when it comes to responsive pages with images. Take a look at the demo: https://jsfiddle.net/xr4getom/ If you resize the window on this example, you'll notice that a dark background (#222) appears intermittently. Is there ...

Exploring the integration of React Suspense boundary to handle data fetching from API following specific triggers

Hello, I am relatively new to React and JS. I am currently working on implementing the React Suspense boundary for a component that requires fetching data from my backend API. I followed an example that provided functions like fetchData and wrapPromise [h ...

Declare the push method within the Countly.q array in a TypeScript declaration file

Is there a way to declare Countly push add_event method in the following manner? Countly.q.push(['add_event',{ "key":"action_open_web", }]); I attempted to do this inside a declaration file (.d.ts) but it did not work. Here ...

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

What is the best way to update the image card in bootstrap?

Could someone please assist me in changing the image displayed? I keep getting the same copied image, but I would like id 1 to have a different image. This is crucial as I plan to present this for my defense in class. Thank you. let htmlString = ` <di ...

Tips for Aligning h5 Headings with Unordered Lists

My footer contains the following code: HTML: <div class="container"> <div class="row"> <div class="col-md-6"> <div class="pull-right"> <h5><u><i>Information</i></u> ...

What exactly does the 'app://' scheme entail when it comes to assets within Webpack-5-generated applications during development mode?

I've recently noticed a unique behavior in my Webpack 5-built application during development mode. The browser requests assets using a URL with an interesting app:// scheme. An example of this is: app:///node_modules/dir/to/package/index.js In the De ...

Continue looping in Javascript until an empty array is identified

Currently, I am in search of a solution to create a loop in Javascript that continues until the array of objects is empty. The object I am working with looks like this: "chain": { "evolves_to": [{ "evolves_to": [{ ...

send the value of a variable from a child component to its parent

I have created a typeahead component within a form component and I am trying to pass the value of the v-model from the child component to its parent. Specifically, I want to take the query model from the typeahead component and place it in the company mode ...

The process of displaying a single large image from a local file system using the elements input, img, and canvas

I am attempting to create a mobile-friendly picture upload webpage, but I keep experiencing memory issues causing the browser to crash when the picture is too large. Here's my code: <input type="file" id="testFile" /> <img src="" style="posi ...

developing various instances of an object's characteristic

I'm currently attempting to create multiple versions of an object that includes an init function. I've experimented with using the 'new' function in JavaScript, but unfortunately it doesn't seem to work in this scenario as the cons ...

Utilizing HTML and JavaScript to dynamically switch stylesheets based on the width of

When it comes to using stylesheets for mobile and non-mobile devices, there is a need for different approaches. The idea of comparing browser height and width in JavaScript seems like a good one, but the implementation may not always work as expected. ...

Having trouble retrieving the component state within AgGrid's cellRenderer

When working on my React app using functional components, I encountered an issue with accessing a local state (myObj) within a cellRenderer in AgGrid. The local state is populated via a context object from the parent component based on an API response. Un ...

Separate the JSON data into a new variable

I am working on a view called hero: def hero(request): rfc='some value' depends_on=1234 result_set = {'rfc': rfc, 'depends_on': depends_on} return HttpResponse(json.dumps(result_set)) Now, I want to pass the values o ...

Using PHP's include/require method with a dynamic path

Looking for assistance with my issue! Ajax is returning the correct information and displaying it in an 'alert(html)' on 'success'. The PHP code echoes $idName and $path correctly on the carrier page where the code resides. There are no ...

The select2 option seems to be malfunctioning as it is not

I have implemented a dropdown using Select2. Although I am able to retrieve data from the backend and display it successfully in Select2, I'm facing an issue with certain data that contains multiple spaces between words. For example: Test&nbsp;& ...

The perplexing actions of Map<string, string[]> = new Map() have left many scratching their heads

I encountered an issue while trying to add a value to a map in my Angular project. The map is initially set up using the following code: filters: Map<string, string[]> = new Map(); However, when I attempt to add a value to this map, it starts displa ...

Can a class be created using a PHP variable as its basis?

Is it possible to define the body color based on a variable in PHP? I have been experimenting with different methods to achieve this. <?php $seperate_sitting_yes = "Yes"; if($seperate_sitting_yes == "Yes") { ?> <style type="text ...

ajax is unable to decode a JSON string from a GET request

Currently, I am leveraging angularjs to retrieve userId, userTitle, and userComment from a form. These values are then sent to a PHP page from the controller for communication with a server. Everything works well when sending integers, but I face an issue ...

Utilizing Material-UI CssBaseline with React JS

Looking to enhance the consistency of my new React app with a sleek design using Material-UI. Want it to be easy to maintain, so decided to start with the default theme. Trying out cssBaseline from Material-UI but running into issues. Not very familiar wit ...