htmlcssuikitthemescss-frameworks

How can I use PHP variables in css without including the whole file?


So, I am using UIKit and thought I'd be "smart". So, I turned it into a .php file, added style tags, and included it in my page. Apparently, that was a very bad idea. With the 12,241 lines of code being inserted into every page, my site won't even barely load. I am trying to make a select theme option for my users. So, I do it this way:

// Retrieve theme data
$query to select theme information, such as colors

// Example of how this data is used
<style>
.uk-input,
.uk-select,
.uk-textarea {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    border: 0 none;
    /* 4 */
    padding: 0 10px;
    background: #<?php echo $theme_color1; ?>; // RETRIEVED FROM DB
    color: #<?php echo $theme_color3; ?>; // RETRIEVED FROM DB
    border: 1px solid #<?php echo $theme_color2; ?>; // RETRIEVED FROM DB
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}
</style>

So, this is a very bad way of doing it when the css is so large. Can anyone advise me on the correct way to make a select theme option for my users? I would greatly appreciate it. Thank You.


Solution

  • You could try this: Create a separate styles.css file with your default CSS info and in your code, make sure you use a link to reference the CSS file. Then, you could echo a style tag with a change. In your case, give it a default color of black in your styles.css and then in your code, reference only the color using the same selectors you used in your css file:

    styles.css:

    .uk-input,
    .uk-select,
    .uk-textarea {
        /* 1 */
        max-width: 100%;
        /* 2 */
        width: 100%;
        /* 3 */
        border: 0 none;
        /* 4 */
        padding: 0 10px;
        background: black;
        color: black;
        border: 1px solid black
        transition: 0.2s ease-in-out;
        transition-property: color, background-color, border;
    }
    

    In your PHP code:

    echo '
        .uk-input,
        .uk-select,
        .uk-textarea {
            background:'. echo $theme_color1 . ';
            color:'. echo $theme_color3 . ';
            border: 1px solid '. echo $theme_color2 . ';
        }
    ';
    

    I’m sorry if the code is not super readable, I am on my phone doing this.