WebCenter ADF Twitter Bootstrap Theme

33 Flares 33 Flares ×

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

rajasree 5 pts

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.

share flag

spam
offensive
disagree
off topic

John Brunswick 8 pts moderator

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

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

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.

leighelliott78 5 pts

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.

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!

John Brunswick Thanks John, understand.

ADFDeveloper 5 pts

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

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

agawish 5 pts

I love it, thumbs up

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

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

angelosantagata 5 pts

very nice!

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.