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>';
}
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.
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');
This is a wordpress website - https://smecollaborative.org/
Down the page there is a section pulling from the Events Calendar. Each Event has a featured image. You can use CSS to hide the featured image of each image, but the challenge is using the Fusion Builder element, the featured image is replaced with a 'placeholder' image off a calendar, and I can't get that thing hidden.
Here are the two snippets I've tried:
.single-tribe_events .page-header-image-single {
display: none;
}
.tribe-events-event-image img {
display:none!important;
}
.fusion-events-shortcode .tribe-events-event-image {
height: auto !important;
}
The 2 snippets you tried are wrong because:
snippet 1. is targeting the header image on the tribe event single page.
snippet 2. is targeting an img tag which does not exist in this case.
You should target the parent item to also hide the clickable link to it:
.fusion-events-post div.fusion-events-thumbnail {
display: none;
}
I added the extra div to the thumbnail selector to override the standard display: block; without having to use !important
Or, in case you only want to hide it if the image is missing you can do:
.fusion-events-post .fusion-events-thumbnail span {
display: none;
}
This one will only target the placeholder in case it is present
I’m using the Shop Konado theme.
I'm trying to disable the hover effect of the products and leave the "buy" button always visible in the mobile version: https://prnt.sc/t2ul5l (print from my store). Another example: https://prnt.sc/luen4q
I tried to use the following code in the additional Wordpress css:
html .shop-item:hover .shop-item-image:after {
background: none;
}
But it did not work.
This is my store:
https://www.arteverdeagro.com.br/loja/product-category/todos-os-produtos-in-natura/
thanks for the help
This should work.
.box-hover{
opacity: 1 !important;
margin-top:10px !important;
}
I'd like to add a video tutorial for registered users to my dashboard in wordpress. I tried this code:
`<style type="text/css">
.postbox,
.postbox div.handlediv,
.postbox h3.hndle {
background: none;
border: none;
}
</style>
<?php
/* add content */
function customContent() {
echo ' http://www.youtube.com/watch?v=rArpyMXT2ew ';
}
/* add widget */
function add_customDashboardWidget() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Custom Content', 'customContent');
}
/* add action */
add_action('wp_dashboard_setup', 'add_customDashboardWidget' );
?>`
but it only shows the line, not the actual video. What to do?
If you don't feel like coding, and you want to be able to easily add more videos and adjust which roles can see them, I just released a plugin that does that super easily. It's lightweight and simple at the moment, but it definitely does the trick.
https://wordpress.org/plugins/video-dashboard/