Customizing a Discourse Forum for non coders and designers


(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:


(Tom Wrench) #22

Yahoo! It worked! Thanks so much for this code @Alexandra_Anna_Bowen :slight_smile:

(apologies for the belated reply - my project took a bit of a hiatus for various reasons. Back on it now though! :sunglasses: )


(Tom Wrench) #23

Loving this too @HAWK!

How did you manage to add the custom header font and center align the text in the bottom pinned banner?


(Sarah Hawk) #24

With trickery. The header is actually part of the background image.

I centered the text below with CSS.

Here’s my code:

#banner {
color: white;
font-size: 1.5em;
text-align: center;
border-radius: 0;
box-shadow: none;
background: url("http://community.uxmastery.com/uploads/db4094/original/2X/4/4370ea94d675a688691fa6b8814f1d74ed65a7fe.jpg") no-repeat;
padding: 20px;
max-height: inherit;
background-size: cover;
background-color: rgba(255, 255, 255, .1);
background-blend-mode: color;
}

#banner .close {
 color: #fff;
}

#banner a {
    color: #fcdd5c;
    text-decoration: underline;
}

(Tom Wrench) #25

Ah, I thought it might have been part of the image. Cool stuff, very effective @HAWK!


(Sarah Hawk) #26

Thanks!

Sounds like you’re busy… you should tell us what you’re working on this week. :wink:


(Alex Bowen) #27

Awesome to hear! I’d love to see what you’ve done :slight_smile:


(Sarah Hawk) #28

How’s your forum looking @Tom_Wrench? Have you played around with any of the customisations?