How to change menu bar background and font colors
Karoly Kantor
Dave S
On Wednesday, April 26, 2017 at 5:20:12 AM UTC-7, Karoly Kantor wrote:
I am a little embarrassed to ask this, but I've been trying to do this for hours now... I have found various items in the css files i was sure at the time they would do the job, but none of them had any impact eventually.So, please someone help me, how exactly do I change the menu bar background and font colors?
This is one post from a thread about doing that:
<URL:https://groups.google.com/d/msg/web2py/OxBABw5LYzc/MtqQ6O6lCgAJ>
and elsewhere Anthony pointed out that the navbar returns an HTML helper object and you can manipulate the components of that.
<URL:https://groups.google.com/d/msg/web2py/msMs8BK-dqM/nb_MMHylHaUJ>
There may be some help in there.
/dps
Carlos Kitu
What I use to do when I don't want to deal with css changes or creating new classes, just a quick and dirty solution is:
Right click on the element I want to change – Inspect
I get a pane with the html code.
For instance, if I try to change the style of navbar, I would right click on LOG IN and in the inspect pane I would get:
And at the right styles pane I have this:
There you see the styles for the navbar <A...> element.
You can click in the attribute you want to change, for instance the color, and select another one:
I changed the color from 98978b to f4f3ed using a convenient color picker, as you can see.
Now I would copy that code:
.navbar-default .navbar-nav>li>a{color: #f4f3ed;}
In a <style> clause, directly in the html view, or using an html helper:
newstyle = STYLE(XML('.navbar-default .navbar-nav>li>a{color:#f4f3ed;} ))
and put it in the html view: {{=newstyle}}
Or, if you don't want to use an html helper, just copy this in the html view:
<STYLE>.navbar-default .navbar-nav>li>a{color:#f4f3ed;}</STYLE>
The previous code redefines de .navbar style.
Another case, if you are creating an element with an html helper, let's suppose a A() link, you can just do the same and use the _style parameter in the html helper.
For instance to force a 5px margin right in a button, you need to right click the link and inspect. Here you can see the html code, and if go down in the style pane:
Next, click in the right margin “-”, and change it to 5:
And now you can see the corresponding change in the <a...> html code, with the insertion of : style=" margin-right: 5px; "
Now you just need to add that in the _style parameter of the html helper:
A('link...', _href=URL('default', 'nota_servicio', args=['view', 'nota_servicio', nota.id])), _class="list-group-item", _style='margin-right: 5px;')
Google Chrome's inspector is your best friend for html and css tunning :-D