CSS/header customizations randomly failing to apply


(Franz) #1

On my instance (Discourse 1.2.0.beta3), there should be a navigation bar at the top. Occasionally it disappears. Right now it isn’t visible. I’ve tried both Chrome and Firefox, as a logged in user as well as in an Incognito/Private window.

I’m aware of this issue: Unreliable application of customizations. However I fail to see how the issue is “fixed”.


(Michael Downey) #2

Just to make sure:


(Franz) #3

Yes, I’m aware of this. This isn’t it.

In fact, do you see an horizontal navigation bar at the top of the page if you go to https://forum.appleseedhq.net/?


(Michael Downey) #4

I see the standard Discourse navigation bar. It might be helpful for research if you either describe your customizations or show before/after screenshots.


(Franz) #5

Sure thing. Here is what it should look like:

Note the custom horizontal navigation bar between the browser’s chrome and Discourse’s navigation bar.

I used the Preview mode to make this screenshot.


(Michael Downey) #6

How are you inserting the code for the navigation bar, in the /admin/customize/css_html settings?


(Franz) #7

Yes, Admin → Customize → CSS/HTML.

Header:

<div id="navigation">
    <ul>
        <li>
            <a href="http://appleseedhq.net/about.html">About</a>
        </li>
        <li>
            <a href="http://appleseedhq.net/download.html">Download</a>
        </li>
        <li>
            <a href="http://appleseedhq.net/news.html">News</a>
        </li>
        <li>
            <a href="http://appleseedhq.net/team.html">Team</a>
        </li>
        <li>
            <a href="http://forum.appleseedhq.net/" class="active">Forum</a>
        </li>
        <li>
            <a href="https://github.com/appleseedhq/appleseed/wiki">Wiki</a>
        </li>
        <li>
            <a href="https://github.com/appleseedhq">GitHub</a>
        </li>
    </ul>
</div>

CSS:

@import url("//fonts.googleapis.com/css?family=Open+Sans");

#navigation {
    background-color: #282828;
    height: 50px;
    font-family: "Open Sans";
    font-size: 15px;
}

#navigation ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
    line-height: 50px;
}

#navigation ul li {
    display: inline;
}

#navigation ul li a {
    text-decoration: none;
    padding: .2em 1.2em;
    color: #777;
    -webkit-transition: color .10s linear;
}

#navigation ul li a:hover {
    color: #bbb;
    -webkit-transition: color .10s linear;
}

#navigation ul li a.active {
    color: #bbb;
}

This worked until now.


(Jeff Atwood) #8

Any plugins? Any unusual configuration on the server? Any extra caching layers like CloudFlare? Does rebooting help?


(Franz) #9

No plugins, no unusual configuration, nothing fancy at all. Plain ol’ DigitalOcean setup. Worked very well until recently, but our nav bar has now been gone for 48 hours, and it’s not coming back. Just updated to beta4, still no changes.


(Franz) #10

As usual, I’ll be happy to give full access to my Discourse instance to anyone investigating this issue.


(Jeff Atwood) #11

Do you have multiple customizations? Only one can be active at any given time, and our UI around this is horrible, it trips people up all the time.


(Franz) #12

I do have two (orthogonal) customizations enabled. Since the UI allows it, it never occurred to me that only one customization could be enabled at any given time…

I disabled the other customization and, lo and behold, my navigation bar reappeared. Now the strange part: I enabled again that other customization, and it didn’t disable my nav bar customization.


(Sam Saffron) #13

Multiple customizations at once now works:

https://github.com/discourse/discourse/commit/5b844f53206961b8eaeeb2e6dbef0c3538b32180


(Sam Saffron) #14