I use this plugin to dynamically change the CSS in a user friendly way within the WordPress backend:
http://wordpress.org/extend/plugins/option-tree/
I set it up, and appended it to the theme (not a plugin anymore) - this works.
What I don't get is that those inputs get actually changed. So I set up a input field where the user can add a hexadecimalcode(colorpicker) to change the background, or even the font color.
How do I get this information to change in my CSS? I tried:
body {
{{custom_background_css}}
background-color: {{custom_background_css|background-color}};
}
where custom_background_css the id of this input field is. but nothing changes. I also read the documentation but I don't get it...
To adjust theme options for CSS, you'll have to include the CSS in your header, or write a .php file that generates the CSS you want, and link to that. But maybe the easiest way is to hook wp_head from functions.php, and write the code directly there. See below for a schematic example to add to your functions.php
// this is the hooked function
function add_css() {
echo "dynamically generated CSS here";
}
// Add your wp_head hooks
add_action('wp_head', 'add_css', 5);
Related
Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/
Any CSS the customizer generates will be written directly into the head section.
The customizer API uses the wp_head hook for that.
I would like to take hold of this CSS somehow and connect it to style.css.
What I want to do is the following:
The Customizer spits out a class .red {color:red;}
I'd like to grab this information and transfer it into my style.css somehow.
Ideally the Customizer CSS would be inserted at the beginning of my style.css
EDIT Just to clarify: By "Customizer CSS" I am referring to CSS information generated by a color picker control for example. Not the CSS from that "Custom CSS" input field – this one I can just copy and paste into my style.css
One idea is to save the customizer CSS output not in the head section via wp_head but somewhere else, into a file for example.
How can I do that?
Is there a hook for that, is it even possible and does it make sense?
This is just one idea of mine – I am open to completely different approaches as well.
I think writing into a file directly is not a good idea at all. Because next time the value is changed, the previous written CSS would be unnecessary. Dynamic values should be changeable. As you write the output value into the file as suggested, the previous generated value will always be there which is redundant.
The best approach would be using wp_add_inline_style Refer here.
Use the following method to add the CSS to the refereed file:
function my_styles_method() {
$color = get_theme_mod( 'color-picker-control' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: sachet;
}";
wp_add_inline_style( 'main-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
I’m inside the New Post page on WP-Admin, where you can create a new post.
At the right column, there’s the category selector, in which you select the category for that new post.
I have something like 15 categories, and therefore the category box is showing with a scrolling bar. Since I need to automate some post creation, I need all the categories to be visible right away, without having to scroll.
So I found the css file that manages the height of the category box (it’s inside /wp-admin/css/edit.css and //wp-admin/css/edit-rtl.css) and there I changed the CSS files to allow a bigger height by default on that box.
However when I open the new post page, it still shows the small box in categories, and when I see the CSS rule, the change I made is not visible. It’s like the CSS is cached or something. I already made sure that my browser is not caching it.
The problem I think it’s because the CSS rules are not pulled directly from CSS files, but from this file:
http://www.website.com/wp-admin/load-styles.php?c=0&dir=ltr&load%5B%5D=dashicons,admin-bar,buttons,media-views,common,forms,admin-menu,dashboard,list-tables,edit,revisions,media,themes,about,nav-menu&load%5B%5D=s,widgets,site-icon,l10n,wp-auth-check&ver=4.7
That file seems to go and gather the CSS information from some place (which I assumed was the CSS files in the wp-admin/css/ folder, in which I could find the exact same CSS rules that were applied to the category box) but for some reason, it’s not retreiving the updated CSS file. Or something else is happening (Server side caching the PHP response and therefore retreiving all the time the old response?)
I wouldn't recommend tampering with core admin files, as any changes you make could be lost from a WordPress update.
The proper way to do it is through a custom function added to your theme or child-theme functions.php file:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
/* remove scrollbar from categories panel */
.categorydiv div.tabs-panel { max-height: none !important; }
</style>';
}
Another options that will allow you to have CSS for individual pages is to use this OH header/footer plugin. Once you install the plugin you can then add your CSS in the header textarea of the pages admin. Just make sure you enclose your CSS within a <style></style> tag.
I'm just starting out with drupal and need some custom html for an intricate menu system. My plan is to override the html-generating functions in template.php.
My theme name is "Drupal subtheme" and the navbar I would like to target has the machine name "menu-usm-navbar-small". What should I name the functions that overrides the default html-printouts?
I think I have tried every possible combination of these. Some examples of what I've tried:
function drupal_subtheme_menu_link($variables) {
return "foo";
}
function drupal_subtheme__menu_usm_navbar_small($variables) {
return "foo";
}
If you want to place custom HTML inside, why do you need to do it trough Drupal's functions?
Let's say, that you want to insert your code into page.tpl.php (most likely) - just open that file, edit it, add your code there.
Since you are overriding some theme - copy that file from original theme, and then edit it (don't forget to clear the cache).
I've just discovered that if you want to alter a specific page (or group of pages) all you need is to add templates file to the core templates. For instance, I need to theme my /helloword page using a page--helloworld.tpl.php and node--helloworld.tpl.php template files.
Now all I get is a blank screen so I tried to write a preprocess function that adds support for custom theme files like:
<?php
/**
* Adding or modifying variables before page render.
*/
function phptemplate_preprocess_page(&$vars) {
// Page change based on node->type
// Add a new page-TYPE template to the list of templates used
if (isset($vars['node'])) {
// Add template naming suggestion. It should alway use doublehyphens in Drupal7.
$vars['template_files'][] = 'page--'. str_replace('_', '-', $vars['node']->type);
}
}
?>
I see no syntax error but I still get a blank screen. Still no luck
Is someone able to figure out what's wrong in the code/routine?
Drupal7 + Omega Sub-Theme
Kind Regards
I think there's a tiny bit of confusion here: a template file named node--type.tpl.php will automatically be called for any node which has the type type...you don't need to add the template suggestions in yourself.
There is one caveat to this, you have to copy the original node.tpl.php to your theme folder and clear your caches otherwise Drupal won't pick it up.
Also you don't want to use the phptemplate_ prefix...rather you want your function to be called MYTHEMENAME_preprocess_page.
Your code to add the page template based on the node type looks spot on, see if you still have the problem after you change your function name and clear the caches.
Hope that helps :)