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.
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 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() )
));
}
I'm trying to override woocommerce css class which by default is set to !important. How can I override this?
The Default is:
.woocommerce-error, .woocommerce-info, .woocommerce-message{
padding: 1em 2em 1em 3.5em!important;}
I have tried the following but does not want to know:
main .post .entry .woocommerce-error, .woocommerce-info, .woocommerce-message{padding: 0 0 10px 0 !important;}
Not sure if I can change the original woocommerce stylesheet as I assume the changes I make will be overridden when plugin is updated.
Many thanks.
That's because you're overlooking the comma, there are actually 3 rules inside that line of yours, and you will have to specify it for every one of them. This should work:
main .post .entry .woocommerce-error,
main .post .entry .woocommerce-info,
main .post .entry .woocommerce-message {
padding: 0 0 10px 0 !important;
}
In order to over ride default Woocommerce styles it is best to disable the stylesheets by entering the below in your functions.php file:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
This way you can avoid using !important as this is bad practise and customise the shop to look as you wish.
By default Woocommerce enqueues 3 stylesheets and the above snippet will disable all of them, if you wish to disable just each one individually you can add:
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
Please see here for more info: Woomerce Docs
!important is amazingly evil and should be avoided unless you really 10000% sure you won't regret it (or maybe you want to do a simple utility class, which is okay). I never use Woo-commerce but it is such a shame for them to use !important rule in the css, which will be amazingly hard to make any other style that will beat that specificity.
Anyway, the best way I know is to add an ID to element that you want to override if possible, and add a new selector to improve specificity, and add !important rule to that selector (example below). But if not, wellllllll, I don't know.
#newselector{
padding: 1em 2em 1em 3.5em!important;
}
!important is evil, I hope you won't afraid if it's suddenly eating you alive.
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'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...