Using Bootstrap styles / customizing CSS


(Doug Harman) #1

I’d like to use Boostrap’s styling for the top navigation, e.g., class=“nav nav-pills pull-right”, to be consistent with our primary site. Is it feasible?

And, if not, how do I override the default CSS. For example, to position the top navigation elements. Everything currently ‘floats’ left. I want Sign Up to float right. style=“float: right;” doesn’t work and, in fact, breaks the code, i.e., no customized navigation is displayed.

Thanks, Doug


(Sam Saffron) #2

admin -> customize -> CSS/HTML … go crazy do whatever you need there.


(Doug Harman) #3

(a) I know. Unfortunately, it isn’t working for my site.
(b) What about Bootstrap styling. Can we import it (some how)?


(Sam Saffron) #4

how did you install your site? what version are you running?

This certainly works.


(Kane York) #5

If you try to import it, you’ll probably clash with some of the Discourse default styles named the same thing. Better to pull out just the rules you need. (That’s what Discourse did at first, actually! Not sure how much is left.)


(Doug Harman) #6

You - Discourse Team - installed my site, community.bastute.com, a week ago. I just tried (again) to make CSS changes (both inline and on the CSS page) and they don’t take. You’re welcome to access the code. I tried both ‘float: right’ and ‘text-align: center’ on the Sign up and Home links. Incidentally, if I remove the inline ‘padding’ that was in the default example, the links disappear entirely. Thanks, Doug


(Sam Saffron) #7

Stuff is working fine:

You set position fixed in the customisation there and it is indeed fixed. Just go ahead and create the full customisation.

Go ahead fill up all the style, just remember styles only apply at the moment in non admin pages, so navigate to the site. (bonus its updated live)


(Doug Harman) #8

That needs to be HIGHLIGHTED in your documentation! It’s not even mentioned!
Thanks, Doug


(Jeff Atwood) #9

That’s because it is a recent beta change, afaik.


(Sam Saffron) #10

We just reverted that change, on reload on admin pages (quite rare) we do remove CSS as a safe gurad.


(Doug Harman) #11

I’ll defer to your expertise and experience. I’m a relatively new ROR developer. Perhaps, you need a ‘developer mode’ so that coding changes are visible without having to log out / in - or leastwise backspace the /admin.

Best, Doug


(Sam Saffron) #12

You don’t need to log in / out, also if you are logged out you can not even see the admin interface so I am not sure what you are hoping to achieve there.

  1. Got to customization
  2. shift-click on “preview”
  3. Edit customization and it will change “live” on the previewing browser

This workflow is radically better than what it is in most products I know of.

Only case where we disable customization is if you hit reload and happen to be in the admin area, which you almost never do anyway.