Carousel only visible on community landing page?

ux
1

Hi All,

I’m new here, and we are excited to be joining the discourse community!

We are trying to implement a landing page similar to the smartthings community (http://community.smartthings.com/) We are trying to create a landing page carousel that only shows on the landing page, the carousel works great. Just trying to figure out how smartthings made their’s only appear on the main page and not in the category pages.

Any help would be much appreciated! I can PM our sandbox info if you need it.

Scott

2

FYI, that is not part of the standard Discourse configuration, but hopefully someone here might be familiar with those customizations.

3

It looks like they have a <div class="welcome-message"> that contains the landing page area on every page. It has probably been added with the admin>customize>css/html>top editor. It is set to display: none. What they are using as their landing page is the categories-list page. It adds a class of .categories-list to the page’s body tag. So if you add the css .categories-list .welcome-message{ display: block;} the previously hidden welcome message will show up on that page.

They have added this script. I’m guessing it has been added to the custom header html area. They are using the .showing-welcome class to push the Discourse header .d-header down 375px and to toggle the display of the welcome area. I think you could manage without it and just base the styles off of the .categories-list class.


    Discourse.DiscoveryCategoriesRoute.reopen({
        activate: function() {
            this._super();
            Em.run.next(function(){
              $('.welcome-message').show();
              $('.circle-img-welcome').show();
              $('body').addClass("showing-welcome");
            });
        },
        deactivate: function() {
            this._super();
            $('.welcome-message').hide();
            $('.circle-img-welcome').hide();
            $('body').removeClass("showing-welcome");
        }
    });
    $('.showing-welcome .d-header').waypoint('sticky', {
        offset: 70
    });
4 Likes
4

Awesome thanks for the feedback Simon. Will let you know how it works and will post our forum when we get it up running.

1 Like