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');
Related
I'm trying to create a page that scrolls horizontally. I'm working with Elementor Pro on Wordpress and I have the following code:
On the page
.elementor-section-wrap{
display: inline-flex;
}
.elementor-section{
width: 100vw;
}
.header {width: 5vw; }
#media(min-width:770px){
body{
overflow-y: hidden;
overscroll-behavior-y: none;
scroll-behavior: smooth;
}
#margin {
width: calc(100% - 118px)
}}
#media(max-width:770px){
.elementor-section-wrap{
display:block;
}
}
I also added code to the site in the Custom Code feature for Elementor which reads:
<script type="text/javascript">
function replaceVerticalScrollByHorizontal( event ) {
if ( event.deltaY !== 0 ) {
window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
event.preventDefault();
}
}
const mediaQuery = window.matchMedia( '(min-width: 770px)' );
if ( mediaQuery.matches ) {
window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
}
</script>
The website displays as expected, being able to scroll horizontally with the mouse wheel. However, links to sections are not automatically scrolling to the correct section.
The links work when you open them in a new window, but they won't scroll at all.
Could you help me?
I tried to link to horizontal sections both by:
Adding a text box with a link to #section-CSSid
Creating a general menu (which is what I actually need) from WordPress pointing to #section-CSSid
Again, links do work when I open them in a new page, but the issue is with the automatic scrolling.
After trying a lot of different things I went for the Premium Addons Pro plugin, that has the horizontal section scroll and let's you also use section links:
Elementor horizontal scroll widget
If you don't find a solution with code you can try this solution.
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.
My client did a wordpress update and realized the admin page editor changed to a really reduced width while doing bloc editing :
Since he handles a table that is wider than the screen, this doesn't work for his.
Is there a way to widen the view to the available screen width?
Thanks
Yes as frm the screenshot that the wordpress is upgraded to version 5 or above in which Guttenberg editor comes as default. However you can add below plugin into it that will help you to get the screen as it is
This works for me:
<?php
/**
* Plugin Name: Block Editor Full Width
* Description: Fix the block editor width to full size
*/
add_action('admin_head', 'block_editor_full_width');
function block_editor_full_width() {
echo '<style>
.wp-block {
width: 100% !important;
max-width: none !important;}
.editor-styles-wrapper .editor-writing-flow {
max-width: none !important;
margin: 0 !important;}
}
</style>';
}
How to remove Wordpress icon with CSS for not login users in the upper left corner.
Is this possible with css or do I need to go with php?
You can see it on my page http://virtual-forms.com
Edit: added screenshot:
screenshot
create a file with name like removeicon.php and put it in wp-content/plugins/ folder, go to your wp dashboard, plugins and activate it(plugin) and your unwanted icon will disappear for none logged in users:
<?php
/*
Plugin Name: remove icon
*/
function remove_icon_css() {
echo
'<style>
#wp-admin-bar-wp-logo{
display: none;
}
</style>';
}
function remove_icon_code(){
if (!is_user_logged_in()) {
add_action('wp_head', 'remove_icon_css');
}
}
add_action('wp', 'remove_icon_code');
you can also put this code on your /wp-content/themes/{theme-name}/functions.php or child-theme/functions.php
if you want to know about child-themes and functions.php read here
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>';
}