[![enter image description here][1]][1]I added I some classes to my functions.php like so:
add_action('admin_menu',
'wpso_custom_links_admin_menu');
function wpso_custom_links_admin_menu() {
global $submenu;
$submenu['index.php'][] = array('Link One', 'read',
'https://www.example.com/', '', 'jobs-dashboard');
$submenu['index.php'][] = array('Link Two', 'read',
'https://asdf.com/', '', 'events-dashboard
');
}
Then I added css:
. jobs-dashboard {background-color: green;}
Didn't work. Why not?
[1]: https://i.stack.imgur.com/IEdMC.jpg
It looks like you are using your themes additional CSS option, which is typically for front end CSS changes.
To add CSS to the admin area you can use the admin_head hook in your functions.php.
add_action('admin_head', 'my_custom_css');
function my_custom_css() {
echo '<style>
.jobs-dashboard {background-color: green;}
</style>';
}
I think it doesn't work because you put a space in you class:
. jobs-dashboard {background-color: green;}
Related
Woocommerce injects the following inline css rule into the head section of my theme. Any idea how to remove it through my child themes functions.php?
<style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
If im not missing anything the following code block in the woocommerce plugins file ...woocommerce-includes/class-wc-frontend-scripts.php is responsible for it.
// Placeholder style.
wp_register_style( 'woocommerce-inline', false ); // phpcs:ignore
wp_enqueue_style( 'woocommerce-inline' );
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_highlight_required_fields', 'yes' ) ) ) {
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: visible; }' );
} else {
wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: hidden; }' );
}
The following action removes
<style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
from the head section. Code goes into your functions.php file of your child or parent theme.
Input from O. Jones in the comments: Or, consider using the Code Snippets plugin to hold these small tweaks to a site. If you edit functions.php you may (a) have it overwritten by an update, (b) possibly lose track of where you put your tweaks.
// Remove the following from head section - see source code
// <style id='woocommerce-inline-inline-css' type='text/css'>.woocommerce form .form-row .required { visibility: visible; }</style>
add_action('wp_enqueue_scripts', 'remove_woo_inline_css_head_ac',11);
function remove_woo_inline_css_head_ac() {
wp_deregister_style( 'woocommerce-inline' );
}
Just add // before function to comment that line
This is the code correctly:
// Placeholder style.
wp_register_style( 'woocommerce-inline', false ); // phpcs:ignore
wp_enqueue_style( 'woocommerce-inline' );
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_highlight_required_fields', 'yes' ) ) ) {
//wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: visible; }' );
} else {
//wp_add_inline_style( 'woocommerce-inline', '.woocommerce form .form-row .required { visibility: hidden; }' );
}
We try to apply a certain css rule to a product backend page not the frontend page.
But there are 2 types of pages one which is when you click create product and one when you click edit product.
We need to apply the css rule to both of these pages.
We achieved half of the answer by determining part of url when we click add product in the backend by the solution below:
add_action( 'init', 'bbloomer_apply_css_if_url_contains_string' );
function bbloomer_apply_css_if_url_contains_string() {
$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
if(false !== strpos( $url, 'post_type=product' )){
echo '<style type="text/css">
#ovaem_sectionid { display: none !important }
</style>';
}
}
We hope if there is a thing like (is_Product) but for the backend can be used for both when adding a new product or when editing an existing product page to apply this css.
<body> contains .post-type-product class, use it as the first selector
function my_custom_css() {
echo '<style>
.post-type-product #ovaem_sectionid {
display: none !important;
}
</style>';
}
add_action('admin_head', 'my_custom_css' );
In a WordPress blog I want to disable admin/logged users topbar.
add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
show_admin_bar(false);
}
The code above removes the admin bar but it still prints the following CSS and I need to remove it because it is useless.
<style type='text/css'>#wp-admin-bar-ai-toolbar-settings .ab-icon:before{content:'\f111';top:2px;color:rgba(240,245,250,.6)!important;}#wp-admin-bar-ai-toolbar-settings-default .ab-icon:before{top:0px;}#wp-admin-bar-ai-toolbar-settings .ab-icon.on:before{color:#00f200!important;}#wp-admin-bar-ai-toolbar-settings-default li,#wp-admin-bar-ai-toolbar-settings-default a,#wp-admin-bar-ai-toolbar-settings-default li:hover,#wp-admin-bar-ai-toolbar-settings-default a:hover{border:1px solid transparent;}#wp-admin-bar-ai-toolbar-blocks .ab-icon:before{content:'\f135';}#wp-admin-bar-ai-toolbar-positions .ab-icon:before{content:'\f207';}#wp-admin-bar-ai-toolbar-positions-default .ab-icon:before{content:'\f522';}#wp-admin-bar-ai-toolbar-tags .ab-icon:before{content:'\f475';}#wp-admin-bar-ai-toolbar-no-insertion .ab-icon:before{content:'\f214';}#wp-admin-bar-ai-toolbar-ad-blocking .ab-icon:before{content:'\f160';}#wp-admin-bar-ai-toolbar-processing .ab-icon:before{content:'\f464';}#wp-admin-bar-ai-toolbar-positions span.up-icon{padding-top:2px;}#wp-admin-bar-ai-toolbar-positions .up-icon:before{font:400 20px/1 dashicons;}</style>
What PHP code or filter would you use to remove it?
NOTE: I want to remove CSS output, not hiding divs!
Try this, to remove that inline css. Copy this to your functions.php
add_action('get_header', 'remove_admin_login_header');
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
if (!function_exists('disableAdminBar')) {
function disableAdminBar(){
remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 ); // for the admin page
remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 ); // for the front end
function remove_admin_bar_style_backend() { // css override for the admin page
echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
}
add_filter('admin_head','remove_admin_bar_style_backend');
function remove_admin_bar_style_frontend() { // css override for the frontend
echo '<style type="text/css" media="screen">
html { margin-top: 0px !important; }
* html body { margin-top: 0px !important; }
</style>';
}
add_filter('wp_head','remove_admin_bar_style_frontend', 99);
}
}
// add_filter('admin_head','remove_admin_bar_style_backend'); // Original version
add_action('init','disableAdminBar'); // New version
//JUST PAST THIS function.php
Here is my code in functions.php :-
<?php
add_theme_support('menus');
register_nav_menus(
array('primary' =>__('Primary Menu'))
);
function awesome_script_enque(){
wp_enqueue_style('customstyle',get_template_directory_uri().'css/awesome.css',array(),'1.0.0','all');
wp_enqueue_script('customjs',get_template_directory_uri().'css/awesome.js',array(),'1.0.0',true);
}
add_action('wp_enqueue_scripts','awesome_script_enque');
function awesome_customizer_register($wp_customize){
$wp_customize->add_section('awesome_colors',array(
'title' => __('Colors','awesome'),
'description'=>'Modify the theme colour' )
);
$wp_customize->add_setting('background_color',array(
'default' => '#fff',
));
$wp_customize->add_control( new
WP_Customize_Color_Control($wp_customize,'background_color',array(
'label' =>__('Edit Background Color','awesome') ,
'selection' =>'awesome_colors',
'settings'=>'background_color'
)));
}
add_action('customize_register','awesome_customizer_register');
function customtheme_customize_css()
{
?>
<style type="text/css">
h1{color:<<?php echo get_theme_mod('background_color','#fff'); ?>}
</style>
<?php
}
?>
I referred lots of tutorial all of them had same process. Still I am not able to get customizer box named Colors in customize area where there are options like menus ,static front page etc..... Can any one point out what I am doing wrong ?
Here is the small mistake on your code. On the last line, you have change font color, not background and also you are not adding function via a hook. Below is the correct code:
function customtheme_customize_css()
{
?>
<style type="text/css">
h1{background:<?php echo get_theme_mod('background_color','#fff'); ?>}
</style>
<?php
}
add_action( 'wp_head', 'wpdocs_style' );
I'm using TinyMCE in WordPress, and when you type in the editor, the color of the text is #333333 or rgb(51, 51, 51). What's odd is that the default color in the "Select text color" button is #eeeeee, yet when you type on page load, it's still #333333. I'm using this function in functions.php to set the colors:
function change_mce_options( $init ) {
$init['theme_advanced_default_foreground_color'] = '#eeeeee';
$init['theme_advanced_text_colors'] = 'eeeeee,ff4343,8383cc';
return $init; }
add_filter('tiny_mce_before_init', 'change_mce_options');
How do I change both the default font color and font family of text entered into the editor?
Create my-editor-style.css stylesheet in your theme root folder and put your styles there:
body#tinymce.wp-editor {
font-family: Arial, Helvetica, sans-serif;
}
body#tinymce.wp-editor a {
color: #4CA6CF;
}
And finally load this file by adding following hook into your functions.php file:
add_action( 'init', 'wpse8170_add_editor_styles' );
function wpse8170_add_editor_styles() {
add_editor_style( 'my-editor-style.css' );
}
Read more about editor styles in codex.