Pimp my Discourse


(SketchUp Community Manager) #1

Howdy ya’ll,

I want to pimp my discourse.

  1. Who has some awesome examples of people who have “pimped” their discourse forum?
  2. Anyone suggest any great widgets to be able to embed in external sites?
  3. Anyone suggest any widget to be able to be embedded into discourse on the side?
  4. Any cool customization things I am missing and should look into? (forums.sketchup.com)

Anything else? Any Community Managers here?

If you can share code - that is helpful to my noob self here :slight_smile:


(dirkcuys) #2

Hi @AlexAB

We’ve done some pimping of discourse forums: http://discourse.p2pu.org/, http://discuss.littlebits.cc/, http://community.p2pu.org/ and http://community.playwithyourmusic.org/ to name a few. Be sure to check out the first forum when you go to the Python course category.

We’ve found that even just updating the top navigation does wonders for the user experience


(Christopher McEwan) #3

@dirkcuys

Are those types of customisation available through the CSS admin interface? Would you be able to share any of the code/instructions (for noob)?


(dirkcuys) #4

Here is the code we’re using at http://community.p2pu.org, it may not be 100% applicable, but it’s something to get started. Just copy and past into your HEADER and CSS tab on the Customize admin page.

The HTML for the HEADER section:

<nav class="navbar navbar-default" role="navigation" id="home">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-logo" href="https://p2pu.org/en/">
                <img src="https://p2pu.org/assets/images/p2pu-logo.png" alt="P2PU Logo">
            </a>
            <a class="p2pu-tab" href="#">
                <i class="fa fa-chevron-down p2pu-tab-icon"></i>
            </a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li class="">
                <a href="https://p2pu.org/en/our-work/">Our work</a>
            </li>
            <li class="has-subnav">
                <a href="https://p2pu.org/en/about/">About</a>
                <ul class="dropdown-menu nav navbar-nav subnav" role="menu">
                    <li>
                        <a href="https://p2pu.org/en/about/philosophy/">
                            Philosophy
                        </a>
                    </li>
                    <li>
                        <a href="https://p2pu.org/en/about/people/">
                            People
                        </a>
                    </li>
                    <li>
                        <a href="https://p2pu.org/en/about/credits/">
                            Credits and thanks
                        </a>
                    </li>
                </ul>
            </li>
            <li class=" dropdown has-subnav">
                <a href="https://p2pu.org/en/publications/roundtables/">Publications</a>
                <ul class="dropdown-menu nav navbar-nav subnav" role="menu">
                    <li>
                        <a href="/en/publications/roundtables/">
                            P2PU Roundtables
                        </a>
                    </li>
                    <li>
                        <a href="/en/publications/talks/">
                            Presentations
                        </a>
                    </li>
                    <li>
                        <a href="/en/publications/reports/">
                            reports
                        </a>
                    </li>
                    <li>
                        <a href="/en/publications/blog/">
                            blog
                        </a>
                        
                    </li>
                    <li>
                        <a href="http://data.p2pu.org/" target="_blank">
                            data
                        </a>
                    </li>
                </ul>
            </li>
            <li class="active">
                <a href="https://p2pu.org/en/connect/">Connect with us</a>
            </li>
            <li>
                <div class="donate-btn-wrap">
                    <a class="donate" href="https://p2pu.org/en/donate/">Donate</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

And here is the CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body{
    font-family: 'Open sans',Helvetica,Arial,sans-serif;
}
.navbar-default {
    border-bottom-color: #707782;
    background-color: #515665;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.navbar-header{
    display: inline-block;
}
.navbar-logo{
    display: inline-block;
}
.navbar-logo img{
    padding: 1em 0;
}
.p2pu-tab {
    padding: 19.5px 15px;
    font-size: 19px;
    line-height: 21px;
    height: 60px;
    color: #fff;
}
.p2pu-tab:hover{
    color: #ffffff;
}
.navbar-right {
    float: right !important;
    margin: 0;
}
.nav>li {
    position: relative;
    display: block;
    float: left;
}
.navbar-nav>li.active {
    background-color: #707782;
}
.navbar-nav>li>a {
    display: block;
    line-height: 5;
    padding: 0 1em;
    font-family: 'Open sans' sans-serif;
    font-size: 1.1em;
    text-transform: uppercase;
    transition: all 0.3s linear;
    color: #ffffff;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
    background-color: #707782;
    color: #fcfcfc;
}
.donate-btn-wrap {
    line-height: 4.5;
    border-top: 0;
}
.donate-btn-wrap>a {
    text-align: right;
    background-color: #707782;
    border-radius: 0;
    color: #fcfcfc;
    display: inline-block;
    margin-left: 1.5em;
    padding: 3px 16px 4px 48px;
    line-height: 2.3;
    transition: background-color 0.3s linear;
}
.donate-btn-wrap>a.donate {
    background-image: url("data:image/png;base64,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"),none;
    background-position: 12px 7px;
    background-repeat: no-repeat;
    border-radius: 50px;
}
.donate-btn-wrap>a.donate:hover {
    background-position: 12px -27px;
    background-color: #fcfcfc;
    color: #707782;
    text-decoration: none;
}

#site-text-logo{
    font-family: 'Open sans',Helvetica,Arial,sans-serif;
    color: #ffffff;
}

.d-header .fa{
    color: #FFFFFF;
}
#site-text-logo{
    color: #FFFFFF !important;
}
.d-header{
    position: fixed;
    top: 81px;
    box-shadow: none;
}

#main-outlet{
    padding-top: 200px;
}

.d-header .icons .icon:hover .fa, .d-header .icons .active .icon .fa{
    color: #707782;
}

.show-topic-admin{
    top: 145px;
    right: 0px;
}