# Fully Theme

**URL:** https://meta.discourse.org/t/fully-theme/262833
**Category:** Theme
**Tags:** official, fully-theme
**Created:** [April 25, 2023, 3:07pm UTC](https://meta.discourse.org/t/fully-theme/262833 "2023-04-25T15:07:59Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [September 18, 2023, 4:38am UTC](https://meta.discourse.org/t/fully-theme/262833/53 "2023-09-18T04:38:16Z")

</div>

> [@denvergeeks](#):
>
> Go to this page and hit the hamburger menu to hide the sidebar…

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`?

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [September 18, 2023, 4:59am UTC](https://meta.discourse.org/t/fully-theme/262833/54 "2023-09-18T04:59:38Z")

</div>

Hmm – The navigation panel on the [try.discourse.org](http://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.

 ![try-discourse-header-nav-bug](https://global.discourse-cdn.com/meta/original/4X/8/8/0/880a963e0a2348dfa509b3985b834aa8880eade3.png)

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [October 4, 2023, 9:58am UTC](https://meta.discourse.org/t/fully-theme/262833/55 "2023-10-04T09:58:55Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 4, 2023, 7:11pm UTC](https://meta.discourse.org/t/fully-theme/262833/56 "2023-10-04T19:11:39Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Aaron\_Walsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aaron_walsh/32/312661_2.png) [@Aaron\_Walsh](https://meta.discourse.org/u/Aaron_Walsh)
#### Post date: [October 4, 2023, 7:26pm UTC](https://meta.discourse.org/t/fully-theme/262833/57 "2023-10-04T19:26:18Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 5, 2023, 10:02pm UTC](https://meta.discourse.org/t/fully-theme/262833/58 "2023-10-05T22:02:16Z")

</div>

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](https://global.discourse-cdn.com/meta/original/4X/7/5/5/7553a67302ca21d49e582ffb45d1f4b5941dc732.png)

Instead of this:

![image](https://global.discourse-cdn.com/meta/original/4X/5/3/4/5340b51ce8a36f05d362e40d2747e70829fd7aef.png)

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

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [October 6, 2023, 12:29am UTC](https://meta.discourse.org/t/fully-theme/262833/59 "2023-10-06T00:29:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 7, 2023, 3:59am UTC](https://meta.discourse.org/t/fully-theme/262833/60 "2023-10-07T03:59:12Z")

</div>

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

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 9:53am UTC](https://meta.discourse.org/t/fully-theme/262833/61 "2023-10-07T09:53:57Z")

</div>

> [@jordan.vidrine](#):
>
> You want to change the specific variable for `—sidebar-color)` and that will change the sidebar and above the sidebar.

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.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 7, 2023, 10:26am UTC](https://meta.discourse.org/t/fully-theme/262833/62 "2023-10-07T10:26:02Z")

</div>

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. 🙂

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.  

6. Click the Edit CSS/HTML button.  

7. Paste the below code to the **CSS** section.  

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

```scss
.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.

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 10:42am UTC](https://meta.discourse.org/t/fully-theme/262833/63 "2023-10-07T10:42:16Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 7, 2023, 11:18am UTC](https://meta.discourse.org/t/fully-theme/262833/64 "2023-10-07T11:18:12Z")

</div>

I’ve updated the post above. 🙂

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 12:45pm UTC](https://meta.discourse.org/t/fully-theme/262833/65 "2023-10-07T12:45:43Z")

</div>

Thank you. Just done it and everything looks good again 😃

---

<div class="post-metadata">

### Author: ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 7, 2023, 2:13pm UTC](https://meta.discourse.org/t/fully-theme/262833/66 "2023-10-07T14:13:55Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 2:50pm UTC](https://meta.discourse.org/t/fully-theme/262833/67 "2023-10-07T14:50:41Z")

</div>

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

I use the [Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588) 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](https://global.discourse-cdn.com/meta/original/4X/1/d/b/1db6eb7f6697f190032b754b48cdef335d9d294c.png)

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

![image](https://global.discourse-cdn.com/meta/original/4X/2/c/0/2c06cbaae4c76a1c426a7b3ea43ce3fbdd7163ed.png)

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.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 7, 2023, 3:44pm UTC](https://meta.discourse.org/t/fully-theme/262833/68 "2023-10-07T15:44:02Z")

</div>

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

You can quick fix this with 🔽

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

It will shrink the logo.

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

```

Update: Hmm I think it probably shrink too much with hidden sidebar… 🤔 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.

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 3:56pm UTC](https://meta.discourse.org/t/fully-theme/262833/69 "2023-10-07T15:56:16Z")

</div>

Thank you again! You’re doing wonderful deeds today 🙂

---

<div class="post-metadata">

### Author: ![Renato\_Mendes](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato_mendes/32/308464_2.png) [@Renato\_Mendes](https://meta.discourse.org/u/Renato_Mendes)
#### Post date: [October 7, 2023, 8:43pm UTC](https://meta.discourse.org/t/fully-theme/262833/70 "2023-10-07T20:43:55Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![packman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/packman/32/289322_2.png) [@packman](https://meta.discourse.org/u/packman)
#### Post date: [October 7, 2023, 9:41pm UTC](https://meta.discourse.org/t/fully-theme/262833/71 "2023-10-07T21:41:26Z")

</div>

> [@Don](#):
>
> Hmm I think it probably shrink too much with hidden sidebar…

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?

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [October 8, 2023, 8:27am UTC](https://meta.discourse.org/t/fully-theme/262833/72 "2023-10-08T08:27:24Z")

</div>

> [@Renato\_Mendes](#):
>
> changing it this way makes it look the same on dark mode

Hello @Renato_Mendes 👋

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

> [@Renato\_Mendes](#):
>
> How can I change the css only for a specific color scheme?

There are several ways to do this 🔽

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.
> 
> ![Screenshot 2023-10-08 at 9.57.46](https://global.discourse-cdn.com/meta/original/4X/f/8/1/f8129b559bf17c36b5b91cd90655def5013b6867.png)
> 
> This will only activate the code on light scheme.
> 
> Common / Color Definitions
> 
> ```scss
> @if #{schemeType()} == light {
> .desktop-view {
> .has-sidebar-page {
> .d-header-wrap {
> &:before {
> background: transparent;
> border-right: none;
> }
> }
> }
> }
> }
> 
> ```

* * *

1. [Targetable Color Schemes](https://meta.discourse.org/t/targetable-color-schemes/276967) : 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](https://global.discourse-cdn.com/meta/original/4X/0/3/9/039c9d89e26b3b0adcadf4ffc2e527bc1050b15c.png)
> 
> 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](https://global.discourse-cdn.com/meta/original/4X/2/e/b/2ebac935f0da59b3226cc89d05bff65be6b40b30.png)
> 
> ```scss
> html[color-scheme="your-color-scheme-id"] {  
> &.desktop-view {
> .has-sidebar-page {
> .d-header-wrap {
> &:before {
> background: transparent;
> border-right: none;
> }
> }
> }
> }
> }
> 
> ```

* * *

Hello @packman 👋 I sent you a PM.

[Previous page](https://meta.discourse.org/t/fully-theme/262833.md?page=2)

[Next page](https://meta.discourse.org/t/fully-theme/262833.md?page=4)
