What is a clear procedure to style web2py css files using Bootstrap theme generators/choosers?

[JoeCodeswell]

Dear web2py Community,

What is a clear procedure [dare i hope for a python script??] to style web2py css files using Bootstrap theme generators/choosers, like bootswatch.com or stylebootstrap.info?

My motivation is merely to change the background-color of my navbar.  I am running 2.9.5-stable+timestamp.2014.03.16.02.35.39

After research, I took Niphlod's suggestion to use stylebootstrap.info on this post.

I followed Crash Course in Web2py (Part 5... to Update CSS. It said to copy the generated css into bootstrap.min.css

RESULT: The menu is broken.

After my signature, at the end of this post are 2 screenshots:



1 - What my app looks like with default css, followed by
2 - A screenshot of the RESULT of the css update.

I suspect i need to somehow alter bootstrap-responsive.min because 3 bars appear in the upper right of my firefox  browser because my screen resolution is 1024 x 768.

What specific files must be altered and how should they be altered to follow Niphlod's suggestion about using a bootstrap generator to style web2py? Please be very specific. A Python script would be MAGNIFICENT.

Thanks in advance.

Love and peace,

Joe

[LightDot]

The three bars in the upper right of your Firefox are a part of the browser, not your page. That's how the recent Firefox menu looks like.

The web2py welcome app currently comes with Bootstrap 2, not 3. If you wish to use a bootswatch theme or any similar, you'll need to use an older, Bootstrap 2 compatible one. My guess is that this is the source of your problem.

Details such as whether you need to replace just bootstrap.min.css (and keep the original bootstrap-responsive.min.css) or replace the bootstrap.min.css and remove bootstrap-responsive.min.css altogether, are going to be stated in the documentation of the theme / project you're switching to. That's pretty much all there is to it, hence no python script...

Regards

[ari northage-orr]

LightDot is correct, this is due to the fact that web2py comes with bootstrap 2. I had the exact same issue as you, I was trying to use a theme from Bootswatch and it ended up breaking the navbar and messing up the placement of things on my page. Googling themes for bootstrap 2 and using one of those fixed the issue completely. 

[JoeCodeswell]

Dear LightDot and Ari,

Thanks for the responses. The situation is getting clearer in my mind.

I have some follow-on questions for LightDot. You said:

Details such as whether you need to replace just bootstrap.min.css (and keep the original bootstrap-responsive.min.css) or replace the bootstrap.min.css and remove bootstrap-responsive.min.css altogether, are going to be stated in the documentation of the theme / project you're switching to.

I am sure you know WAY more about the history of Bootstrap and its documentation than I do. I went to http://bootswatch.com/2/ and looked at the Cerulean Preview, which seems to me to be the "the documentation of the theme". I did a firefox page search for "responsive". Result: "Phrase not found".

Here are my questions, LightDot. Thanks in advance for educating me.

Does every Bootstrap2 theme have a correspondingly developed bootstrap-responsive.min.css? I assume the answer to this is NO.

Will every Bootstrap2 theme work with a separately developed bootstrap-responsive.min.css?

Will the web2py default bootstrap-responsive.min.css "work" with any Bootstrap2 theme's bootstrap.min.css? If, YES, generally what will the result look like, when the bootstrap-responsive.min.css is in control?

Thanks again, LightDot and Ari.

Love and peace,

Joe

[LightDot]

As far as Bootswatch 2 themes are concerned, the original, stock bootstrap-responsive.min.css must be loaded if you wish your page to be "responsive". Bootswatch 2 themes do not provide this functionality. So, regardless of the Bootswatch 2 theme used, they can all co-exist with the same, stock bootstrap-responsive.min.css.

What bootstrap-responsive.min.css does is explained in the old Bootstrap 2 docs, for example here: http://getbootstrap.com/2.3.2/scaffolding.html#responsive and you can just try how your page looks with or without it. Just to be clear - you don't have to use the responsive features or even load the bootstrap-responsive.min.css, it's optional.

Regards

On Friday, May 9, 2014 5:24:23 PM UTC+2, JoeCodeswell wrote:

Dear LightDot and Ari,

Thanks for the responses. The situation is getting clearer in my mind.

I have some follow-on questions for LightDot. You said:

Details such as whether you need to replace just bootstrap.min.css (and keep the original bootstrap-responsive.min.css) or replace the bootstrap.min.css and remove bootstrap-responsive.min.css altogether, are going to be stated in the documentation of the theme / project you're switching to.

I am sure you know WAY more about the history of Bootstrap and its documentation than I do. I went to http://bootswatch.com/2/ and looked at the Cerulean Preview, which seems to me to be the "the documentation of the theme". I did a firefox page search for "responsive". Result: "Phrase not found".

Here are my questions, LightDot. Thanks in advance for educating me.

Does every Bootstrap2 theme have a correspondingly developed bootstrap-responsive.min.css? I assume the answer to this is NO.

Will every Bootstrap2 theme work with a separately developed bootstrap-responsive.min.css?

Will the web2py default bootstrap-responsive.min.css "work" with any Bootstrap2 theme's bootstrap.min.css? If, YES, generally what will the result look like, when the bootstrap-responsive.min.css is in control?

Thanks again, LightDot and Ari.

Love and peace,

Joe

On Wednesday, May 7, 2014 11:57:54 AM UTC-7, ari northage-orr wrote:

[JoeCodeswell]

Dear LightDot,

Thanks SO MUCH for the CLEAR explanations.

I'll mark this ANSWER as the BEST. However, the explanation, I think, also includes your other post and Ari's post as well.

Thanks again to you BOTH and to this GREAT Community.

Love and peace,

Joe