Fully Theme

9211 views 74 replies Created 2023-04-25 15:07
:discourse2: Summary Fully is a simple and fun-to-use theme based on a full-width layout
👓 Preview Preview on Discourse Theme Creator
🛠️ Repository https://github.com/discourse/discourse-fully
📖 New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme

Features

This theme utilizes a full-width theme component made by @awesomerobot 🙏 This theme includes the component for full-width as well as the dark/light theme toggle.


:discourse2: Hosted by us? Themes are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-17T12:11:16Z

Check documentPerform check on document:

This theme can also be previewed here on this website.
image

so no hamburger icon or collapsing sidebar? when i have the sidebar collapsed before switching to this one, how do i get it without having to switch back to get the hamburger icon? unless i am missing something obvious in the UI?

This is an interesting point I totally looked over!

There is no toggle on this theme except at small widths.

At phone size screens there isn’t bigger change how it looks compared to other ”basic” ones so basically this changes things a bit at tablet level — because there is no functional hamburger icon. It may work and look differently at bigger laptops and desktops.

But I really like how the sidebar looks with that, fonts are nice.

So could I suggest you make a component that gives same look to other themes? That would be really nice 😉

Or is it just matter of CSS?

Love this! 💛 Discourse looks great at full width :dancing_women: :star_struck:

Will there be a dedicated topic for the full-width theme component? I see some glitches, but they are related to the component, so I wonder if it makes sense to post here? There will likely be more full-width themes coming that use the component.

[in my opinion] this should be the default discourse theme! with consistent border-radius applied to all buttons

edit: or a simple way to pick a globally border radius

I like this theme but wonder if something like this i possible?

It seems like the full width setup is changing the header layout? I tried using the Header Search component, but it doesn’t show with the theme.
edit: ok, that’s weird. The component didn’t show on my instance where it was already installed and I added the theme. But when I install it after the theme, it shows.

Also, the sidebar scrolls up along with the composer. Well, it also does that on the default layout. But it looks a bit strange when the sidebar is not above the composer, but left of it:

I can confirm this at https://studmed.dk/

Yes this is an artifact of what is actually currently happening in core discourse.

Any solution for this?

Random question: Is there a non full-width version of this theme?

There is not, this is meant to be used with full width.

Are you meaning that each of the sections with arrows would be moved to a widget to the right side of the topic list?

@jordan-vidrine
What I mean is that the “dead” area - the white area that is visible at high resolution, disappears. So the block with the post list moves to the left. Additionally, when using a high-resolution screen, it was possible to place widgets in the area to the right without compressing the size of the block with posts.

If you understand?

This theme currently could possibly handle some widgets on the right hand side. With some tweaking you could also customize some of the CSS here to change widths if you want.

The full-screen chat layout stretches to, well, full-screen. But it’s quite a lot of screen then …

This was intended in order to “mimic” other chat first sites.

After using Fully for a couple of weeks (and loving it :chefs_kiss:), here are two things that popped up:

1. Chat indicator (online/green) isn’t visible when a row is selected

2. Is it possible to add the option to Show/Hide navigation menu?

Screenshot 2023-06-15 100702

I’ve often wanted to collapse the navigation menu to be able to focus on the main body of content in a topic, and also if I’m splitting screens vertically to find more screen space. This is more of a nice-to-have feature request so even a slightly hidden hover option could work.

Working on this this week actually, after more use, I agree that it should be available.


In regard to this, I tried to follow another chat services design implementation.

image

The thing I now realize is that the sidebar background is a darker/different color. So turning the green “online” circle to white when active make sense. I think for the fully theme the issue is that it is turning the same color as the sidebar background, and causing confusion.

I’ll look into changing this as well.

This is just a small thing I noticed, but it’s present on my site and Meta - the “Move” link is now offcenter in the main section of the sidebar.

image

This is more of a small issue, but something that was bugging me a bit.

Which theme do you happen to be using? On the default theme I see this:

Screenshot from 2023-07-11 13-24-58

On Meta, I’m using Fully. I also saw it on try.discourse.org, and I’m not sure if the theme is on there, I’m not using my PC anymore to check.

Update: The theme is indeed installed there and it’s off center too, probably a theme issue.

I suggest doing this in a theme-component rather than me changing this theme’s post width for all of those using this theme.

issue with theme

When setting device to portrait mode then back to landscape and scrolling down, the post looks off when navigating forum

On try.discourse.org, hovering the theme selector on fully makes the text roughly the same color as the background:

chrome_R3UAFuFRtR

chrome_WBt5sUTQNz

It only happens on Fully 🙂 🖌️

Forgive me if this is obvious, but I don’t see a way to duplicate and edit the light color palette used by this theme.

When I look at the Colors section under customize, I see (among others) “Dark” which seems to go with this theme, but I don’t see one called “Light”.

The Theme shows “Light (default)”, but I don’t know how to clone and edit that.

Can you clarify for a poor noob? Thanks!

Is there a way to remove the boxy profiles? We are used to the circle ones

You dont see a “Light” theme in your Discourse customize colors section?

Can you send me a screenshot of what you are seeing?

This is part of the theme, you’d need to override it with a custom theme component if you wish to do so.

I don’t see the default light scheme on any new instance, so this is not related to the theme.

To have the Light scheme on the colors section I’d need to add a new color scheme and then it’s suggested I base it on the default light scheme. But the Light scheme is not present on the colors section by default.

That’s surprising. I wonder if it depends on the color scheme that’s selected when the site is first configured with the setup wizard. Here’s what I’m seeing on a Discourse site I created last week:

If anyone’s running into an issue with there not being a Light color scheme, the method you’re describing should work to create one. Click the “New” button, then create a new color scheme based off the “default light” scheme.

image
The sidebar doesnt expand to fit the site text, is there a way to fix this?

Something here is wonky…

Go to this page and hit the hamburger menu to hide the sidebar…

Here’s what I’m seeing…

What surprised me was that the first time I tried that after selecting the “Fully” theme on Meta, the try.discourse.org topic was displayed with the Fully theme. I’m assuming that’s a caching issue related to the sites being on the same domain.

Is the issue you are pointing out that the Discourse logo isn’t being replace by the small logo when the hamburger menu is clicked on try.discourse.org?

Hmm – The navigation panel on the try.discourse.org site includes an extra div with menu links (.try-header-nav-wrapper) that is breaking the page layout (just on that site) by pushing the header way out to the right when the side menu is hidden, so I see now it’s not a bug in the Fully theme.

Good morning!

I really enjoy using this theme for my forum, but I’ve noticed that, like the default theme, there isn’t an option to customize the CSS/HTML. I would like to add a background wallpaper to the theme. Is it possible to do that?

You could do this by using the customization theme / theme component menu to create a new theme component and add it to this theme.

In your theme component you can add the custom code to add your background.

Hi @jordan.vidrine,

Thank you for your response. I believe I saw this somewhere when I searched for “background change,” but I assumed it was only possible within customizing the CSS/HTML of the theme.

I will give this a try!

Hey, guys! I love this theme! When previewing it on my site, though, I had an issue with the header of the sidebar navigation. Could just the header use a different color (the normal header color for the site)?

This:

image

Instead of this:

How can do that? Changing the CSS, the whole navigation got green.
Thanks!

You want to change the specific variable for —sidebar-color) and that will change the sidebar and above the sidebar.

Hmmm there’s no way of changing just the sidebar header?

I have the same problem, with my header logo falling across two different colours which looks weird.

I thought that editing CSS in themes was discouraged these days? The CSS editor option has been removed for remote themes so how would we change that variable? That also assumes that we want the sidebar colour to be the same as the header.

Hello, You can change that section separately from sidebar with CSS.

For this, you need to create a new component or add to an existing one. :slightly_smiling_face:

  1. Go to /admin/customize/themes/
    Customize → Themes

  2. Click the Components tab and then the Install button

  3. On the popup window click Create new button and type the new component name.

  4. Click Create button.

  5. The component created. Now select Fully theme to activate it.
    Screenshot 2023-10-07 at 12.59.18

  6. Click the Edit CSS/HTML button.
    Screenshot 2023-10-07 at 13.01.24

  7. Paste the below code to the CSS section.
    Screenshot 2023-10-07 at 13.09.46

  8. Don’t forget to save it with the Save button at the bottom.

.desktop-view .has-sidebar-page .d-header-wrap::before {
  background: transparent;
  border-right: none;
}

If you want to keep the right side border then remove that line from code.