# Easy Responsive Footer

**URL:** https://meta.discourse.org/t/easy-responsive-footer/95818
**Category:** Theme component
**Tags:** official, easy-responsive-footer
**Created:** [August 28, 2018, 8:19am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818 "2018-08-28T08:19:17Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [June 5, 2023, 1:08pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/185 "2023-06-05T13:08:04Z")

</div>

Thanks for the notice, we will fix it as soon as possible.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [June 5, 2023, 3:38pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/186 "2023-06-05T15:38:09Z")

</div>

This is done.

@gormus, please update the Easy Footer theme component on your site and the warning will disappear.

---

<div class="post-metadata">

### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [June 6, 2023, 3:34pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/187 "2023-06-06T15:34:54Z")

</div>

Thanks @dax this fixes the warning issue.

---

<div class="post-metadata">

### Author: ![Lize\_Gibson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lize_gibson/32/290043_2.png) [@Lize\_Gibson](https://meta.discourse.org/u/Lize_Gibson)
#### Post date: [July 14, 2023, 11:28am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/188 "2023-07-14T11:28:37Z")

</div>

Hello - did you find out how to do this. We added our logo but now what the blurb to be next to this in a second column similar to what you have shown here

---

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [August 1, 2023, 4:56pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/189 "2023-08-01T16:56:44Z")

</div>

I really need to add some basic HTML to the footer - any way to do this?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 1, 2023, 5:44pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/190 "2023-08-01T17:44:00Z")

</div>

do you mean more content to this theme component footer? or do you just want to add some basic html to your forum’s footer without using this component?

---

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [August 1, 2023, 5:58pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/191 "2023-08-01T17:58:46Z")

</div>

i wanted to add a logo with a link into this easy footer where the blurb currently is, i didnt realise i couldnt use HTML and there’s a character limit.

I can see how to add a DIV to the site footer normally, but if I do that it appears above the easy footer which is not ideal.

---

<div class="post-metadata">

### Author: ![Shaneod](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shaneod](https://meta.discourse.org/u/Shaneod)
#### Post date: [August 1, 2023, 7:04pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/192 "2023-08-01T19:04:41Z")

</div>

I made my own footer and added it using the theme editor

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 11:09am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/193 "2023-08-04T11:09:31Z")

</div>

It would be great if this component supported dark and light themes. Now it is suitable for a dark themes.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 1:59pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/194 "2023-08-04T13:59:46Z")

</div>

it should be usable for both and also adaptable with CSS:

> [@Discourse](#):
>
> This component will use your theme’s color scheme to generate the colors used for the elements in it. but all elements have unique classes added to them in case you want to override something.

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 2:15pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/195 "2023-08-04T14:15:27Z")

</div>

> [@Lilly](#):
>
> it should be usable for both and also adaptable with CSS

Yes, it can be used. But there is no dark/light theme switch

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 2:26pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/196 "2023-08-04T14:26:07Z")

</div>

perhaps you’re overriding something in your colour variables or themes because it’s switches for me 🤔

 ![IMG_0063](https://global.discourse-cdn.com/meta/original/4X/8/1/f/81fcb32d68264eedf7e3a77b76ce12006b0f94e0.jpeg)

 ![IMG_0062](https://global.discourse-cdn.com/meta/original/4X/8/b/8/8b8b1e89f6622c49bb7bef3d787de1dddebcecb8.jpeg)

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 2:38pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/197 "2023-08-04T14:38:13Z")

</div>

Yes, it didn’t work with a custom theme. But when switching to the default theme, the dark theme has a light footer, and the light theme has a dark footer. What can be seen in your images. Or is it wrong?

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 2:46pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/198 "2023-08-04T14:46:42Z")

</div>

not sure what you mean but worked on my custom theme. your custom theme must have some color code or variable overriding.

custom theme dark:

 ![IMG_0066](https://global.discourse-cdn.com/meta/original/4X/3/6/f/36f8be8ac3bae8ad60a65cb5171cd4b1b7d39da6.jpeg)

custom theme light:

 ![IMG_0065](https://global.discourse-cdn.com/meta/original/4X/1/3/3/13347169fe55c955882e00858e349f46534ac850.jpeg)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 2:48pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/199 "2023-08-04T14:48:39Z")

</div>

oh you mean they’re reversed? i see. hmm 🤔 i believe that is intended. but can certainly be changed with a bit of custom css.

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 2:52pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/200 "2023-08-04T14:52:43Z")

</div>

Yes, by default, the dark theme should have light letters. It’s the opposite here

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 3:14pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/201 "2023-08-04T15:14:40Z")

</div>

try this in common css of theme.

```scss
.custom-footer {
    background: var(--secondary);
}

.custom-footer .flexbox {
    color: var(--primary);
}

.custom-footer .first-box .blurb {
    color: var(--primary-high);
}

.custom-footer .footer-section-link-wrapper a {
    color: var(--primary-high);
}

.custom-footer .third-box .social .social-link .d-icon {
    color: var(--primary);
}

.custom-footer .third-box .small-link {
    color: var(--primary-high);
}

```

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 3:21pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/202 "2023-08-04T15:21:54Z")

</div>

Everything is working correctly now. The only thing is that in a light theme it is necessary to leave the gray background of the footer to separate the footer from the content. Now there are no such borders

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/d/6/8d61af1bdd118dea68b566493fd4efb20219aa15.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [August 4, 2023, 3:24pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/203 "2023-08-04T15:24:59Z")

</div>

> [@Lilly](#):
>
> ```plaintext
> .custom-footer {
> background: var(--secondary);
> }
> 
> ```

could use` var(--secondary-high)` or `var(--primary-low)` here instead

can use the `https://[your forum address]/styleguide/atoms/colors` in the theme for more info on which variables to use (if you have the styleguide enabled in admin settings).

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [August 4, 2023, 3:31pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/204 "2023-08-04T15:31:32Z")

</div>

Very good! Thanks!. Now everything is working correctly

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/6/3/e63d925baaf36d5e58d6d49978d5c6d00e800846.png)

[Previous page](https://meta.discourse.org/t/easy-responsive-footer/95818.md?page=2)

[Next page](https://meta.discourse.org/t/easy-responsive-footer/95818.md?page=4)
