WebCenter ADF Twitter Bootstrap Theme

[easy-social-share counters=1 total_counter_pos="leftbig"]
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

28 Comments

  1. angelosantagata 6 years ago

    very nice!

    • Author
      John Brunswick 6 years ago

      @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.

  2. agawish 6 years ago

    I love it, thumbs up

    • Author
      John Brunswick 6 years ago

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

      • agawish 6 years ago

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

  3. ADFDeveloper 6 years ago

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

    • Author
      John Brunswick 6 years ago

      @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).

  4. leighelliott78 6 years ago

    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.

    • Author
      John Brunswick 6 years ago

      @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 6 years ago

        @John Brunswick Thanks John, understand.

  5. rajasree 6 years ago

    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.

    • Author
      John Brunswick 6 years ago

      @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 6 years ago

        @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

        • Author
          John Brunswick 6 years ago

          @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.

  6. angelohannes 6 years ago

    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?

  7. angelohannes 6 years ago

    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?

  8. Author
    John Brunswick 6 years ago

    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?

  9. angelohannes 6 years ago

    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

  10. leandrolb 5 years ago

    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

  11. Tito Araujo 5 years ago

    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

  12. Author
    John Brunswick 5 years ago

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

  13. leandrolb 5 years ago

    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??

  14. candaceps 5 years ago

    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?

  15. leandrolb 5 years ago

    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

  16. candaceps 5 years ago

    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.

  17. Author
    John Brunswick 5 years ago

    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 reply

Your email address will not be published. Required fields are marked *

*