How to implement dynamic css on a website?

Konstantin2020-05-15 17:16:00

css

Konstantin, 2020-05-15 17:16:00

I am developing a WP theme and in the future I would like to implement the ability to edit the colors of text, blocks, and so on in the admin panel.

How can this be implemented? I guess it should probably be that the colors are given as variables.

Answer the question

In order to leave comments, you need to log in

8 answer(s)

Arseny, 2020-05-15
@gradk

1. CSS Variables (See browser support right away).
2. Display data in the tag <style>during page generation (common method in WP themes):

<head>
    ...
    <style>
        .classname {
            color: <?= $settings['classname_color']; ?>;
        }

Nothing complicated, on WP everything is formed inside PHP files, which can do this out of the box, the main thing is to enter the variable into the view from the config (like any other for output, of course).
3. Generate a CSS file that will be included in the body.
4. When outputting, generate inline styles in tags (oh, but it's possible).
5. Transfer to JS, which generate dynamic styles. The principle is described in the JS documentation . The only question is how the data will get there, it can be, say, a method a la API to fetch JSON or enter a variable directly into the body:

<script>
    var data = <?= json_encode($settings); ?>
    document.querySelector('.classname').style.color = data.classname_color;

Of course, for all methods, except for the first one, you must have senders and addressees of changes, fallbacks, etc. coordinated with the backend.
6. If it weren’t for WP with its conditionally finished look, then you can compile raw Sass types at the backend level, passing data from the database to it using the assembly (I think this can be done under WP, but I haven’t tried it personally).
PS: Gradation from first to fifth → in order of absurdity, the higher, the more adequate. 6 is already on its own.

Dima Polos, 2020-05-15
@dimovich85

Yes, and for example, you can physically open and rewrite the css file through php, or you can even more simply display variables in the template through the style tag, or as a style attribute.

Lord_Dantes, 2020-05-15
@Lord_Dantes

I would do the following.
Through the ACF plugin, I would display the fields that need to be edited in the admin panel on the desired page. Then these values would be inserted into the site.

adequm, 2020-05-16
@adequm

In pure css, you can create variables:
(inside the style.css file)
:root {
--color: #eee;
-fontSize: 14px;
}
Then use these variables anywhere
body {
backgroud-color: var(--color);
font-size: var(--fontSize);
}
You can easily insert a tag into the html at any time
=> the styles using your variables will automatically change. So, for example, you can easily switch the theme (day / night) of the site only by changing the tag

Eugene Burmakin, 2014-01-20
@FCh

Google masonry, it's a "brick" design if I get the idea right.

DobroFenix, 2014-01-19
@DobroFenix

This is called a curved non-adapted code without fitting images to one resolution. When images of different sizes are inserted into the html table, this is how it turns out. Looks crooked and not pretty

Ruslan Kasymov, 2014-01-19
@HDAPache

collage

Matvey Pravosudov, 2014-01-19
@oxyberg

Umm , isotope.metafizzy.co