I would like for a site owner to have the option to check a box to add some supplemental CSS to a theme. This seems like it should be pretty easy, but I've not done it before.
I am assuming that I will need a config file for the theme.
I will need a config option to check "Yes" for supplemental stylesheet
I will need some code to add the css if the config is set to "yes."
Am I starting in the right place? Can anyone point me to some examples?
Hi,
I suppose you want people to be able to add css code via UI - is that correct? Some sort of textarea for their own css code?
If you're trying to do something similar to css_injector? Then maybe their code could be a starting point for you.
If it's just about adding different stylesheets (from file system) based on theme settings - Lateral theme does that.
First it needs the form items:
Based on these settings, different css files get added to pages in template.php
Actually, I'm starting to experiment on possible solutions for issue #4167 (Decide on best way to make improvements to the CSS for Basis without breaking existing sites).
I'd like to do a first draft, proof of concept on this idea: Create interface to add a supplemental stylesheet to Basis - to safely make css updates
The idea is that there would be a supplementary stylesheet in Basis (or another theme) and that the site admin could decide whether or not they want that stylesheet included by checking an option in the theme config. This may not be the final solution, but it's the option I want to experiment with right now.
I did already borrow some code from Lateral - THANKS.
So far, I've created the config option on the settings form with this in the theme-settings.php
function basis_form_system_theme_settings_alter(&$form, &$form_state, $form_id = NULL) {
$form['supplemental_stylesheets'] = [
'#type' => 'checkbox',
'#title' => t('Do you want to use supplemental styesheets'),
'#default_value' => theme_get_setting('basis_supplemental_css', 'basis'),
];
}
I can add the stylesheet with
backdrop_add_css($basis_path . '/css/supplemental.css');
But, I'm having problems updating the config setting, so that I can then add logic for when to use the backdrop_add_css option.
What am I missing, to make sure that my configuration is saved when I save the theme settings form?
OK, I got it. This seems to be doing the trick. I welcome ideas for improving this. (EDITED: to fix a minor syntax error)
template-settings.php
function basis_form_system_theme_settings_alter(&$form, &$form_state) {
$form['basis_supplemental_css'] = array(
'#type' => 'checkbox',
'#title' => t('Do you want to use supplemental css'),
'#default_value' => theme_get_setting('basis_supplemental_css', 'basis'),
);
}
template.php
function basis_preprocess_page(&$variables) {
$supplemental_styles = theme_get_setting('basis_supplemental_css');
if ($supplemental_styles==1){
basis_supplemental_css();
}
}
function basis_supplemental_css() {
$basis_path = backdrop_get_path('theme', 'basis');
backdrop_add_css($basis_path . '/css/supplemental.css');
}
OK, I got it. This seems to be doing the trick. I welcome ideas for improving this. (EDITED: to fix a minor syntax error)
template-settings.php
function basis_form_system_theme_settings_alter(&$form, &$form_state) { $form['basis_supplemental_css'] = array( '#type' => 'checkbox', '#title' => t('Do you want to use supplemental css'), '#default_value' => theme_get_setting('basis_supplemental_css', 'basis'), ); }template.php
function basis_preprocess_page(&$variables) { $supplemental_styles = theme_get_setting('basis_supplemental_css'); if ($supplemental_styles==1){ basis_supplemental_css(); } }function basis_supplemental_css() { $basis_path = backdrop_get_path('theme', 'basis'); backdrop_add_css($basis_path . '/css/supplemental.css'); }