- This topic has 3 replies, 2 voices, and was last updated 2 weeks, 5 days ago by
.
-
Posts
-
Dear Support,
is there any option to extend a widget (in my case latest posts) to 2 columns or more?
I went through all options in customizer and searched for “columns” in support threads.Attached a screenshot which will explain what I mean.
In addition, horizontal widgets on dashboard, instead of vertical, isnt available, right?
Best regards
Hi Floyd,
Thank you for reaching out. 🙂
I’m afraid that you can’t set different size, as the dashboard page is build on a grid. To make some widget wider, you’ll need to use the CSS function
grid-column.However, there might be a workaround in case you don’t feel comfortable using CSS. You can edit your dashboard page with Gutenberg by clicking on “Edit page” and add columns and widgets. Please note that this solution might not be as easy as some bbPress widgets do not have an equivalent block in gutenberg. So, you can copy the widget and paste it in Gutenberg editor, but you can’t find it in the list of blocks. To help you, you can paste this code in a “Paragraph” block:
<!-- wp:columns {"className":""} --> <div class="wp-block-columns"><!-- wp:column {"width":""} --> <div class="wp-block-column"><!-- wp:legacy-widget {"idBase":"bbp_stats_widget","instance":{"encoded":"YToxOntzOjU6InRpdGxlIjtzOjE2OiJGb3J1bSBTdGF0aXN0aWNzIjt9","hash":"16ab6a9f6f6f998729fa413388636a48","title":"Forum Statistics","is_widget_customizer_js_value":true}} /--></div> <!-- /wp:column --> <!-- wp:column {"width":"32%"} --> <div class="wp-block-column" style="flex-basis:32%"><!-- wp:group {"style":{"color":{"background":"#2b3844"}},"layout":{"type":"constrained"}} --> <div class="wp-block-group has-background" style="background-color:#2b3844"><!-- wp:bp/online-members /--> <!-- wp:quote {"className":"is-style-default"} --> <blockquote class="wp-block-quote is-style-default"><!-- wp:paragraph --> <p>Etiam ut purus mattis lorem mauris</p> <!-- /wp:paragraph --><cite>John Doe</cite></blockquote> <!-- /wp:quote --></div> <!-- /wp:group --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:spacer {"height":"0.5rem"} --> <div style="height:0.5rem" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:columns {"className":""} --> <div class="wp-block-columns"><!-- wp:column --> <div class="wp-block-column"><!-- wp:legacy-widget {"idBase":"bbp_topics_widget","instance":{"encoded":"YTo2OntzOjU6InRpdGxlIjtzOjEzOiJSZWNlbnQgVG9waWNzIjtzOjg6Im9yZGVyX2J5IjtzOjc6Im5ld25lc3MiO3M6MTI6InBhcmVudF9mb3J1bSI7czozOiJhbnkiO3M6OToibWF4X3Nob3duIjtpOjU7czo5OiJzaG93X2RhdGUiO2I6MDtzOjk6InNob3dfdXNlciI7YjoxO30=","hash":"7228853fb2d3a31ad86714a50d6a0665","title":"Recent Topics","is_widget_customizer_js_value":true}} /--> <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"><!-- wp:group {"style":{"color":{"background":"#2b3844"}}} --> <div class="wp-block-group has-background" style="background-color:#2b3844"><!-- wp:heading {"className":"widget-title"} --> <h2 class="wp-block-heading widget-title">Featured Posts</h2> <!-- /wp:heading --> <!-- wp:latest-posts {"postsToShow":3,"displayPostDate":true,"order":"asc","displayFeaturedImage":true,"featuredImageAlign":"left","featuredImageSizeWidth":50,"featuredImageSizeHeight":50,"addLinkToFeaturedImage":true} /--></div> <!-- /wp:group --></div> <!-- /wp:column --> <!-- wp:column {"width":"32%"} --> <div class="wp-block-column" style="flex-basis:32%"><!-- wp:embed {"url":"https://www.youtube.com/watch?v=jRcfE2xxSAw","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} --> <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> </div></figure> <!-- /wp:embed --></div> <!-- /wp:column --></div> <!-- /wp:columns -->Hope this will help you.
Cheers,
Hi,
thanks for hints.
I managed to set the 2 columns width with this css code, while block-32 is the widget I choosed.@media only screen and (min-width: 1350px) {
#block-32 {
–dashboard-masonry-column-width: calc( ( 100% – ( var(–dashboard-masonry-gutter-width) * 3) ) / 2) !important;
}#block-32 .wp-block-latest-posts__list {
column-count: 2;
}
}Best regards
Hi Floyd,
Glad to read you’ve been able to achieve that! Thank you for sharing the solution with us. I’m sure it will help other users facing the same issue. By doing this, you’ll make a great contribution to this forum, and we thank you very much for that! #SharingIsCaring 💪🏻
Best,
Hi there,
This topic has been inactive for a while now so we will be closing it to keep the forum tidy. Don't hesitate to create a new topic if you still need help and we'll be glad to help you!
Best regards,
The Themosaurus team.
The topic ‘Two column widget on dashboard’ is closed to new replies.
