Intended Results: Add a custom css to customize the Wordpress login page background.
Steps Taken:
Created a new folder in my theme folder called Login. In this, made a new custom css file called custom-login-style.css.
Added a code to the functions.php, that tells Wordpress to load the custom-login-style.css found in the Login folder.
function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');
The CSS is working fine but has only customized the login form.
Issue: I am not able to customize the background of the login page.
For the page background I have added the following css
body.login {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
body, html {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
CSS for the background is not working but the css meant for the login form is working
Can you give the link to that page.
Most likely you have some CSS problems.
You can open Chrome inspector and watch what is the result css for your login page.
May be !important is used somewhere and your css is not working.
I would recommend to use inline style to make sure it will override the default style:
function my_custom_login() {
?>
<style>
/* Body style */
body {
background: linear-gradient(0deg, #0b4182 1%, #1e88e5 100%) fixed;
}
/* Logo style */
.login h1 a {
...
}
</style>
<?php
}
add_action('login_head', 'my_custom_login');
Well, there might have been an issue with the functions.php code, so I researced a bit and followed the customization as recommended by the Wordpress Codex https://codex.wordpress.org/Customizing_the_Login_Form
Changed
function my_custom_login()
{
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-style.css" />';
}
add_action('login_head', 'my_custom_login');
to that found in codex:
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/custom-login-style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
and body .login css started working and the background got customised. I am unsure why and what exactly resolved the issue, it may be due to enqueing the stylesheet or may be something else. One thing, its always better to research and implement the Codex in case of Wordpress.
Related
I am using gutenberg with wordpress and the sidebar where I can edit the blocks is squeezed to the right, making it impossible for me to edit it:
As you can see in the image, the sidebar is shown partially on the screen and I can´t move to the right.
Here are some things I tried:
1 - Work with another browser (Chrome and Edge). It did not work.
2 - Edditing the code in the plugin (Twenty Twenty), stylesheet in Gutenberg and Stackable plugin:
'mode' => 'edit'
//------------------------------------------------
// Admin CSS
//------------------------------------------------
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo
'<style>
.wp-block {max-width: 900px;}
</style>';
}
As explained in: https://support.advancedcustomfields.com/forums/topic/acf-blocks-cramped-in-right-sidebar-of-editor/
Nothing of these worked. Does anyone have a clue?
Tks
Try to overwrite the css box with this code:
.interface-complementary-area {
width: 380px !important;
}
Or in your theme functions.php add this:
// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
echo
'<style>
.interface-complementary-area{ width: 450px !important; }
</style>';
}
add_action('admin_head', 'my_wider_sidebar');
I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
update: My plugin css does not work in the admin area. the below works on my website for public viewing but not on my admin page that i am building.
original question:
I'm trying to make the html text "Make this red", red!
I have a plugin I've added to my Wordpress plugins folder. In the "bio-plugin" folder in a file called "plugin.php" i have this code:
function register_bio_style(){
wp_register_style('bio-style',plugins_url('css/bio-style.css',__FILE__), false, '1.0.0', 'all');
}
add_action('init','register_bio_style');
function enqueue_bio_style(){
wp_enqueue_style( 'bio-style' );
}
add_action('wp_enqueue_scripts', 'enqueue_bio_style');
then later i have this html working:
<div class='bio_btn'>Make this text red</div>
then i have put bio-style.css in a folder called css and that is in the same directory as plugin.php
the bio-style.css code is:
.bio_btn{
color: red;
background: black;
}
the sentence "Make this red" appears on the (admin) page but it is black.
Try this :
<?php
/*
Plugin Name: Bio
Plugin URI: URL of site
Description: Custom Plugin
Version: 1.0.0
Author: Rohil
Author URI: URL of author
*/
// Register the style like this for a plugin:
wp_register_style( 'biocss', plugin_dir_url( __FILE__ ) . 'css/bio-style.css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'biocss' );
?>
<div class='bio_btn'>Make this text red</div>
I cant make a comment here to ask so im just going to make a semi blind answer here.
Is there another css file with ".bio_btn" in it?
anyways there's probably a child css over riding it.
this is bad method but it will probably work
CSS
.bio_btn{
color: red !important;
background: black;
}
solved! For admin pages you must replace "init" with "admin_init" and "wp_enqueue_style" with "admin_enqueue_style" :)
I am using thematic and have created a childtheme.
Whilst trying to style something in the header I discovered that in my head there are some inline stlyes.
How do I get rid of these styles please:
<style type="text/css">
#blog-title, #blog-title a, #blog-description {
color:#blank;
}
#branding {
background-position: center bottom;
background-repeat: no-repeat;
margin-top: 32px;
}
#blog-title, #blog-title a, #blog-description {
display:none;
}
#branding {
height:235px;
width:940px;
padding:0;
}
</style>
</head>
These styles are likely being added by a function hooked to the wp_head action. For example, something in either your theme or maybe in a plugin you have activated is doing something like this:
function hook_css() {
$output = '<style> .example { color : #eee; } </style>';
echo $output;
}
add_action( 'wp_head', 'hook_css', 10 );
You can either delete the function and the hook to wp_head or you can remove the action via the remove_action() function. For example:
remove_action( 'wp_head', 'hook_css', 10 );
Ref:
http://codex.wordpress.org/Function_Reference/remove_action
http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
Have you got a url for us to look at?
A quick way would be to use jQuery to strip it out.
$('head style').remove();
However removing it properly via php or the theme/plugin would be best
These are generated by theme settings in the admin area, your best option is to find the hook to wp_head and just remove it if it's that necessary.
THanks all.
I have found the offending code. Its burried in the functions.php file in the sample theme that comes with thematic.
Seems a bit weird to me that its in there really... still, it isn't now!
I'd like to add a video tutorial for registered users to my dashboard in wordpress. I tried this code:
`<style type="text/css">
.postbox,
.postbox div.handlediv,
.postbox h3.hndle {
background: none;
border: none;
}
</style>
<?php
/* add content */
function customContent() {
echo ' http://www.youtube.com/watch?v=rArpyMXT2ew ';
}
/* add widget */
function add_customDashboardWidget() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Custom Content', 'customContent');
}
/* add action */
add_action('wp_dashboard_setup', 'add_customDashboardWidget' );
?>`
but it only shows the line, not the actual video. What to do?
If you don't feel like coding, and you want to be able to easily add more videos and adjust which roles can see them, I just released a plugin that does that super easily. It's lightweight and simple at the moment, but it definitely does the trick.
https://wordpress.org/plugins/video-dashboard/