For web2py V2.8.2, how can I customize the default layout, changing colors and background images?

[JoeCodeswell]

Dear web2py Community,

I am trying follow the book Edition 6 to customize the default layout, changing colors and background images.

I'd like to change the navbar background and the [.header h1; .statusbar; .footer; ]  selectors to darkred == #880000.

Under "Customizing the default layout", the book says, "try append the following code to layout.html header."

<style>
body { background: url('images/background.png') repeat-x #3A3A3A; }
a { color: #349C01; }
.header h1 { color: #349C01; }
.header h2 { color: white; font-style: italic; font-size: 14px;}
.statusbar { background: #333333; border-bottom: 5px #349C01 solid; }
.statusbar a { color: white; }
.footer { border-top: 5px #349C01 solid; }
</style>

Following the book, I tried:

<style>
// joe1
// match [.header h1; .statusbar; .footer; ] =  #XXXXXX == darkred = #880000
body { background: url('images/background.png') repeat-x #3A3A3A; }
a { color: #349C01; }
.header h1 { color: #880000; }
.header h2 { color: white; font-style: italic; font-size: 14px;}
.statusbar { background: #880000; border-bottom: 5px #349C01 solid; }
.statusbar a { color: white; }
.footer { border-top: 5px #880000 solid; }
// /joe1
</style>

The [.header h1] color didn't change. The footer color did.

Does the book need to be updated? Or is it just my lack of understanding?

I'd like to make the navbar background color darkred as well.

Any suggestions would be appreciated.

Thanks in advance.

Love and peace,
Joe 

P.S. A Google group issue: The suggested tags for this Post are:

sessions ·  cache ·  internationalization ·  routing ·  error_handling ·  scheduler ·  modules ·  views ·  html_helpers ·  DAL ·  uploads ·  forms ·  validation ·  grid ·  crud ·  mail ·  auth ·  services ·  REST ·  javascript ·  ajax ·  components ·  plugins ·  deployment ·  GAE ·  development ·  debugging ·  testing ·  models ·  bug ·  GIS ·  trunk ·  e-learning ·  contrib ·  css ·  payments

However, nothing after "deployment" shows up in my browser, so originally, until i copied and pasted the above, i didn't see  "css".

Thanks again.

Love and peace,
Joe

[Niphlod]

I guess that piece of the book needs an update.
There is no .header nor .statusbar in the current scaffolding app.

However, given that is based on bootstrap 2.3.2, you can find a boatload of pointers in google on how to customize the color scheme .

[JoeCodeswell]

Dear Niphlod,

Thanks for the response. I DID get something going by FireBugging my page. Here is what I came up with:

<style>

/*
// original from book SUCKS

body { background: url('images/background.png') repeat-x #3A3A3A; }
a { color: #349C01; }
.header h1 { color: #349C01; }
.header h2 { color: white; font-style: italic; font-size: 14px;}
.statusbar { background: #333333; border-bottom: 5px #349C01 solid; }
.statusbar a { color: white; }
.footer { border-top: 5px #349C01 solid; }

// /original from book SUCKS
*/
// joe1
// WAS match [.header h1; .statusbar; .footer; ] =  #XXXXXX == darkred = #880000
// WAS match [.header h1; .statusbar; .footer; ] =  #XXXXXX =! darkred = #AA0000
// WAS #AA0000 = #BB0000  [too light for white links in menu ]
// NOW #BB0000 = #AA0000  

body { background: url('images/background.png') repeat-x #3A3A3A; }
a { color: #349C01; }

//.navbar {background: #AA0000; }
.navbar-inverse .navbar-inner {background: #AA0000; }

/* http://127.0.0.1:8000/songfest/static/css/bootstrap.min.css */
.navbar-inverse .nav > li > a{
color: #FFFFFF;
/*color: #333333;*/
}

div.flash {
    background-color: #AA0000;
    background-image: -moz-linear-gradient(90deg, #AA0000, #AA0000);
}

.page-header h1 { color: #AA0000; } //.header h1 { color: #AA0000; }

.header h2 { color: white; font-style: italic; font-size: 14px;}

.statusbar { background: #AA0000; border-bottom: 5px #349C01 solid; }
.statusbar a { color: white; }
.footer { border-top: 5px #AA0000 solid; }
// /joe1
</style>  

The navbar is red & the links in the menu start out white. It could still use a little work on the menu hover.

Thanks again for the response, Niphlod. I subbmitted a "book bug" == Issue 1802 

Love and peace,

Joe

[JoeCodeswell]

Dear Niphlod and Community,

First, thanks Niphlod for putting me onto bootstrap 2.3.2. This looks GREAT.

Finally, I apologize for using, what sometimes i mistakenly think of as a technical term "SUCKS", in my above Post:

 

// original from book SUCKS

in my comments meant only for myself. This has no place in this Very Supportive Community.

I apologize.

Love and peace,

Joe 

[Massimo Di Pierro]

Dear Joe,

While I believe it is important to keep our discussions here professional, civil, and focused, it is also clear that your comment was an oversight and I agree with the feeling being expressed. That section of the book should be improved and expanded.

I trust nobody felt offended and I for sure was not. :-)

Massimo

[JoeCodeswell]

Dear Massimo,

Thanks for the support. I express my frustration in the comments i make for my private consumption, to energize me. When they get published they take on a whole new meaning.

I am VERY GRATEFUL for the MAGNIFICENT book and its continuing improvement as it tracks the MAGNIFICENT framework improvements that you and the team make.

Thanks for your leadership, the Framework, its Documentation and the GREAT Community.

Love and peace,

Joe