How can I update the default WordPress Theme Customizer toolbar CSS so that I could for example change the text color from the default black.
The default hook to add admin CSS does not seem to work here add_action('admin_head', 'custom_admin_css');
So for example the #theme-description id, could be change to another color but how?!
*I actually want to add some CSS to a custom option but rather than pasting lots of confusing code I am trying to keep the question simple, so If I can change the CSS for this then I can create CSS for what I need.
Many thanks
You could try the customize_controls_print_styles hook I think:
function theme_customizer_css() { ?>
<style>
// Custom Styles in here
</style>
<?php }
add_action( 'customize_controls_print_styles', 'theme_customizer_css' );
Related
I'm using wordpress and elementor and some times i need css. Can anyone help me about how I can choose a specific page that css won't work on
I'm using elementor toogle. The toogle come as a closed by default but I want some page's toogle to be opened by default while other toogle, which I use in my website, stay closed by default.
For this purpose, I found the css that is below, but when I use that, all toogle in my website are open by default. For this, I want to except a specific page that the css won't work on.
.elementor-toggle .elementor-tab-content {
display: block;
}
Many thaks for repliers
Using conditional tags, example in the header.php:
<?php if(is_page("page_id or slug")): ?>
<style>
/* some CSS */
</style>
<?php endif; ?>
I need to remove the title from the twentytwenty theme - no problem doing this by removing it in the template of my child theme. However it still shows in the WP editor. Since it is in a divider as below:
<div class="editor-post-title">
I have tried adding a CSS like:
.editor-post-title {
display:none;
}
This works perfectly when I try it locally, in my browser editor - but it does not work when I insert that CSS in my style sheet... any thoughts ?
Your theme's stylesheet only loads on the frontend (generally).
Try this article if you want to add various styles to the editor.
Or for a quick-and-dirty fix you could potentially do something like this, but technically the above way is probably better and less hacky:
add_action( 'admin_footer', 'remove_title' );
function remove_title() {
echo '
<style>
.editor-post-title {
display:none;
}
</style>
';
}
I am trying to change the background and text color for my entire theme using a plug in.
I know it can be done from customizer but I want do learn how to do these basic tasks before I move to something else.
I do not have too much experience in "front-end development"
Thanks in advance!
you can add this function in your plugin and write some css codes.
<?php
function add_to_wp_footer() {
?>
<style>
/* Add Your Styles Hear */
</style>
<?php
}
add_action( 'wp_footer', 'add_to_wp_footer' );
?>
What is the proper way to set all blog posts to have a certain background in WordPress?
Sometimes this depends on the theme but you can achieve this in your CSS. Check to see that your blog posts are adding a particular class to the body tag and then do something like this in your theme's CSS file:
.single-post, .single, .post { background-color: #ff9900; }
That above CSS sets the background color of the page to a certain color, but it only applies to pages that have that CSS class present. I would check your active theme and also refer to the documentation on post classes to be on the safe side.
I'm trying to add support for CSS3 attributes background-size, background-clip and background-origin, in the custom backgrounds. To do so, I've modified the fully-background-manager plugin (a very simple plugin that sets custom backgrounds per page), to set those attributes.
They seem to be set and stored correctly in the admin interface, but when generating the style tag that sets them, the new values are ignored; the only supported properties seem to be the ones mentioned in http://codex.wordpress.org/Custom_Backgrounds
Custom background are generated by Wordpress itself, not the theme. I know that the theme must enable it use by declaring itself compatible and setting defaults with
add_theme_support( 'custom-background', $defaults );
and Wordpress will generate the custom-background css code
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
And the plugin itself seems to use
add_filter( 'theme_mod_background_image', array( $this, 'fbm_background_image' ), 25 );
to set/override the default css attributes, like 'theme_mod_background_image', but it only prints the css of the supported/overriden variables. In other words, Wordpress does not know theme_mod_background_size, so it cannot override it to print it.
Is there a way to add those attributes to Wordpress itself? I've reading the code of admin/custom-background.php, but I've failed to see any reference to the supported attribute list. Are they in some hidden include? In the the database itself? If I were to set them, would wordpress generate the CSS anyway?
I hope I have explained it properly. I've not found anything about it. The majority of plug-ins set those values in javascript with jQuery instead of using the proper CSS attributes. If not, a tutorial about the internal workings of the lastest version of wordpress itself could be useful as a clue to investigate.
Thanks in advance
Use the callback parameter wp-head-callback with a custom function:
add_theme_support( 'custom-background', array( 'wp-head-callback'=> 'my_custom_background_cb' ) );
You could replace the entire default _custom_background_cb callback function copying and modifying it, but I don't like to duplicate code if is not necessary, so I would do something like this:
function my_custom_background_cb() {
ob_start();
_custom_background_cb();
$buffer = ob_get_clean();
$my_style = "
background-size: 80px 60px;
background-clip: border-box;
background-origin: content-box;
";
echo str_replace('</', $my_style.'</', $buffer);
}
I get the original code from _custom_background_cb and then I can add my style code before echoing.
Obviously you need to put in $my_style your attributes data.
I was reading here, and it seems to be as easy as reference your custom function with the css in it, to the parameter that is for the admin head callback...
<?php
add_theme_support( 'custom-background', array('wp-head-callback' => custom_function));
function custom_function() {
echo '<style>';
//your custom css
echo '</style>';
}
Why not using the admin head callback function to add the other CSS?