Discourse Full-width component

Theme component
1
:information_source: Summary Make Discourse occupy the full browser width
:eyeglasses: Preview preview
:hammer_and_wrench: Repository Full-width component
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:warning: This is still an experimental component, which overrides widgets, will most likely break with header refactors, and will not play well with other header components.

We’ll do our best to maintain this component and to minimise breaking changes, but we can’t guarantee these will never occur. A fix will most likely come, but you may have to wait a bit longer.

Example:

image
image1920×1083 78.2 KB

This component is currently also be used in the Fully and the “Default (full width)” theme here on Meta.

On very wide screens this might be less suitable.

11 Likes
4

It would be cool if this component interacted with the right sidebar component and carried it as far to the right as possible for symmetry.

image
image1857×920 138 KB

4 Likes
5

I just updated to the latest version, and now I’m noticing an error on my screen

image
image1535×126 22.6 KB

Discourse version: 3.3.0.beta1

3 Likes
6

If you upgrade Discourse, that should fix your problem.

Three days ago, the component got an update that relies on a recent addition in Discourse core.

6 Likes
7

You were right

2 Likes
8

Me too,
I use Fully Theme and this Theme Componet, How can we expand Table Inserted Full Topic-page?
Thank you!

image
image3186×1550 439 KB

1 Like
9

You can try overwriting the CSS variables.

Create a theme component and attach it to Fully.
In the Color Definitions, add and adjust the variables:

:root {
    --topic-body-width: 100% !important; // 690px
    --d-max-width: 100% !important;  // 1110px;
}

image

3 Likes
10

Success.Thank you so much :slight_smile:

1 Like
11

image
image1691×970 87 KB

image
image1920×977 121 KB

Hopefully it will be compatible with this theme

12

A post was split to a new topic: Topic titles and excerpts appear in different font sizes

13

image
image618×620 23.2 KB
image
image550×550 29.4 KB

Some category names are long and do not display fully in the sidebar.

How can we increase the width of the sidebar to match the length of the category name?

Thank you so much!

14

Hi,

  1. Is this component still experimental or fine to deploy in production environments ?

  2. Is this component officially supported ?

Thanks!

1 Like
16

it’s officially supported in that we’ll look at bugs that are reported, but it’s still experimental in the sense that it’s not something we expect to work well with all themes and theme components

3 Likes
17

Given the announcement over here, I wanted to point out some discrepancies in experience when using the Full Width component and the header search feature.

Safe Mode:

Safe Mode + Full Width component:

I assume at least the same experience should be the case, if not simply collapsing the header search to an icon for very low page widths (like on the mobile view).

18

We just recently merged a fix to ensure the header search bar collapses to the icon on small screen widths. Once you’ve updated Discourse, could you please take a look and let us know if that’s looking better?

1 Like