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');
Related
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've created a child theme of the Renovation theme. In the child's theme folder I have a "style.css" and a "functions.php" file. My style.css looks like this:
/*
Theme Name: Renovation Child
Theme URI: http://renovation.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 2.0.4
Template: tm-renovation
*/
/*
* #charset "UTF-8";
*/
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important;
padding-bottom: 35px!important;
}
My functions.php looks like this:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
if ( !function_exists( 'renovation_enqueue_scripts' ) ):
function renovation_enqueue_scripts() {
wp_enqueue_style( 'renovation-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css' );
}
endif;
add_action( 'wp_enqueue_scripts', 'renovation_enqueue_scripts' );
// END ENQUEUE PARENT ACTION
Unsing the inspector I see that the parent css is being loaded first and it looks like this:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 30px!important;
padding-bottom: 35px!important;
}
My CSS is being loaded after the parent CSS and it looks like this, except it's all crossed out:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important; <-- MY CHANGE
padding-bottom: 35px!important;
}
I've read alot of threads about specificity, and I noticed that my css and the parent css are identical, except for the "padding-top" change I made. Since the child is loaded last, I expected my css to take precedence, but it's not. My css is crossed out in the inspector and the parent is being used.
This doesn't seem right to me, and I was hoping that someone could clarify my understanding of the parent/child relationship and help me fix this problem. Thank you.
if you are only going to override one element and not apply this to multiple it might be best to use an id instead of a class. The id is always overwrites a class.
I have a wordpress site which has styles made from the beginning to affect the original text editor wordpress .
For example:
If the text editor , in the "Visual " tab, I put a left-aligned image , this does not align , I assume that the class that you are placing the editor does not exist. This applies also to the " p " tags have different styles which you placed the editor ( "visual" tab).
Having explained this, how do I put classes and original styles of the "Visual " tab of the editor , so that it functions as it should ?
Any ideas ?
Thank you
You can add a custom stylesheet for the visual editor.
In your theme functions.php :
function my_editor_styles() {
add_editor_style( get_stylesheet_directory_uri() . '/css/custom-editor.css' );
}
add_action('after_setup_theme', 'my_editor_styles');
Then in your custom-editor.css file, add your rules in this way to prevent any conflict with WP admin:
body#tinymce.wp-editor p {
color: red;
}
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'm going to make WP widget plugin and want to make it theme independent.
What I mean about this is the fact that I need this widget to keep style set in its CSS regardless of theme used. I'm worrying that theme will overwrite its style.
What's the best CSS technique to do this ? Should I use style based on widget ID(#) or its Class(.) ?
It's unlikely that someone overwrite your style if you define a container with an ID and have all your style declarations use this ID in the selector.
#MyWidget p {
color: #ffcc00;
}
#MyWidget p a {
text-decoration: none;
}
The more specific your selectors are, the more priority they have.
when the wp_head() function is fired, use that to include a stylesheet to your css file..
function wp_mywidget_css() {
$siteurl = get_option('siteurl');
$url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/styles.css';
echo "\n\n<!-- your plugin css styles -->\n";
echo "<link rel='stylesheet' type='text/css' href='$url'>\n";
echo "<!-- /your plugin css styles -->\n\n";
}
add_action('wp_head', 'wp_mywidget_css');
place a file called 'styles.css' your plugin folder, which would include the code from the post above, this should stop any theme messing with your styles, just name your widget styles something unique...