Customizing a Discourse Forum for non coders and designers


(Alex Bowen) #1

Hey FeverBee folks!
Do you use Discourse as your community forum and would like to customize it, but don’t know how to code?

Have no fear! Check out my newest post. https://medium.com/@AlexandraBowen/customizing-a-discourse-forum-for-non-coders-and-designers-83ef70e1d757#.l44guyi2n

Thanks! :slight_smile: I would love any feedback and suggestions you my have.


CTA banner to invite visitors to join
I have a new shiny toy.... Discourse! Now, how do I customize it?
Weekly Breakdown: DreamFactory
Strategies to correct users' mistakes in a language learners community?
Weekly Breakdown: Survive France Network
(Sarah Hawk) #2

Thanks for sharing. :slight_smile:

Is your header link code still functional now that headers are on VDOM? I had to rewrite ours.


(Alex Bowen) #3

Ah yes, I was unaware of that change, but it seems to not have effected my forum. As of yet anyway.

I think I may need to rewrite that section.

Thanks Hawk!


(Sarah Hawk) #4
<style>

.nav-link-container {
  display: inline;
}
.nav-link-container  li { 
  display: inline-block;
  float: right;
}
.nav-link-container  a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-align: center;
  font-family: 'Open Sans'; 
  line-height: 48px;
  min-width: 90px;
  font-size: 15px;
  padding: 0 1em;
}

.d-header .icons .icon {
     float: right;
    color: #EC7825;
}

.add-header-links {
    float: left;
    padding-left: 0;
}
</style>

<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://www.feverbee.com/resources', 
                        text:'RESOURCES',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://experts.feverbee.com/', 
                        text:'DISCUSSIONS',
                        target:'_self'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://newyork.feverbee.com/', 
                        text:'EVENTS',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://ondemand.feverbee.com/', 
                        text:'TRAINING',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/consultancy', 
                        text:'CONSULTANCY',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com/about-us', 
                        text:'ABOUT',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'http://www.feverbee.com', 
                        text:'HOME',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script>

(Tom Wrench) #5

Hi! Thanks for posting this really helpful guide. I’ve been trying to customise my banner with the CSS you provided:

// Banner
#banner {
 border-radius: 0;
 box-shadow: none;
 background: url(“https://discourse-cdn-sjc1.com/business5/uploads/dreamfactory/original/1X/1fb8cead32ef94495edc8a93ffb087e16341cacd.png") no-repeat;
 padding: 2em 2em 1em 2em;
 max-height: inherit;
 background-size: cover;
 background-color: rgba(255, 255, 255, 0.7);
 background-blend-mode: color;
 color: rgba(0,0,0,0.8);
 margin-bottom: 20px;
}
#banner .close {
 color: #fff;
}
#banner #banner-content h2 {
 margin-bottom: 0.75em;
}

…but it doesn’t seem to affect the banner at all when implemented. (and yes the CSS style is ‘enabled’ :slight_smile: ).

Any thoughts why it might not be working?

Many thanks

Tom


(Sarah Hawk) #6

What version of Discourse are you running @Alexandra_Anna_Bowen ?


(Alex Bowen) #7

Hey @Tom_Wrench ! I am so glad it’s been helpful. What else have you implemented?

I’d be happy to help with this! I think helping publicly here may benefit other community members too! I am however about to leave for vacation until early next week. But let me help you out as much as I can for now. What version of Discourse are you running?

Do you have a link to your community? If you don’t mind sharing?

@HAWK I believe we are on version 1.6.0.beta8


(Alex Bowen) #8

Hey Tom, you need to edit the link in the code. See below, my DreamFactory link is still in there. You will need to follow Step #1 in section #3 to upload your own photo to be used as background under a private category like Staff, then right click to get the image address. Then copy and paste that under the background url section (below). As you can see, it says DreamFactory still.

background: url(“https://discourse-cdn-sjc1.com/business5/uploads/dreamfactory/original/1X/1fb8cead32ef94495edc8a93ffb087e16341cacd.png") no-repeat;

Afterwards, did you also complete step #2? Did you save and then click “Enabled?”


(Sarah Hawk) #9

I tested this myself (with the updated URL and the style enabled) and am having the same experience as Tom.


(Alex Bowen) #11

Try this more simplified code:

#banner { border-radius: 0; box-shadow: none; background: url("IMAGE PATH URL HERE") no-repeat; padding: 20px; max-height: inherit; background-size: cover; background-color: rgba(255, 255, 255, .6); background-blend-mode: color; }


(Alex Bowen) #12

@HAWK How did you customize with the VDOM update?

That’s very different code and looks like a completely new way of handling templating. Doesn’t look like it can be simply updated. The first calls a template component directly with a template tag block that was easier to customize. The second is an api call, with a new function “helper” thats constructing the elements. Probably made to only use the admin dashboard options, instead of custom template blocks. Not sure how to modify that – do I need to dig into the Discourse API docs?


(Sarah Hawk) #13

Yeah, pesky right? I had to seek some fairly heavy support to get it going!

You can still customise – see my code here.


(Anna Flessner) #14

@Alexandra_Anna_Bowen,

I’m not having luck with the first code provided the banner does not change (ie it remains the default background):

However the simplified code is working (I know it looks bad - just a test image :wink: ), thanks!


(Sarah Hawk) #15

Did the simplified code work for you @Tom_Wrench?


(Alex Bowen) #16

Awesome @aflessner! Can’t wait to see how it turns out. Glad to hear the simplified code worked for you. One tip, with the links - you may want to bold them for that little extra pop

@Tom_Wrench Let me know if that simplified code helped, or if I can help with anything else. :slight_smile:

@HAWK for that new VDOM script - is that all under “CSS” or did you also put some under “header”?


(Sarah Hawk) #17

It’s all in the </head>


(James Higginson) #18

Great info, thanks!


(Alex Bowen) #19

Hey Hawk, I love what you did here:

How did you implement the double banner?


(Sarah Hawk) #20

The bottom ‘banner’ is a pinned topic, as per your article.

The top is an actual banner which is controlled with cookies (thanks for @JoeBuhlig for his help sorting out my messy code) and sits in the Top div in the Customize CP.

Here, I actually serve two versions of the banner, one to logged in users and one to visitors. The code for this is below.

Paste this code into the Top:

<div id="banner-container" class="show" scrolling="no">
    <button id="banner-close-button" onclick="hideBanner();"><nbsp></nbsp>X<nbsp></nbsp></button>
    <a id="experts-members-banner" href="http://newyork.feverbee.com/?utm_source=Experts&amputm_medium=Banner&amputm_campaign=AEM">
        <img src="https://discourse-cdn-sjc1.com/business5/uploads/feverbee/original/2X/a/a5b170a17e86bffb23e4a2d65697d2ac5a1c4484.png" alt="FeverBee New York Workshop" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
    <a id="experts-new-users-banner" href="https://www.feverbee.com/register/?utm_source=Experts&amputm_medium=Banner&amputm_campaign=register">
        <img src="https://discourse-cdn-sjc1.com/business5/uploads/feverbee/original/2X/4/444f45fc8e16946cfd2cb51152faf912cde499df.png" alt="Join FeverBee Experts" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
</div> 

Paste this Javascript into the </head> :

(the banner for logged in members is dismissed for 60 days, the one for visitors reappears every 7 days and I use it as a prompt to sign up)

<script>
$(document).ready(function(event) {
    if (Discourse.User.current() && !checkCookie("hideMemberBanner")) {
        $("#banner-container").show();
        $("#experts-members-banner").show();
        $("#experts-new-users-banner").hide();
    }
    else if (!Discourse.User.current() && !checkCookie("hideNewUserBanner")) {
        $("#banner-container").show();
        $("#experts-members-banner").hide();
        $("#experts-new-users-banner").show();
    }
})

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie(cname) {
    return cval = getCookie(cname) || false;
}


function hideBanner() {
    if (Discourse.User.current() !== null){
        var cname = "hideMemberBanner";
        var cdays = 60;
    }
    else {
        var cname = "hideNewUserBanner";
        var cdays = 7;
    }
    $("#banner-container").hide();
    setCookie(cname, true, cdays);
}
</script>

And lastly, the CSS to handle the display toggling

// ad banners

#banner-container img {
   width: 100%;
   height: auto;
   padding-bottom: 20px;
}
#banner-close-button {
    float: right;
    top: 5px;
    right: 5px;
    position: relative;
    margin-bottom: -30px;
    border-top: none;
    background: transparent;
    border: none;
    font-size: 10pt;
    color: lightgray;
}
#experts-members-banner {
    display:none;
}

#experts-new-users-banner {
    display:none;
}

#banner-container{
    display:none;
}

(Alex Bowen) #21

This is awesome @hawk! Thanks for sharing the resource :slight_smile: