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" :)
Related
I am using WordPress and the PopUp Maker plugin.
I try to center the 'DOWNLOAD NOW' button, but unsuccessfully.
I should probably use a CSS code but have no idea what to do with it.
Any idea how to fix it?
The css you need is the following:
.pum-container .pum-content button {
display: block;
margin: 0 auto;
}
The pum-container and pum-content should be the fitting class for the popup maker plugin.
Add these lines of code to your functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
wp_register_style(THEME_NAME . '-style', THEME_PATH . '/style.css');
wp_enqueue_style(THEME_NAME . '-style');
}
Then add a file called style.css on the same level as your functions.php and add in the css lines from above
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.
I am working with the Ocean-WP child theme. I have created a stylesheet in the child theme as I know well not to add styles to the parent stylesheet. The problem is none of the styles I write in the child stylesheet are being applied.
Why?
/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author:
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/
#import url("../oceanwp/style.css");
form{
background-color:blue !important;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 374px){
#page-title{
font-size:3.5rem;
}
}
Find the css name from "View Source" on browser. Search style.css and find out the name. Now add the code below to your functions.php file.
The reason wordpress doesn't show updated child theme css because of query string. All you need to do is change the query string version with the code below and clear your browser cache. Enjoy.
function update-child-css() {
wp_enqueue_style('child-theme-css-name', get_stylesheet_directory_uri() .'/style.css', array(), '1.0.1' );
}
add_action('wp_enqueue_scripts', 'update-child-css');
How to remove Wordpress icon with CSS for not login users in the upper left corner.
Is this possible with css or do I need to go with php?
You can see it on my page http://virtual-forms.com
Edit: added screenshot:
screenshot
create a file with name like removeicon.php and put it in wp-content/plugins/ folder, go to your wp dashboard, plugins and activate it(plugin) and your unwanted icon will disappear for none logged in users:
<?php
/*
Plugin Name: remove icon
*/
function remove_icon_css() {
echo
'<style>
#wp-admin-bar-wp-logo{
display: none;
}
</style>';
}
function remove_icon_code(){
if (!is_user_logged_in()) {
add_action('wp_head', 'remove_icon_css');
}
}
add_action('wp', 'remove_icon_code');
you can also put this code on your /wp-content/themes/{theme-name}/functions.php or child-theme/functions.php
if you want to know about child-themes and functions.php read here
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() )
));
}