css is not working. It's weird because I see it in the head of my html when I view it with my browser inspector... but its not picking up the new css I add to it. I tried clearing my catch. this is my child theme style.css
/*
Theme Name: Venedor Child
Template: venedor
Version: 1.0
*/
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 164px!important;
}
#s2_form_widget-2 form {
display: none;
}
a.checkout-button.button.alt.wc-forward {
display: none;
}
p.alert.alert-success {
font-weight: bold;
font-size: 1.3em;
}
textarea#order_comments {
font-weight: bold;
font-size: 1.5em;
line-height: 1.4em;
}
and this is my child's theme functions.php
<?php
add_action( 'wp_enqueue_scripts', 'venedor_child_enqueue_styles', 33 );
function venedor_child_enqueue_styles() {
$parent_style = 'style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'venedor-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
Any Ideas???... again I see the child theme style sheet in the head of my pages... just not with the changes I'm making in my wp-admin editor. Thanks!
I have had similar issues with browsers and getting it to update my CSS. In Chrome I had the best success with doing a hard reload (or refresh). To do this, press Ctrl+Shift+R in Chrome. Other browsers have similar ways to accomplish this, mostly pressing Ctrl then clicking refresh.
Chris
You're missing the wp_register_style step to enqueing a CSS asset and have tried to list wp_enqueue_style twice, causing your stylesheet not to get loaded. Here is roughly how to do it (can be different for different parent/starter themes):
function venedor_child_theme_enqueue_style()
{
wp_register_style( 'venedor-child-style', get_template_directory_uri() . '/style.css', array(), '20180227', 'all' );
wp_enqueue_style( 'venedor-child-style' );
}
add_action( 'wp_enqueue_scripts', 'venedor_child_theme_enqueue_style' );
The third array parameter of wp_register_style is important: you need to tell WP which parent stylesheets of Venedor this new stylesheet is related to. It's an array, so look up how to do PHP arrays correctly (they can be wonky). The 5th parameter tells WP which devices to send this too - I set it to all but you could change that.
A Note: The Venedor documentation makes this theme look outdated. It was created in 2014 and has only seen minor updates since then from what I can tell. This theme is designed for non-coders, so you're going to continue to run into problems like this if you use this as your base for a new site.
If you're just trying to tweak some spacing or something in your theme, they offer a very specific set of styles to move stuff around (check the styles page on that documentation link). You probably can also tweak those font-sizing properties inside the theme itself and save yourself from a separate stylesheet.
If you are starting a new site from scratch, stop using themes like this as a crutch and build from scratch. You'll actually save yourself time this way: instead of hunting around someone else's documentation and trying to figure out how they did it, you'll learn how to do it yourself. Try out Sage, it's the gold standard WordPress starter themes and will force you into becoming a better developer.
Related
I need to remove the title from the twentytwenty theme - no problem doing this by removing it in the template of my child theme. However it still shows in the WP editor. Since it is in a divider as below:
<div class="editor-post-title">
I have tried adding a CSS like:
.editor-post-title {
display:none;
}
This works perfectly when I try it locally, in my browser editor - but it does not work when I insert that CSS in my style sheet... any thoughts ?
Your theme's stylesheet only loads on the frontend (generally).
Try this article if you want to add various styles to the editor.
Or for a quick-and-dirty fix you could potentially do something like this, but technically the above way is probably better and less hacky:
add_action( 'admin_footer', 'remove_title' );
function remove_title() {
echo '
<style>
.editor-post-title {
display:none;
}
</style>
';
}
I have a child theme set up. I have a plugin WP-SCSS, I set directories and when I, I think, refresh the page, or maybe it's on save, but somehow the SCSS compiles to CSS. Great, but the issue is the css is not overriding the styles from the parent.
I'm using the bought theme Unicon. I am not sure why this is causing me issues, I don't want to have to keep writing !important on everything.
This is my style.css file:
/*
Theme Name: Unicon Child Theme
Description: Unicon Child Theme for your Customizations
Author: minti
Template: unicon
Version: 1.0
*/
#import url("css/main.css");
#import url("../unicon/style.css");
And my functions.php
<?php
function cls_scripts() {
// wp_enqueue_style( 'cls-css', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'cls_scripts' );
I'm not sure if it's the SCSS plugin causing this, worst case scenario I just don't use SASS and write everything into my style.css, thoughts?
I know I should not really ask this question, but before I get down voted to oblivion hear me out … I try to make the best out of a really bad situation:
My client has bought a WordPress theme and hired me to customize some parts of it. The bought theme is a a child theme and is a coding horror …
The theme’s stylesheet, tries to overwrite some styles from the woocommerce plugin, while the woocommerce stylesheet is loaded after the theme’s stylesheet. To do so it uses a crapload of !important declarations. I can not really fix any of this without breaking the theme update function.
So here is my plan: I want to add another stylesheet at the end, which overwrites all the mess, that has been done before. But simply putting it there would not overwrite all the !important declarations from the stylesheets before. So I was wondering if there is a way to prioritize my stylesheet above all the mess from before.
Any way to up my priority above the !important declarations are also appreciated!
You can either:
Ensure your declarations are equally specific but come later in the stylesheet:
div p strong {color:red!important}
div p strong {color:blue!important}
<section>
<div>
<p>lorem <strong>ipsum</strong></p>
</div>
</section>
Make your declaration more specific:
section div p strong {color:blue!important}
div p strong {color:red!important}
<section>
<div>
<p>lorem <strong>ipsum</strong></p>
</div>
</section>
See: https://css-tricks.com/specifics-on-css-specificity/ for some useful tips.
Normally with a child theme you would directly edit it. But if you are concerned about getting updates for the child theme, you could also deregister the crappy stylesheet and enqueue your own version from a plugin.
<?php
/*
Plugin Name: Fix Theme Stylesheets
Plugin URI: http://stackoverflow.com/q/33544364/383847
Description: Save me from these poorly coded marketplace themes
Version: 0.1-alpha
Author: helgatheviking
Author URI: http://kathyisawesome.com
*/
function so_33544364_custom_scripts() {
$theme = get_template();
if( ! is_admin() && 'your-themes-folder-name' == $theme ){
// get rid of the child theme's crappy stylesheet
wp_deregister_style( 'child-style' );
// optionaly load the parent theme directly instead of importing. can be better for minifying plugins
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// load your improved stylsheet! style.css in the same folder as this plugin file
wp_enqueue_style( 'your-style', plugins_url( 'style.css', __FILE__ ) );
}
}
add_action( 'wp_enqueue_scripts', 'so_33544364_custom_scripts' );
!important is in 99% of cases a lazy way to obtain something that should be reached being more specific; specificity AND positioning are both keys elements, for instance:
p.foo { text-align: right; }
can be overwritten in this way:
body p.foo { text-align: left; }
Specificity is very important and it's the right way to go, here how you can calculate it:
link
ya you will try to using parent div..eg:-
.parent_div Child_div ul li{
margin: 0px;
}
this is way to Without using !important.parent div most be ist preroty rather than !important
I'm trying to add support for CSS3 attributes background-size, background-clip and background-origin, in the custom backgrounds. To do so, I've modified the fully-background-manager plugin (a very simple plugin that sets custom backgrounds per page), to set those attributes.
They seem to be set and stored correctly in the admin interface, but when generating the style tag that sets them, the new values are ignored; the only supported properties seem to be the ones mentioned in http://codex.wordpress.org/Custom_Backgrounds
Custom background are generated by Wordpress itself, not the theme. I know that the theme must enable it use by declaring itself compatible and setting defaults with
add_theme_support( 'custom-background', $defaults );
and Wordpress will generate the custom-background css code
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #bdd96e; }
</style>
And the plugin itself seems to use
add_filter( 'theme_mod_background_image', array( $this, 'fbm_background_image' ), 25 );
to set/override the default css attributes, like 'theme_mod_background_image', but it only prints the css of the supported/overriden variables. In other words, Wordpress does not know theme_mod_background_size, so it cannot override it to print it.
Is there a way to add those attributes to Wordpress itself? I've reading the code of admin/custom-background.php, but I've failed to see any reference to the supported attribute list. Are they in some hidden include? In the the database itself? If I were to set them, would wordpress generate the CSS anyway?
I hope I have explained it properly. I've not found anything about it. The majority of plug-ins set those values in javascript with jQuery instead of using the proper CSS attributes. If not, a tutorial about the internal workings of the lastest version of wordpress itself could be useful as a clue to investigate.
Thanks in advance
Use the callback parameter wp-head-callback with a custom function:
add_theme_support( 'custom-background', array( 'wp-head-callback'=> 'my_custom_background_cb' ) );
You could replace the entire default _custom_background_cb callback function copying and modifying it, but I don't like to duplicate code if is not necessary, so I would do something like this:
function my_custom_background_cb() {
ob_start();
_custom_background_cb();
$buffer = ob_get_clean();
$my_style = "
background-size: 80px 60px;
background-clip: border-box;
background-origin: content-box;
";
echo str_replace('</', $my_style.'</', $buffer);
}
I get the original code from _custom_background_cb and then I can add my style code before echoing.
Obviously you need to put in $my_style your attributes data.
I was reading here, and it seems to be as easy as reference your custom function with the css in it, to the parameter that is for the admin head callback...
<?php
add_theme_support( 'custom-background', array('wp-head-callback' => custom_function));
function custom_function() {
echo '<style>';
//your custom css
echo '</style>';
}
Why not using the admin head callback function to add the other CSS?
I've been trying to use Chrome Workspaces to edit the CSS in my WordPress child theme more efficiently. I followed the tutorial at http://wordimpress.com/using-chrome-devtools-workspaces-for-faster-wordpress-development/ to set it up. It works for the most part, when I edit any element in my child theme, the modification shows up instantly in my browser window and I can save it directly to the local style.css .
The problem occurs when I want to add a new element to my child theme (this element already exists in the parent theme but I did not need to modify it before, so it doesn't exist in the child theme). Using the inspect tool, I found the element in the parent style.css, then copied it over to my child theme editor (in the Source tab of devtools). But making any modifications to that element is not reflected in the live browser once I do that.
For instance, this was the original code in the parent style:
media="all"
.widget a {
color: #777;
}
And I copied this to my child stylesheet and changed it to color: #000 . But there is no change in the color seen in the live browser.
Am I doing something wrong?
If you are using Google Chrome do following
Go to Settings
Clear browsing data
Check all marks
Obliterate the past hour or day, depends on when it worked properly.
Click Clear browsing data
For me it worked.
add !important - to override existing css property
Hope it works
media="all"
.widget a {
color: #777;
}
Change this to
media="all"
.widget a {
color: #000!important;//change
}
It could be down to the cache-busting query string which WordPress adds-
Here is a relevant Chromium bug report.
For now, adding this to functions.php in WordPress in order to remove the cache-busting suffix allows me re-enable persistent edits:
function yourthemename_remove_version( $url ) {
return remove_query_arg( 'ver', $url );
}
add_filter( 'style_loader_src', 'yourthemename_remove_version' );
In future, it looks like Persistence 2.0, recommended at the end of the bug report, will be the solution. It can be enabled as a Chrome DevTool experiment now. Notice that Chrome Canary doesn't work in Linux yet.
Source: https://stackoverflow.com/a/42542366