Branding discourse experiment on try.discourse


(Sam Saffron) #1

I have been experimenting with “branding” of discourse using site customisations on http://try.discourse.org

Basically we “dock” the discourse header to the top as soon as the “brand” header is out of view. This is done by switching position absolute to position fixed on our header.

JavaScript code figures out when stuff should be docked and add the .dock class to the body.

This approach seems to be “kind of working”. Two major issues are

  • If you use the mouse wheel it gets very annoying, the nav goes behind the header after 1 stop:

  • If you scroll down, the transition from black to white is jarring, moving an element from “absolute” to “fixed” causes content behind it to show up for a few millisecs which looks wrong.

Does any one have any ideas or mocks of how we should do the branding. If the top header is over 100px tall this is not nearly as annoying, but 60px headers can be startling.


(Jeff Atwood) #2

Well, so far nobody has hated it. It is not perfect, but I don’t hate it either.


(Erlend Sogge Heggen) #3

Are you still using the same approach for this? Same as over on BoingBoing, Ubuntu and HTG?

WeWantToKnow is in the process of setting up a Discourse forum, and we’re gonna need a header menu like this one. Is there a tutorial available on how to do this?


(Sam Saffron) #4

We don’t have a tutorial, but I am happy to share the try style:

Header:

<nav id="bar">
<div>
<a class="nav-link" href="http://www.discourse.org">
<img width="64" height="45" src="http://www.discourse.org/images/nav-icon-gray.png" alt="logo">
</a>
<a class="nav-link red" href="http://www.discourse.org/about/">About</a>
<a class="nav-link orange" href="http://www.discourse.org/faq/">FAQ</a>
<a class="nav-link yellow" href="http://blog.discourse.org">Blog</a>
<a class="nav-link green selected" href="http://try.discourse.org">Try It</a>
<a class="nav-link blue" href="http://www.discourse.org/buy">Buy It</a>
<a class="nav-link grey" href="http://meta.discourse.org">Meta</a>
<a class="fork-us" href="http://github.com/discourse/discourse"><i class="icon-github-alt"></i>&nbsp;Fork Us</a>
</div>
</nav> 

Stylesheet:

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


#main-outlet { margin-top: 48px; padding-top: 75px;}
body .d-header #site-logo {
    height: 40px;
    max-width: 251px; 
 } 

.docked #main-outlet { 
    margin-top: 0; 
    padding-top: 123px;
}
.docked nav#bar {
   display: none;
}

nav#bar
{
    width: 100%;
    height: 48px;
    background: #1b1f20;
    position: absolute;
    top: 0;
    z-index: 1;
}


nav#bar div
{
    width: 765px;
    margin: 0px auto;
}

nav#bar a.nav-link
{
    color: #FFF;
    text-decoration: none;
    text-align: center;
	-webkit-text-stroke: 0.2px;
	font-family: 'Montserrat', sans-serif;
}

nav#bar a.nav-link
{
	line-height: 48px;
	min-width: 90px;
	text-align: center;
	font-size: 16px;
	float: left;
}

nav#bar a.red.selected
{
	color: #d13332;
	border-color: #d13332 !important;
}

nav#bar a.red:hover
{
	color: #d13332;
	text-shadow: 0px 0px 5px #d13332;
}

nav#bar a.orange.selected
{
	color: #ea5932;
	border-color: #ea5932 !important;
}

nav#bar a.orange:hover
{
	color: #ea5932;
	text-shadow: 0px 0px 5px #ea5932;
}

nav#bar a.yellow.selected
{
	color: #fff9ae;
	border-color: #fff9ae !important;
}

nav#bar a.yellow:hover
{
	color: #fff9ae;
	text-shadow: 0px 0px 5px #fff9ae;
}

nav#bar a.green.selected
{
	color: #18b159;
	border-color: #18b159 !important;
}

nav#bar a.green:hover
{
	color: #18b159;
	text-shadow: 0px 0px 5px #18b159;
}

nav#bar a.blue.selected
{
	color: #00aeef;
	border-color: #00aeef !important;
}

nav#bar a.blue:hover
{
	color: #00aeef;
	text-shadow: 0px 0px 5px #00aeef;
}

nav#bar a.grey.selected
{
	color: #aaa;
	border-color: #aaa !important;
}

nav#bar a.grey:hover
{
	color: #aaa;
	text-shadow: 0px 0px 5px #aaa;
}

nav#bar a.nav-link.selected
{
	line-height: 42px;
	border-top: 3px solid #0b0d0d;
	background-color: #0b0d0d;
	height: 45px;
}

nav#bar a.fork-us
{
	float: right;
	border-radius: 4px;
	background-color: #2b3234;
	width: 104px;
	height: 32px;
	line-height: 32px;
	margin-top: 8px;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	color: #FFF;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

nav#bar a.fork-us:hover
{
	background-color: #434748;
}

nav#bar a.fork-us:active
{
	background-color: #000;
}

Inconsistent body class for /admin paths? (disabling top navigation)
(Erlend Sogge Heggen) #5

Much obliged! I’ll try write a simple tutorial based on this once we have it working.


(Jeff Atwood) #6