WebCenter ADF Twitter Bootstrap Theme

With data binding and visualization capability, Oracle ADF provides a foundation to extend self-service and other capability to end users via a J2EE system. Natively ADF supplies a particular default look and feel to any components within a page via CSS generated within the service side application. When extending experiences to external parties organizations will gain benefit from the ADF’s basic capabilities, but will generally want to adjust the user interface to something that is appropriate for their given audience.

The following example ADF Template & Skin is by no means an exhaustive package, but attempts to take basic elements from Twitter’s infamous Bootstrap UI Framework and apply it to a WebCenter application. The attempt is a sample proof that highlights key elements of what is required to make this possible.

You can download the theme at the bottom of this post.

Each page within the sample highlights some of the various styling capabilities for various components. Additionally, it supplies a minimalistic page template with bare-bones ADF layout components. Styling occurs within the ADF Skin, as well as via an external style sheet that leverages what is supplied by Twitter Bootstrap.

Download WebCenter Portal ADF Bootstrap Theme

27 Comments
  • angelosantagata
    Reply
    February 14, 2013

    very nice!

    • John Brunswick
      Reply
      February 14, 2013

      @angelosantagata Thanks for the kind words!  Definitely a beta, as the files are not minified or tightened up, but the core concepts hold.  Hopefully this can help a few people getting started with skinning.

  • agawish
    Reply
    February 14, 2013

    I love it, thumbs up

    • John Brunswick
      Reply
      February 14, 2013

      @agawish Thanks for the kind words!  If people like it – might be something to place on GitHub and let people evolve / contribute.

      • agawish
        Reply
        February 14, 2013

        @John Brunswick That’s a very good idea, I’d love to contribute

  • ADFDeveloper
    Reply
    February 14, 2013

    John,
    What about getting this to work for a standard ADF application?

    • John Brunswick
      Reply
      February 14, 2013

      @ADFDeveloper It would need a quick test, but the base of the CSS is built using a standard ADF skin.  Since it is just some custom CSS + a base skin, it should work pretty much as it.  The WebCenter Portal pages are just JSPX pages, along with the main page template.  The key is using the tr-inhibit pretty liberally, then laying over some custom CSS and setting a style class for a given control as needed (some controls like text fields will automatically pick up the new styling, others like buttons will need the Bootstrap style classes – e.g. btn-primary, etc).

  • leighelliott78
    Reply
    February 28, 2013

    Hi, This looks really good.  Do you have any examples (demo apps or even screen shots)?  Also what is the Github URL for the template/code?  We develop an Oracle ADF application and I haven’t always been impressed with the standard skin themes that Oracle provide so keen to see how we could modify.

    • John Brunswick
      Reply
      February 28, 2013

      @leighelliott78 Thanks for the kind words.  It is not on Github yet, but the sample application and code is available for download at http://www.johnbrunswick.com/wp-content/uploads/2013/02/WebCenter-Portal-ADF-Bootstrap-Theme.zip.  The app has a series of pages that showcase different portions of UI.  Will expand more as time permits – but have been traveling like crazy lately.  Hope that helps!

      • leighelliott78
        Reply
        March 1, 2013

        @John Brunswick Thanks John, understand.

  • rajasree
    Reply
    April 4, 2013

    Hi John,
     
    I really like your tutorials. I have been trying css navigation with go links, but I am getting as links in my portal and it works fine. But when I apply CSS style to it, it doesn’t it. It simply displays list of links. Can you please suggest me what can be done. It would be a great help. Thanks.

    • John Brunswick
      Reply
      April 5, 2013

      @rajasree Thanks Rajasree – if you use a tool like Google Chrome’s Inspection – can you see if the style you are trying to apply
       
      1. Is being applied, check that your selector is correct.
      2. Is being overridden by another style?  Sometimes your style might be getting applied, but then overridden based on CSS specificity.  See the following link for details
      http://css-tricks.com/specifics-on-css-specificity/
       
      Also – are you setting your styling in the CSS generated via ADF or an external sheet?
       
      Cheers,
      John

      • rajasree
        Reply
        April 5, 2013

        @John Brunswick  @rajasree Hi John, Thanks for the quick response. Yes, I have all the css styles, placed correctly. When I use like this <li> <af:golink text=”#{menu.title}” destination=”#{menu.goLinkPrettyUrl}”> targetFrame=”#{menu.attributes[‘Target’]}”/> </li> —> css style is not working, it just displays as list. When I use <li> <a href=”/webcenter${menu.goLinkPrettyUrl}”>${menu.title}</a> —> css style works perfectly fine but, links doesn’t work. It shows error 404 not found page.
         
        Thanks,
        Rajasree

        • John Brunswick
          Reply
          April 10, 2013

          @rajasree Apologies for the delay – have been prepping materials for the Collaborate 13 conference, as well as a complete overhaul of this site.  If you leverage a tool like the Live CSS Editor plugin from Chrome, are you CSS changes being applied as you try them?  Feel free to connect with me on LinkedIn and I can help you dig into what the issue might be with your CSS.
           
          Regarding the link giving a 404, check to make certain that the path that is being generated is actually a valid link.  By using the above code, some assumptions are made with your base path, etc.

  • angelohannes
    Reply
    September 12, 2013

    John BrunswickADFDeveloper
    Hey John,
    could you please elaborate on this topic? Unfortunately I can’t run your WebCenter example. I’m trying to use Bootstrap with a ADF Fusion Web Application. Can you name some steps, that I need to follow.
    Additionally, do you think it is possible to pack Bootstrap as a skin on its own. So we don’t have to set the styleClass attributes?

  • angelohannes
    Reply
    September 12, 2013

    John BrunswickADFDeveloper
    Hey John,
    could you please elaborate on this topic? Unfortunately I can’t run your WebCenter example. I’m trying to use Bootstrap with a ADF Fusion Web Application. Can you name some steps, that I need to follow.
    Additionally, do you think it is possible to pack Bootstrap as a skin on its own. So we don’t have to set the styleClass attributes?

  • John Brunswick
    Reply
    September 12, 2013

    angelohannes John Brunswick ADFDeveloperThanks  Angelo.   You will still have to apply style classes to use this approach.  it allows CSS  to address some of the nested auto generated code.   Using the  external style sheet and base skin provided in the example above, it should work. What issues are you running into?

  • angelohannes
    Reply
    September 18, 2013

    John Brunswick angelohannes ADFDeveloper I think the main issue is my different goal. I would like to not touch the application. I would like to just switch the skin. Maybe that is possible with @import and -tr-rule-ref

  • leandrolb
    Reply
    November 6, 2013

    Hi http://www.livefyre.com/profile/93834/, first of all thanks so much for help a lot of people with this article. 
    I am using this beta project in some portals right now, pretty good so far.
    We just have a little problem in the Hover button, but I fixed.
    My next step is trying apply the foundation (framework – foundation.zurb.com ) in ADF, but now I have been trying understand how did you do everthing with bootstrap.
    thats all John.
    My Best

  • Tito Araujo
    Reply
    January 7, 2014

    Hi John, I downloaded the bootstrap theme and I would love to use it to our site. I’m very new to webcenter and jdeveloper and I was wondering if you could send me more of a step by step process to get this theme up and running on webcenter? Thank you for your help

  • John Brunswick
    Reply
    January 7, 2014

    leandrolb Thanks for the kind words – would be great to see what you come up with around zurb!

  • leandrolb
    Reply
    March 11, 2014

    Hello John.
    When you create a innovation.css inside folder named skin you must to change in the admin panel which skin you want to use right??

  • candaceps
    Reply
    June 19, 2014

    Hello John Brunswick 

    Is this project still something you are working on? Did you base your project on either Less or SASS? I’d be interested in helping it to go that way. What ADF needs (to make it beautiful) seems to be a combination of this approach + SASS + Compass. 

    Has anyone tried this? Thoughts?

  • leandrolb
    Reply
    September 23, 2014

    Hi candaceps I had some issues when I tried it. I’ll try again soon and I let to you know.  

    I was working on a project and we decided to use bootstrap cause it’s some easy to work than foundation but I have to say that I rather use foundation cause (for me) has more and more “tools” to develop. Anyway I’ll try again soon. If you try let me know ok ? 
    Tks

  • candaceps
    Reply
    September 23, 2014

    Hi leandrolb – I’ve explored John Brunswick’s approach now and discovered a couple of things that make it unusable for our situation. Here’s what I’ve found:

    1) John doesn’t use the ADF rendering engine to process his CSS (Bootstrap) files. I was confused by this at first because there are so many CSS files in the project, and I (incorrectly) assumed that they were being processed by the ADF rendering engine and used in the demo. 

    2) John imports 2 CSS files directly into his .jspx pages, and (in the end I realized that) these 2 files are the only ones being used in the demo. 

    3) I tried to incorporate SASS into John’s approach and that was how I discovered the project wasn’t using the ADF rendering engine. 

    4) I tried a different approach completely for ADF Skinning: that of using SASS + Compass as recommended by Amr Gawish (author of the ADF Faces Cookbook) and I’ve had satisfactory results with that. I started with using Scout to compile my SASS but also tried PrePros and would prefer it over Scout. 

    I haven’t tried Foundation with ADF yet.

    Building a beautiful site with ADF would still require a Graphic Designer and Front End Developer IMO. 

    Hope that helps.

  • John Brunswick
    Reply
    October 1, 2014

    candaceps leandrolb Apologies for the long delay, have been heads down getting ready for Dreamforce (moved to Salesforce.com earlier this year).  I am not maintaining the code for the template anymore, but I do know that there are some new skins that ship out of the box with ADF.

    Hope that the example could at least get people started.  Would suggest connecting with John Sim from Fishbowl http://www.fishbowlsolutions.com/index.htm, as he does a ton of awesome UX work with ADF.

Leave a comment