Bootswatch Theme: Navbar doesn't display expected color

[Gordon Agress]

I'm trying to use the Bootswatch theme 'Cyborg' with Mezzanine, but the navbar is displaying as if its background color were white (rather than black).  I've checked the computed CSS styles, the background seems set properly, but there are items sets to white, and I suppose these could be dominating the background color setting.

Still, the Bootswatch site has a nav bar, in black.  So something seems off here.

Has anyone else had similar issues with the Bootswatch templates?

[Gordon Agress]

The navbar problem is caused by some conflict with bootstrap-theme.css -- commenting out the latter fixes the problem.  (I think the css injects a background-image that dominates the background color.)  However, I'm having the same problem with the footer, though I haven't thoroughly investigated yet.

[Ross Laird]

Do you have the navbar-inverse class applied? That might play a role here.

[Gordon Agress]

No, a Chrome console search for #navbar-inverse comes up empty on the page in question.

I think there is something in bootstrap-theme.css that introduces a "background-image: fixed-gradient", of a white color, that sits atop the background color.  When I edit base.html to comment out bootstrap-theme.css, this issue goes away. 

The footer background color issue seems to emerge because mezzanine.css sets a value for the footer background-color, which is not overloaded by the Cyborg theme.  I patched with an additional piece of CSS to provide that overload.

One other issue is that the 'Blog' title is overlapped by the navbar.  I'll tackle that in the morning.

I'm new to CSS, and so first suspect operator error, but it looks little like there have been changes to the base Mezzanine layout and CSS that haven't been accomodated by Cyborg.

I'm pretty sure my fixes can be incorporated into the CSS more smoothly.

--
You received this message because you are subscribed to a topic in the Google Groups "Mezzanine Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mezzanine-users/wFraHvB4Sf0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mezzanine-use...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Ross Laird]

These kinds of things can be tough to assess, at a distance, without actually diving into the CSS code. One way to debug this is to use a customized CSS file that loads after the Mezzanine and Bootstrap CSS files. Changing the Bootstrap CSS directly won't always yield the results you desire, as various parts of the Bootstrap code are interconnected (through cascading) in ways that can be hard to track. Generally, you will be better off copying the CSS that applies to a given element, creating a new set of rules for that element in your custom CSS file, and hacking away on your own code. If this is an element issue (such CSS applied to a div), it should be fairly easy to find. If it's a cascade issue, it can be messy. (Use, with caution, temporarily, and only as a last resort, the !important flag to make sure that your rules are loaded and not Bootstrap's).

Also, Bootstrap's use of background-image is discussed in threads like this one, which explores both options (changing Bootstrap, and creating custom css).

Also, background-color will always lie behind background-image. (The spec is here.) So, this suggests that one line of action might first be to remove background-image properties to get a look at what's behind everything. Then you can selectively add things back in.

In the case of Bootstrap, most of the background-image rules do not actually load images but rather specify gradients, which will override any previously-declared background images (more here). So, these various interactions can be quite complex. Start with what you can see when you take almost everything out, and go from there.

[Ross Laird]

This got me thinking. Here's the short answer:

Change the highlighted colors to your desired background color and gradient colors:

.navbar-inverse .navbar-inner {
    background-color: #1b1b1b;
    background-image: -moz-linear-gradient(top, #222222, #111111);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
    background-image: -webkit-linear-gradient(top, #222222, #111111);
    background-image: -o-linear-gradient(top, #222222, #111111);
    background-image: linear-gradient(to bottom, #222222, #111111);
    background-repeat: repeat-x;
    border-color: #252525;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

That will do it.

[Ross Laird]

Same goes for this bit:

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
    color: #ffffff;
    background-color: #111111;
}

[Bojan Djuric]

In order to use new Bootswatch theme color in the navbar, I copied system css files to mytheme css dir:

'D:\dj\loc\lib\site-packages\mezzanine\core\static\css\mezzanine.css'

to

'mytheme\static\css\mezzanine.css'

and 

'D:\dj\loc\lib\site-packages\mezzanine\core\static\css\bootstrap-theme.css'

to

'mytheme\static\css\bootstrap-theme.css'

After that I commented out navbar section from 'mytheme\static\css\bootstrap-theme.css', 

/*

.navbar-default {

(end of all navbar items)

*/

Now the navbar will use new color.

And commented out

/*

'footer'

*/
from file 'mytheme\static\css\mezzanine.css'

Now the footer will use new color.