🏡 Fully, a Full Width Discourse Theme

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.

1 Like

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?

1 Like

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!

1 Like

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!

1 Like

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.

3 Likes

Thanks for that Don. I’ve not modified Discourse CSS before though…where do I make this change?

2 Likes

I’ve updated the post above. :slight_smile:

5 Likes

Thank you. Just done it and everything looks good again :smiley:

2 Likes

As the theme is now, there’s a very tiny space left on the right border for this to be done. I think it would be interesting to have more space there and use it for widgets.

1 Like

I let my users have access to the theme and they quickly found something odd going on :roll_eyes:

I use the Custom Header Links theme component and with the other theme I use (Material Design), as you reduce the browser window width when you reach the point that that links would overwrite the site logo the logo shrinks, eventually becoming pretty tiny, e.g.

image

With Fully the logo doesn’t shrink so eventually you get this…

image

Custom Header Links removes the links and displays the topic title when viewing a topic. The topic title also overwrites the logo in narrower browser widths, although eventually the logo is completely removed which resolves the issue.

I’m not sure if this is a Fully or a Custom Header Links issue, but I’m starting here as CHL does work OK in the other theme.

1 Like

It seems it has a little conflict with discourse-full-width-component and wider logos.

You can quick fix this with :arrow_down_small:

Paste this in the previously created component after the previous code just to be in one place.

It will shrink the logo.

.desktop-view .d-header .title a {
  flex: auto;
}

Update: Hmm I think it probably shrink too much with hidden sidebar… :thinking: I just take a quick look and I think it will be something with grid. But I think better to wait the official way of this because I don’t want to break the header ux with changing on the grid.

@packman please remove this code.

3 Likes

Thank you again! You’re doing wonderful deeds today :slight_smile:

3 Likes

Hey, Don! Another issue: changing it this way makes it look the same on dark mode. How can I change the css only for a specific color scheme?

1 Like

The logo does get very small in a narrow window but that also happens with Custom Header Links when used with the Material Design Theme.

I was looking at the CSS earlier and I think it might not be helping that the logo is included inside span.header-sidebar-toggle, although maybe that’s the only sensible place for it in a wider display?

1 Like

Hello @Renato_Mendes :wave:

Oh I see, so you only want to use the transparent background on one color scheme. I didn’t know that.

There are several ways to do this :arrow_down_small:

  1. dark-light-choose(): It’s possible to do this with it but not to practical in this case as it’s create variables. Better to use for colors.

  1. schemeType: This one is better to this use case if you want to use it by scheme type.
Use schemeType

Here is how to use schemeType

Remove the previous code from the component you created and place the new one to the component Color Definitions section as you see on the image.

This will only activate the code on light scheme.

Common / Color Definitions

@if #{schemeType()} == light {
  .desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

  1. Targetable Color Schemes : If you have more color schemes and/or want to target a specific color scheme where you want to change things then this theme component is ideal for you.
Use Targetable Color Schemes

This component puts the actual color scheme to the html so you can target it with CSS.

Here is how to use it:

Install the component.
Check the color scheme id where you want to change things.
You can find here
Screenshot 2023-10-08 at 10.10.30

or

/admin/customize/colors
Colors page. Here if you click a color scheme the id will adds to the URL.

Now you can use this in the code. Don’t forget to remove the previously added code.

Screenshot 2023-10-08 at 10.17.05

html[color-scheme="your-color-scheme-id"] {  
  &.desktop-view {
    .has-sidebar-page {
      .d-header-wrap {
        &:before {
          background: transparent;
          border-right: none;
        }
      }
    }
  }
}

Hello @packman :wave: I sent you a PM.

2 Likes