Wordpress: Featured images all showing with 1px width and 1px height - wordpress

I'm not sure what exactly has caused this, but either after upgrading to the latest WP version or using WP.SmushIt plugin, all my featured/thumbnail images are displaying with 1px width, and 1px height.
The regular images used inside the pages/content are fine, only those that I'm calling using get_the_post_thumbnail($post_id, 'carousel-thumb'); are broken.
carousel-thumb is just a custom size I've defined in my functions.php like add_image_size( 'carousel-thumb', 220, 220, true ); //(cropped)
Any help is appreciated.

Was able to fix the issue using Regenerate Thumbnails plugin.

maybe you need to add this code to your functions.php,
add_action( 'admin_head', 'style_thumbsss' );
function style_thumbsss()
{
echo '
<style type="text/css">
.inside p.hide-if-no-js a img.attachment-post-thumbnail { width: 230px!important; height: 160px!important; }
</style>';
}
or may need to use plugin, called "REGENERATE thumbnails" , which creates new thumbs for the uploads images, and sets them normally.

Related

Wordpress/Gutenberg Sidebar squeezed to the right

I am using gutenberg with wordpress and the sidebar where I can edit the blocks is squeezed to the right, making it impossible for me to edit it:
As you can see in the image, the sidebar is shown partially on the screen and I canĀ“t move to the right.
Here are some things I tried:
1 - Work with another browser (Chrome and Edge). It did not work.
2 - Edditing the code in the plugin (Twenty Twenty), stylesheet in Gutenberg and Stackable plugin:
'mode' => 'edit'
//------------------------------------------------
// Admin CSS
//------------------------------------------------
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo
'<style>
.wp-block {max-width: 900px;}
</style>';
}
As explained in: https://support.advancedcustomfields.com/forums/topic/acf-blocks-cramped-in-right-sidebar-of-editor/
Nothing of these worked. Does anyone have a clue?
Tks
Try to overwrite the css box with this code:
.interface-complementary-area {
width: 380px !important;
}
Or in your theme functions.php add this:
// Wider sidebar on gutenberg backend
function my_wider_sidebar() {
echo
'<style>
.interface-complementary-area{ width: 450px !important; }
</style>';
}
add_action('admin_head', 'my_wider_sidebar');

How to customise the background of Wordpress login page?

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.

How to remove the line under the logo in WooCommerce?

I'm trying to remove the line under the logo at: http://buyfireworks-shop.co.uk/product-category/roman-candles/ I can't remove the white border under the logo. I have tried various css to no avail.
Update this class in inline style sheet #4, you might need to do it in your page builder if you're using one, like Visual Composer or DiviBuilder if you can't find it in WooCommerce; from memory Woo doesn't have admin side styling accessible:
.mk-header { border-bottom: 1px solid #ededed; }
Remove the white border by setting border-bottom to none:
.mk-header { border-bottom: none; }
This style is being added with an inline stylesheet on the page, so you'll need to override it either with important or being really careful about specificity; making sure your .mk-header border fix is in the last css file after the WooCommerce stuff loads.
If you're still having trouble with WooCommerce styles you can disable them entirely in functions.php
// 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;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

How to remove featured image form WordPress post?

I have a WordPress based blog where I want to remove the featured image.
.single-post .attachment-post-thumbnail {
display: none;
}
I cannot find above code in single.php or in any CSS file. Now I don't know how to remove the featured image.
http://www.blogginggadgets.com/xiaomi-redmi-note-prime-price-specifications-features-review/
Try adding this:
.article-featured-image {
display: none !important;
}
It will look like this:
Add this code to your functions.php it will remove that feature image.
add_filter( 'wp_head', 'filter_function_name' );
function filter_function_name(){
echo '<style>.article-featured-image{display: none!important;}</style>';
}

wordpress styles in the head - don't want

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!

Resources