Discourse Custom Width

Customization Theme component

AI-generated summary

The discussion revolves around a Discourse theme component called “Discourse Custom Width” by Canapin, which allows users to set a custom width for their forum, with a default max of 1110px and a limit to prevent layout issues. daemon suggests supporting other units like percentages and proposes a validation system to avoid breaking the layout, but Canapin notes CSS limitations. twofoursixeight and daemon inquire about a “light full-width” theme, with Don sharing a link to a related repository. Canapin considers enhancing the component with user-specific settings. Nick_Tomlinson also seeks information on full-width themes, while Heliosurge mentions a separate issue with broken links in the Multilingual plugin.

1
:information_source: Summary Set a custom width for your Discourse forum
:eyeglasses: Preview Theme Creator (1400px width)
:hammer_and_wrench: Repository GitHub - Canapin/Discourse-custom-width: Set a custom width for your Discourse site. · GitHub
: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

This very simple theme component has a single setting that defines your forum’s width.

image
image748×791 20.7 KB

The width can’t exceed your window’s width or be less than the default Discourse’s max width of 1110px.

Example width a 1400px width:

2498×1369 245 KB

7 Likes
Why is the text content small?
Changing to Full Width
Switch the new sidebar from left to right side (english forum)
2

Hi!

Why only fixed width with px?

I have this in my css:

:root {
	--d-max-width: 80%;
}

.topic-body {
	width: 90%;
}

#reply-control {
    max-width: 80%;
}

.body-page {
    width: 100%;
    max-width: 100%;
}
3 Likes
3

This is a good idea to allow other units, but in this case, I wouldn’t know how to prevent users from setting a value too low that would break the layout.

I’m open to any ideas and PR :slight_smile:

3 Likes
4

Is this theme component related in any shape or form to the light full-width theme?

5

That’s really good question but I think you have trust the users.

I would seperate the value from the unit and make a “if-else query” inside the css if they use px or % and then a second if inside to check the value if it’s to small.

if px
   if value < 1100px
     set value 1100
   else 
     set value to variable
else if %
   if value < 50 %
     set value 50%
   else 
     set value to variable

I’m honest that I don’t know atm if this is possible in a css file.

2 Likes
6

It isn’t. Do you have a link to this theme? I couldn’t find it :thinking:

2 Likes
7

I would love to have “light full-width”, too.

Can please someone from the @team release the css for it?

2 Likes
8

Can’t find it either, I think this theme is exclusive to this forum.

1 Like
9

I saw the theme you’re talking about. Yes, it looks like each other and I could also add a setting to set the width of the content as well.

To make the theme component more unique, I could set the fields in the user’s settings so everyone could have their own preferred width.

2 Likes
10

I’ve been looking for that answer myself!

@sam @Falco any idea where we can find info on how to do the light and dark full-width theme? :innocent:

1 Like
11

I think here is the full width theme repo: GitHub - discourse/discourse-full-width-component: Make Discourse occupy the full browser width · GitHub

5 Likes
13

Found the same issue in the Op post in Multilingual plugin links seem broken.

1 Like