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>
';
}
Related
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.
I am trying to enqueue my custom css AFTER woocommerce css but I don't know why it's not working.
it should be quite simple following the documentation here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
that's my code
function my_theme_enqueue_styles() {
$deps = array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general');
wp_enqueue_style('header', get_template_directory_uri() . '/css/header.css', $deps, '3.2.6', 'all');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
my custom css header-css is indeed loaded but before the dependencies.
I tried every kind of possibilities (with or without version number, with or without media parameter) without any success.
I found the same solutions in other sources like this one: https://bigwilliam.com/override-woocommerce-styles-semantically/
even though I can't use get_stylesheet_directory_uri() because mine it's not a child theme.
As you can see in the picture below, woocommerce styles override the height of the class 'logo', because it is actually loaded before and not after woocommerce-layout.css. I don't know what to do.
woocommerce override my custom styles
I got the answer!
my custom css is actually loaded AFTER woocommerce-layout.css and this is a selector cascade css rule issue (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)
this is my HTML
<body class="page-template-default page page-id-5 logged-in woocommerce-cart woocommerce-page">
...
<img id="logo" class="logo" src="img/secondary-color-positive.svg">
...
</body>
the picture above shows that
.woocommerce-page img overrides .logo properties
that's not because my custom css is loaded before (as I was thinking) but because .woocommerce img is stronger than .logo as per selector cascade css rule
I got it fix just changing my css:
from this .logo{...}
to #logo{...}
and now #logo is stronger than .woocommerce img as you can see below
custom css override woocommerce-css
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 working in wordpress, and I am having a bit of trouble.
As you see: in the page "articles" managed with page.php, it shows the categories widget at this point (see image 1),
Then, inside the page "articles", if you click in any subpage, managed by single.php, the categories widget should appear in a different position.
(image 2 is where it should appear and image 3 where it appears). I'm using a plugin to be able to manage structures through the dashboard, so I need to do it inside a php file.
Image 2:
Image 3:
I'm trying to include:
if ( is_page_template( 'single.php' ) ) {
echo '<style type=\"text/css\"> #sub_categories_widget-2 { margin-top: -150%; } </style>';
positioning it in my single.php or in my page.php but nothing seems to happen. Does anyone know what I'm doing so wrong? I make the widget appear though a plugin that creates a shortcode and I can add it in the editor.
Thank you
What you are doing can be achieved with css.
If you are in a single.php file, you should probably have a single class on your body or html tag. If not check this out.
So with this class at the top, now you can target your widget by page, single, page template etc...
.widget {
margin-top:0;
}
.single .widget {
margin-top: 300px //or whatever the height of the image;
}
What you want to do can be simply done by Javascript.
in jQuery use this code.
$('#id_name').css('property_name','property_value');
if you want to add class on particular element you can use .addClass method
$('#id_name').addClass('class_name');
Good Luck!
How can I update the default WordPress Theme Customizer toolbar CSS so that I could for example change the text color from the default black.
The default hook to add admin CSS does not seem to work here add_action('admin_head', 'custom_admin_css');
So for example the #theme-description id, could be change to another color but how?!
*I actually want to add some CSS to a custom option but rather than pasting lots of confusing code I am trying to keep the question simple, so If I can change the CSS for this then I can create CSS for what I need.
Many thanks
You could try the customize_controls_print_styles hook I think:
function theme_customizer_css() { ?>
<style>
// Custom Styles in here
</style>
<?php }
add_action( 'customize_controls_print_styles', 'theme_customizer_css' );