FoBo.TBNavBar adding CSS class

[Colin Bester]

Looking for advice on how to add a css class to menu item (li tag) - similar to using MenuCssClass function in Loc function

val scratchLoc = Loc("ScratchPage", "scratch" :: Nil, S ? "Scratch", MenuCssClass(() =>"myClass"), LocGroup("main"));

If I try using MenuCssClasss in standard Lift project (non bootstrap) then the class is correctly added in transformed template. If I use it with FoBo toolkit and bootstrap the specified class is not added to output.

I am looking to add a icon image to various menu items without having to recreate ul/li list in my template file and to simply wrap Lift's menu in FoBo.TBNavBar.

Using liftweb 2.5

FoBo Bootstrap 230

FoBo FontAwesome 300

Suggestions appreciated.

Colin

[Peter Petersson]

Hi Colin

Have you looked at the example [1] (and its code the Paths object in boot [2] and the resource file for example [3] ).
Although the demo example code is not optimal (I am working on a cleaner documentation), this is one way of doing it.

Oh better yet take a look at the same Paths object and stuff in Templating-With-Twitter-Bootstrap [4], [5] and [6]

I have not tried using the MenuCssClass approache and I suspect it wont work out of the box as the FoBo.TBNavbar is costume built on top of FlexMenuBuilder, I hope this helps?
 

[1] http://www.media4u101.se/fobo-lift-template-demo/libo#fobo-snippets
[2] https://github.com/karma4u101/FoBo-Lift-Template/blob/master/src/main/scala/bootstrap/liftweb/Boot.scala
[3] https://github.com/karma4u101/FoBo-Lift-Template/blob/master/src/main/webapp/templates-hidden/_resources.html
[4] https://github.com/karma4u101/Templating-With-Twitter-Bootstrap
[5] https://github.com/karma4u101/Templating-With-Twitter-Bootstrap/blob/master/src/main/scala/bootstrap/liftweb/Boot.scala
[6] https://github.com/karma4u101/Templating-With-Twitter-Bootstrap/blob/master/src/main/webapp/templates-hidden/_resources.html

best regards 
  Peter Petersson  

2013/5/21 Colin Bester <bester...@gmail.com>

--
--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code
 
---
You received this message because you are subscribed to the Google Groups "Lift" group.
To unsubscribe from this group and stop receiving emails from it, send an email to liftweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Colin Bester]

Thanks Peter.

Yes I have looked at the documents you mentioned. Ideally I would like to be able to override the caret class as well. But coming back to these examples...

I have used both message resource bundles (in properties file) and _resource.html as in your example, both giving different results.

In boot.scala I have created separate locs for each menu item, as example:

val scratchLoc = Loc("ScratchPage", "scratch" :: Nil, S ? "Scratch", LocGroup("main"));

When using resource bundle in properties files, using:

Scratch = <i class="icon-book icon"></i> Scratch1

I get html output of

<ul class="nav">
  <li>
    <a href="/scratch">&lt;i class="icon-book icon"&gt;&lt;/i&gt; Scratch1</a>
  </li>
</ul>

i.e., <i> element has been escaped.

If instead I use the _resources.html file as source then I get the following html output:

<ul class="nav">
  <li>
    <a href="/scratch"> Scratch</a>
  </li>
</ul>

i.e., no <i> element at all

~C

[Colin Bester]

Okay, new day, fresh start.

I noticed that S.loc returns NodeSeq where S.? returns a string.

A simple wrapper and I have icons defined in resource file working...

   

def getText(reference: String) : NodeSeq  = {
      S.loc(reference, Text(reference))    
    }
   
val scratchLoc = Loc("ScratchPage", "scratch" :: Nil, getText("Scratch"), LocGroup("main"));

Now to figure out difference in defining resource files...

Peter, thanks again.

Colin

[Peter Petersson]

I thing the handling of S.loc changed to NodeSeq somewhere around 2.5 M4.

So in your case try use S.loc(...,...) instead of S ?. 

Here is one "special case" where I am using it (where a simple Menu.i(...) did not suffice)

val tb222Doc = Menu(Loc("Bootstrap", Link(List("bootstrap-2.2.2"), true, "/bootstrap-2.2.2/index"), S.loc("Bootstrap" , Text("TB Documentation")),LocGroup("nl1") ))

best regards

  Peter Petersson 

2013/5/22 Colin Bester <bester...@gmail.com>

[Colin Bester]

Thanks, that's what I found. For now I am using my wrapper and simply using css to remove caret where it's not required.

~C

[Peter Petersson]

sry I was reading your post to hasty, you had already found that one out :) Also a good thing you found a workaround for the caret thingy.
 

I would like to make the FoBo.TBNav* snippets even more flexible and your feedback has been valuable so thanks for that, and as always yours and others contributions is welcome and appreciated. 

best regards

  Peter Petersson