Easy responsive footer

Depending on what you want to do, you can simply try something like this:

  • in the Easy responsive footer theme settings delete the text inside the Blurb setting. If you want you can delete even the text inside the Heading setting.

  • create a new theme component and add in the Common > CSS tab

    .blurb::before {
        background-image: url(LOGO-URL);
        background-repeat: no-repeat;
        display: inline-block;
        content: "";
        /*change the settings below based on the size of your logo*/
        background-size: 200px 200px;
        width: 200px;
        height: 200px;
    }
    

and the result will be something like this:

11 Likes

Solved!

My belief in in the open source echo system is initially empowered by great people like you.

4 Likes

I have the Discourse Subscriptions plug-in. In the user menu, there is a new submenu called “billing.” However, the easy footer does not show up there. Is there a way to get it to show up?

1 Like

Is there any way to use more than 180 characters in the blurb space? Thanks.

1 Like

Export the theme component, extract, edit the [settings.yml] file line 8 (max: 180) with your desired value, compress the folder again and upload.

Enjoy!

4 Likes

There should be an option to customize the colors of the background and text with CSS. By default, it doesn’t match the header.

Otherwise it works great! Thanks!

3 Likes

hello Joe, can weadd more widget same here

Hello, is there a way to embed an HTML element into the footer as pictured above?

I was only able to do it by editing the footer HTML but it adds a whole new footer in addition to the main one.

1 Like

Can this be set to be a floating footer?

1 Like

This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Is there any way to make sure it doesn’t appear in search results, but still appears in the footer?

1 Like

After updating to 2.8.0.beta2, a horizontal scrollbar will appear at very large viewports > 1000px. May I ask if this is the intent, anyone else seeing the same?

I was able to replicate on try. Tested it on Chrome, Edge, same results as well.

Please see my attempt below. Meta introduces the horizontal scrollbar at 700+, while try does it at 1000+

Video_2021-06-12_115328 (2)

2 Likes

Thanks for reporting the issue @Kchalk :+1:

I just pushed a small fix. Once you update the component, the issue will go away.

4 Likes

Appreciate the fast fix @Johani . Updated to the latest commit and can verify it’s all good now, thank you! :awthanks:

3 Likes

Hi,Can be the background&text colors fo the footer changed to the same color as the header?

3 Likes

Thank you for the awesome footer! I have been having issue showing the Tiktok logo from Font Awesome. I have tried adding fab-tiktok, fa-tiktok, fas-tiktok, tiktok to the svg icons setting, but none of them renders the tiktok logo.

Thank you for your help!

1 Like

It is possible to override the colors of the background and such in another theme component? The client wants a white background (same as the header); I would rather not fork this to fix it. I’m trying in another theme component, but it doesn’t seem to be doing anything. It would seem like this would work, but it seems to have no effect. Maybe there’s some order that they get applied?


.below-footer-outlet.custom-footer {
    background: #B3B7BC !important;
    .second-box{
        background-color: blue;
    }
}

2 Likes

@pfaffman
Is your watch command running? (This usually ends up being the issue for me :sweat_smile:)

I just tried doing:

.custom-footer {
   background: red;

   .second-box {
      background: purple;
   }
}

in another theme component, and its working for me…

3 Likes

I swear I checked, but it sounds like it’s something like that! Thanks very much!

Edit:

You were on the right track, @keegan! I was editing mobile.scss rather than common.scss.

It almost always boils down to

  • dns is broken
  • permissions are broken
  • it’s not plugged in
  • you’re editing the wrong file

Thanks very much!

2 Likes

I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?

1 Like

@bekircem
Going beyond the character limit may break some things, but you can try:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Doing visibility: hidden, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}
3 Likes