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.
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.