In order to eliminate the issue under point 1, we could modify slightly the interested code in layout.html in:
<!-- Masthead ================================================== --> <header class="mastheader row" id="header"> <div class="span12"> <div class="page-header"> <h1>{{if response.title is not None:}} {{=response.title}} <small>{{=response.subtitle or ''}}</small>{{pass}} </h1> </div> </div> </header> About point 2, in order to change the color of the links it's enough to set the following rules in web2py_bootstrap.css (preferibly on top of the file below the first rule): a{color: magenta;} a:visited{color: pink;} a:hover{color: red;} a:focus{color: brown;} a:active{color: darkmagenta;} Of course please change the color value at your taste. The same for the color of headers: h1{color: green;} h2{color: lightgreen;} h3{} h4{} h5{} h6{} Finally, for the image under menu there are several ways in order to obtain the same result. Replace the title with a big image: <!-- Masthead ================================================== --> <header class="mastheader row" id="header"> <div class="span12"> <div class="page-header"> {{response.title = XML('<img src="%s" alt="web2py image" />' % (URL('static','images/big_image.jpg'))) # this is only for example}} {{response.subtitle = None # this is only for example}} <h1>{{if response.title is not None:}} {{=response.title}} <small>{{=response.subtitle or ''}}</small>{{pass}} </h1> </div> </div> </header> In this case the image will not be as wide as the page width. To obtain the right result we have to add a new element in layout.html and some css rules to web2py_bootstrap.css. Here attached the patched files. Please note that the code has not been deeply tested, so please let me know if you'll find bugs. Il giorno martedì 4 giugno 2013 16:20:21 UTC+2, Massimo Di Pierro ha scritto: > > I would like help with two css issues: > > 1) In layout.html if there is no response.title, the page content slides > up and may disappear under the menu banner. Can we prevent this? > > 2) In web2py_bootstrap.css I would like to have example code to change the > colors without changing the bootstrap.css (specifically color of links, > headers, menu banner, and add a page wide image under the menu banner. > These seems to be recurrent needs. > -- --- You received this message because you are subscribed to the Google Groups "web2py-users" group. To unsubscribe from this group and stop receiving emails from it, send an email to web2py+unsubscr...@googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.Title: {{=response.title or request.application}}
{{#response.title = XML('' % (URL('static','images/bootstrap_idea2.png'))) # this is only for example}}
{{#response.subtitle = None # this is only for example}}
{{if response.title is not None:}} {{=response.title}} {{=response.subtitle or ''}}{{pass}}
{{block center}}
{{include}}
{{end}}
{{if right_sidebar_enabled:}}
{{block right_sidebar}}
{{pass}}
Right Sidebar
{{end}}/*============================================================= CUSTOM RULES ==============================================================*/ body{height:auto;} /* to avoid vertical scroll bar */ a{} a:visited{} a:hover{} a:focus{} a:active{} h1{} h2{} h3{} h4{} h5{} h6{} div.flash.flash-center{left:25%;right:25%;} div.flash.flash-top,div.flash.flash-top:hover{ position:relative; display:block; margin:0; padding:1em; top:0; left:0; width:100%; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5); color:#865100; background:#feea9a; border:1px solid; border-top:0px; border-left:0px; border-right:0px; border-radius:0; opacity:1; } #header{margin-top:60px;} .mastheader h1 { margin-bottom:9px; font-size:81px; font-weight:bold; letter-spacing:-1px; line-height:1; font-size:54px; } .mastheader small { font-size:20px; font-weight:300; } /* auth navbar - primitive style */ .auth_navbar,.auth_navbar a{color:inherit;} .ie-lte7 .auth_navbar,.auth_navbar a{color:expression(this.parentNode.currentStyle['color']); /* ie7 doesn't support inherit */} .auth_navbar a{white-space:nowrap;} /* to avoid the nav split on more lines */ .auth_navbar a:hover{color:white;text-decoration:none;} ul#navbar>.auth_navbar{ display:inline-block; padding:5px; } /* form errors message box customization */ div.error_wrapper{margin-bottom:9px;} div.error_wrapper .error{ border-radius: 4px; -o-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* below rules are only for formstyle = bootstrap trying to make errors look like bootstrap ones */ div.controls .error_wrapper{ display:inline-block; margin-bottom:0; vertical-align:middle; } div.controls .error{ min-width:5px; background:inherit; color:#B94A48; border:none; padding:0; margin:0; /*display:inline;*/ /* uncommenting this, the animation effect is lost */ } div.controls .help-inline{color:#3A87AD;} div.controls .error_wrapper +.help-inline {margin-left:-99999px;} div.controls select +.error_wrapper {margin-left:5px;} .ie-lte7 div.error{color:#fff;} /* beautify brand */ .navbar-inverse .brand{color:#c6cecc;} .navbar-inverse .brand b{display:inline-block;margin-top:-1px;} .navbar-inverse .brand b>span{font-size:22px;color:white} .navbar-inverse .brand:hover b>span{color:white} /* beautify web2py link in navbar */ span.highlighted{color:#d8d800;} .open span.highlighted{color:#ffff00;} .image_container img{width:100%;} /*============================================================= OVERRIDING WEB2PY.CSS RULES ==============================================================*/ /* reset to default */ a{white-space:normal;} li{margin-bottom:0;} textarea,button{display:block;} /*reset ul padding */ ul#navbar{padding:0;} /* label aligned to related input */ td.w2p_fl,td.w2p_fc {padding:0;} #web2py_user_form td{vertical-align:middle;} /*============================================================= OVERRIDING BOOTSTRAP.CSS RULES ==============================================================*/ /* because web2py handles this via js */ textarea { width:90%} .hidden{visibility:visible;} /* right folder for bootstrap black images/icons */ [class^="icon-"],[class*=" icon-"]{ background-image:url("../images/glyphicons-halflings.png") } /* right folder for bootstrap white images/icons */ .icon-white, .nav-tabs > .active > a > [class^="icon-"], .nav-tabs > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"] { background-image:url("../images/glyphicons-halflings-white.png"); } /* bootstrap has a label as input's wrapper while web2py has a div */ div>input[type="radio"],div>input[type="checkbox"]{margin:0;} /* bootstrap has button instead of input */ input[type="button"], input[type="submit"]{margin-right:8px;} /*============================================================= RULES FOR SOLVING CONFLICTS BETWEEN WEB2PY.CSS AND BOOTSTRAP.CSS ==============================================================*/ /*when formstyle=table3cols*/ tr#auth_user_remember__row>td.w2p_fw>div{padding-bottom:8px;} td.w2p_fw div>label{vertical-align:middle;} td.w2p_fc {padding-bottom:5px;} /*when formstyle=divs*/ div#auth_user_remember__row{margin-top:4px;} div#auth_user_remember__row>.w2p_fl{display:none;} div#auth_user_remember__row>.w2p_fw{min-height:39px;} div.w2p_fw,div.w2p_fc{ display:inline-block; vertical-align:middle; margin-bottom:0; } div.w2p_fc{ padding-left:5px; margin-top:-8px; } /*when formstyle=ul*/ form>ul{ list-style:none; margin:0; } li#auth_user_remember__row{margin-top:4px;} li#auth_user_remember__row>.w2p_fl{display:none;} li#auth_user_remember__row>.w2p_fw{min-height:39px;} /*when formstyle=bootstrap*/ #auth_user_remember__row label.checkbox{display:block;} span.inline-help{display:inline-block;} input[type="text"].input-xlarge,input[type="password"].input-xlarge{width:270px;} /*when recaptcha is used*/ #recaptcha{min-height:30px;display:inline-block;margin-bottom:0;line-height:30px;vertical-align:middle;} td>#recaptcha{margin-bottom:6px;} div>#recaptcha{margin-bottom:9px;} div.control-group.error{ width:auto; background:transparent; border:0; color:inherit; padding:0; background-repeat:repeat; } /*============================================================= OTHER RULES ==============================================================*/ /* Massimo Di Pierro fixed alignment in forms with list:string */ form table tr{margin-bottom:9px;} td.w2p_fw ul{margin-left:0px;} /* web2py_console in grid and smartgrid */ .hidden{visibility:visible;} .web2py_console input{ display: inline-block; margin-bottom: 0; vertical-align: middle; } .web2py_console input[type="submit"], .web2py_console input[type="button"], .web2py_console button{ padding-top:4px; padding-bottom:4px; margin:3px 0 0 2px; } .web2py_console a, .web2py_console select, .web2py_console input { margin:3px 0 0 2px; } .web2py_grid form table{width:auto;} /* auth_user_remember checkbox extrapadding in IE fix */ .ie-lte9 input#auth_user_remember.checkbox {padding-left:0;} /*============================================================= MEDIA QUERIES ==============================================================*/ @media only screen and (max-width:979px){ body{padding-top:0px;} #navbar{top:5px;} div.flash{right:5px;} .dropdown-menu ul{visibility:visible;} .image_container{margin-top:-20px;} } @media only screen and (max-width: 767px){ .image_container{ margin-left:-20px; margin-right:-20px; } } @media only screen and (max-width:479px){ body{ padding-left:10px; padding-right:10px; } .navbar-fixed-top,.navbar-fixed-bottom { margin-left:-10px; margin-right:-10px; } input[type="text"],input[type="password"],select{ width:95%; } }