Customizing a Discourse Forum for non coders and designers

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; }

@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?

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

You can still customise – see my code here.

1 Like

@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!

2 Likes

Did the simplified code work for you @Tom_Wrench?

2 Likes

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”?

2 Likes

It’s all in the </head>

1 Like

Great info, thanks!

2 Likes

Hey Hawk, I love what you did here:

How did you implement the double banner?

1 Like

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://aws1.discourse-cdn.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://aws1.discourse-cdn.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;
}
5 Likes

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

1 Like

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

2 Likes

Loving this too @HAWK!

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

1 Like

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;
}
1 Like

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

2 Likes

Thanks!

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

1 Like

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

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

1 Like

I know this is an old topic, but does anyone know how to customize the code to use different banner images for mobile devices? Since the large banner that looks good on computers is very hard to read on mobiles.

Thanks in advance!

Hey Kane, hit us up on meta.discourse.org and we can help you out there :slight_smile: