Several months ago, I gave a presentation on custom theming with front-end frameworks in Application Express. The frameworks I referred to in my talk were Twitter Bootstrap and ZURB Foundation. These two open-source products are, in my opinion and experience, the most popular and feature-rich. For demonstration purposes, I created two custom themes based on the aforementioned frameworks. I’d like to share with you these themes since they demonstrate the capabilities of and differences between Bootstrap and Foundation.
Both frameworks integrate well with the templating mechanism of APEX. There wasn’t a notable difference between them because of the fact that Bootstrap and Foundation are very alike in usage. The biggest difference is of course the visual outcome. I created a simple demo application that includes the most common UI components. One application uses the Twitter Bootstrap theme, while a second similar application has been skinned with the Foundation theme. I personally prefer the look and feel of the Twitter Bootstrap theme, but that’s something personal of course. Here’s how the Bootstrap theme looks like.
- Every page includes a navigation bar, breadcrumb region and sticky footer.
- I used the grid layout mechanism to facilitate responsive design. I have to say this worked out pretty well since the majority of the pages fit on all sorts of screen sizes and devices.
- I was able to implement two types of form layouts: stacked and horizontal.
- Forms are validated client-side using the APEX Live Validation (ALV) plugin.
- Classic and interactive reports are based on Bootstrap’s tables.
- Vertical sidebar navigation, which is also a Bootstrap component.
- Login page.
Now it’s Foundation’s turn.
- The navigation bar, breadcrumb region and sticky footer are always visible.
- I implemented Foundation’s grid system
- Forms are validated client-side again using the APEX Live Validation (ALV) plugin.
- Classic and interactive reports had a little makeover.
- Vertical sidebar navigation, which is an out-of-the-box Foundation component.
- Login page.
Update on 21-11-2013: Seems like there’s a lot of interest in the themes. That’s why I decided to make both demo applications publicly available. You can do whatever you want with the themes.
APEXPLAINED 
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
Are these two themes available for download/usage??
LikeLike
Please, how can i get a downloadable version of your application to help me understand fully how theming works in apex.
Thanks
LikeLike
Great look and feel for themes !! as other asked this.. Can we download or use this theme/s. Thanks
LikeLike
I have updated the article with download links to the demo applications.
LikeLike
Great work. I will work through your examples in the next weeks. Will give you more feedback then.
Cheers Tobias
LikeLike
Great job. I was struggling to setup bootstrap template. Thank you for sharing.
LikeLike
Awesome! Thanks for sharing!
LikeLike
Nice theme, only the addrow function in a master-detail form is not working.
It must be something in the template, can’t find it.
LikeLike
Excellent themes Nick. Really nice.
Now that Apex 4.2.4 has incorporated Bootstrap version 3, do you see any issues in using the same theming concepts for the new version? I notice that in Bootstrap 3 there are no .png image files for the glyphicons, only the standard four for modern web fonts (eot, svg, ttf and woff) and I wondered how this would work?
cheers,
Steve
LikeLike
Hey Steve,
Using the Bootstrap 3 Glyphicons in an APEX theme shouldn’t be a problem. Just make sure to include all Bootstrap resource files (CSS, JS and fonts) and edit the bootstrap.min.css file. Search for @font-face in the file and fix the font file location references for the src attributes. Please note that you can’t use substitution strings in workspace or application files. If you want to do so, move the CSS rule to your page template(s) as inline CSS. For example:
@font-face { font-family: 'Glyphicons Halflings'; src: url('#WORKSPACE_IMAGES#glyphicons-halflings-regular.eot'); ... }Best regards,
Nick
LikeLike
Hi Nick,
Thanks for the reply.
I was almost there – I had done exactly as you said. I thought that I had messed it up as the icons were not showing, but I’ve just re-read the documentation on Bootstrap 3 changes and the glyphicon naming has changed. I changed the names to match the new format and it’s now working.
e.g. glyphicon glyphicon-cog replaces icon-cog
Thanks again for your assistance.
cheers,
Steve
LikeLike
Thanks for sharing!! I understand that Apex 5 will include Twitter Bootstrap. It would be great if it also included Themes based on Zurb Foundation.
Pat
LikeLike
I believe APEX 4 also have a copy of the Bootstrap library with it..
LikeLike
Did anyone resolve the issue ‘Jaap’ posted on add rows to master detail not working?
LikeLike
Hey Patrick,
I had a look into this and the problem is the #REGION_STATIC_ID# substitution string in the report template.
Replace id=”#REGION_STATIC_ID#” with id=”report_#REGION_STATIC_ID#”. That should fix the problem.
Nick
LikeLike
Thanks, Nick,
Our university’s web office has been building a university UI standard built on Zurb Foundation. They have put our standards on GitHub and I have downloaded. Included is an ‘scss’ file which I guess includes some ‘overrides’ of the baseline Foundation. Can you give me any pointers as to how these could be applied to your Zurb Foundation theme? My concept would be that we do a school specific Theme that all our Apex users would then use– with minor changes to department specific ‘brandbars’ etc. Color schemes are all supposed to follow our standard colors.
Also, one other note — when I tried to export the theme from your Foundation example application, I got a message that a calendar template was required, so Apex would not create the theme to add to my workspace.
Pat
LikeLike
Patrick,
You are right about the .scss file. Foundation is built with Sass, which a CSS preprocessor. APEX itself can’t handle that .scss file. You’ll have to compile it to pure CSS code by executing a command like this:
The CSS code generated in the output.css file should then be included in your custom APEX theme.
Hope that helps,
Nick
LikeLike
Nick, do you or do you know of any groups that will create a custom themes based on Foundation and our own university standards for such? If so, can you give me contact information?
Thanks,
Pat
LikeLike
Patrick,
The company I work for creates custom APEX themes. Not for free of course. Here’s the company website: http://www.contribute.be/. You can send me an e-mail at apexplained@gmail.com, in case you’re interested. I’ll then get you in touch with the right people.
Nick
LikeLike
Hope you enter full featured themes based on your work here for the new Apex theme competition that was announced earlier this month for 5.0!
LikeLike
Hello Nick,
How is the menu on the top filled (registration form, admin, employees and departments)?
Thanks,
Loet.
LikeLike
Hey Loet,
The navigation menu is a list region based on a static list in shared components. I don’t use the default tab system because of its limitations.
Nick
LikeLike
Hi Niick,
Thanks for your reply. Can you explain how the list entries are bind to #REGION_POSITION_01# ?
Thanks,
Loet.
LikeLike
Loet,
I have created a list region on page zero (aka global page) in the demo application. This list region uses the list you created in shared components. The display point of the region is set to Page Template Region Position 1 (aka #REGION_POSITION_01#). The position of the display point is specified in the page template. So you actually bind the list region, which is based on a list, to the display point.
Hope that helps,
Nick
LikeLike
Hello,
Could help me. In my App I use Dan Navbar plugin. I have to use Bootstrap 3 in my App. but by adding Bootstrap 3 to the App. Dan’s Navbar plugin does not work. The Navbar items do not show up. I changed the HTML of the navbar in the plugin Source to match the HTML of the Navbar of bootstrap 3. but to not avail.
LikeLike
Hey Fateh,
That’s a tricky situation you have there. Only changing the HTML won’t suffice I think. It might be possible that some JavaScript and/or CSS code conflicts. Do you get any console errors/warnings in your browser?
Isn’t it an option to create your own list template, based on Twitter Bootstrap 3, for tab navigation? That shouldn’t be too difficult. I don’t think you can achieve the same flexibility as Dan’s Navbar plugin, but it might help you out in this situation.
Nick
LikeLike
I will have to add Bootstrap Navbar Manually to the page. Without the plugin .
Thanks,
LikeLike
I extended your twitter bootstrap template into making custom Tabs. Everything just works perfect but the little hiccup with this is that, the form elements don’t float at all in all the Tabs excerpt the first which is ok.
Have u encounted something with this whiles using this ?
LikeLike
Hey bkintsiful,
I haven’t encountered the situation that you’re experiencing now. Is it possible that your HTML is invalid at some point after your first tab? That might explain the fact that your form elements don’t float properly.
Can you reproduce your situation on apex.oracle.com? That allows me to take a look at the problem myself.
Kind regards,
Nick
LikeLike
Can you tell us which version of Foundation you used for your demo app?
Pat
LikeLike
version 4.2.2.
LikeLike
Hi Nick,
Can I know the details steps for the Twitter Bootstrap App for Apex ? I just want the steps for the NavBar .
I tried with your demo app but something is missing. So if I could get step by step details, i will be really thankful to you.
I am using Apex 4.2.4.
Thanks,
Q_Dude
LikeLike
Hi Nick,
Can I know the details steps for the Twitter Bootstrap App for Apex ? I just want the steps for the NavBar .
I tried with your demo app but something is missing. So if I could get step by step details, i will be really thankful to you.
I am using Apex 4.2.4.
Thanks,
Q_Dude
LikeLike
Hey Q_DuDe,
Do you want the steps to actually create the Twitter Bootstrap nav bar using APEX templates? Or do you just want to know how you should work with it in the theme I’ve posted?
Does the following explanation help you?
“The navigation menu is a list region based on a static list in shared components. I don’t use the default tab system because of its limitations.”
“I have created a list region on page zero (aka global page) in the demo application. This list region uses the list you created in shared components. The display point of the region is set to Page Template Region Position 1 (aka #REGION_POSITION_01#). The position of the display point is specified in the page template. So you actually bind the list region, which is based on a list, to the display point.”
Best regards,
Nick
LikeLike
Hi Nick,
Thanks for writing back.
Yes, Actually I need steps to actually create the Twitter Bootstrap Navbar using Apex Template.
Because I did all the steps that you mentioned but it somehow did not work.
Can I please get the steps plesae ?
Sorry that I am asking too much :(
Thanks alot,
Q_Dude
LikeLike
Hi Nick,
Thanks for writing back.
Yes, Actually I need steps to actually create the Twitter Bootstrap Navbar using Apex Template.
Because I did all the steps that you mentioned but it somehow did not work.
Can I please get the steps plesae ?
Sorry that I am asking too much :(
Thanks alot,
Q_Dude
LikeLike
Q_DuDe,
It’s hard for me to explain all the steps required to create the Bootstrap navbar. Can’t you get it to work by looking at the page template code? Can I access your APEX application? That way I can have a look at your problem.
Nick
LikeLike
Thanks for all the work you have done it is really been helpful to me.
Any thoughts on upgrading to Bootstrap V3?
LikeLike
Hi Matt,
I’m not planning on updating to Bootstrap version 3. I do know, however, that some guys are creating a free Bootstrap 3 theme for APEX. Click here for more info.
Nick
LikeLike
Thanks for the reply Nick I have changed most objects from your original theme to V3 just have to iron out the kinks. I will take a look at the theme you mentioned.
LikeLike
please help me….how can i change apex_public_user to user who log in
LikeLike
how can i change project Name from Bootstrap Demo to another name….thanks Nick in advance
LikeLike
how can i change apex_public_user to user who log in
LikeLike
Hey Saly,
– “apex_public_user” is automatically replaced by the name of the user who’s logged in. Only pages that doesn’t require authentication show “apex_public_user”.
– You can change the project name by modifying the “PROJECT_NAME” substitution string (Shared Components > Edit Definition).
Nick
LikeLike
Thanks for you.. :)
LikeLike
Yes I can understand that there could be many steps.
No worries.
Just one question,
How can I change the color of the NavBar. I want to change it to Blue.
What and where is that change to be made, ?
Could you please help me in this?
Thanks alot,
Q_Dude
LikeLike
Also I would like to use all the Apex Default CSS for Interactive report and Classic reports. Just want to add the NavBar.
I was able to incorporate the Navbar successfully but the Interactive and Classic report CSS also got changed with it.
How can I remove it?
-Q_Dude
LikeLike
Just one question…
What is the purpose of the Static ID createDeptBtn on create Button of page number 11(Department Detail)
LikeLike
The createDeptBtn ID is used in the “Form Validation” dynamic action.
LikeLike
I would like to use all the Apex Default CSS for Interactive report and Classic reports. Just want to add the NavBar.
I was able to incorporate the Navbar successfully but the Interactive and Classic report CSS also got changed with it. Which i wish to remove.
How can I remove it?
LikeLike
Q_Dude,
Q1. You can change the background color of the navbar by applying the following CSS rule:
.navbar-inverse .navbar-inner { background-image: linear-gradient(to bottom,#00F,#00F) !important; }Q2. You probably copied the CSS file from the Bootstrap demo theme. That file includes CSS rules that overwrite the default IR and classic report styles. The name of the file is tbd.app.css and can be found under Shared Components > Cascading Style Sheets. Remove all CSS rules that you don’t need. I’m not responsible for how the theme looks like after modifying the CSS file ;-)
By the way, aren’t you interested in Dan McGhan’s navbar plugin? It’s also based on Twitter Bootstrap and is much easier to use. More info: http://www.enkitec.com/products/plugins/navbar
Cheers,
Nick
LikeLike
Thanks alot for Replying Nick !
1 . Thanks. I will do the modification according to what you have mentioned.
One small question, Where would I make CSS changes for the Responcived nav bar (for pad/phone view).
2. I had used the Enkitec NavBar plugin but it has a rendering issue. Means at every page load, First the HTML like list shows and then in a second or two, it changes to the bootstraped plugin. So everytime the page loads or if there is any redirection, it shows that rendering which I cannot use.
Thanks,
Q_Dude
LikeLike
I’d make the CSS changes in the tbd.app.css file. Use media queries to apply specific CSS rules to different screen sizes.
LikeLike
Thanks a ton !
QD
LikeLike
Hi Nick, I used your bootstrap theme as a base for my theme. The thing is that I am facing the following issue: On a tabular form page widget.tabular javascript throws an error making form not to work at all. I believe that there is a bug in your theme, but I cannot find the error, can you?
LikeLike
Hi again, I found that the fix to the problem is the same as you replied at Patrick Miller on 19 Feb 2014
LikeLike
Hi Nick, any plan to update the template with other bootstrap component like tab, hide and show region ?
LikeLike
Hi Tobin,
I’m afraid I have no plans to update the themes. I actually made these themes available just for demo purposes. The Smart4APEX guys recently introduced a complete Bootstrap theme. You might want to take a look there: http://www.apex-plugin.com/oracle-apex-plugins/themes/css-layout/bootstrap3-theme_396.html
Best regards,
Nick
LikeLike
Nick Buytaert….please how can publish apex page on internet..like your project?
LikeLike
Sorry to jump in here, but to publish them to allow internet access would involve hosting them with a public available APEX hosting company.. There are a few companies out there that offer hosting, but I would recommend revion.com, since they handle my hosting and are a good company to do with business with..
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA
LikeLiked by 1 person
Hey Hussin,
Oracle hosts its own APEX instance at apex.oracle.com.
“Oracle provides the apex.oracle.com service for demonstration purposes only. Storing of production or sensitive data is prohibited. For production applications you can install Application Express on-premise or sign up for the Oracle Database Cloud Service.”
Just register a workspace (https://apex.oracle.com/pls/apex/f?p=4700) and start creating your application. That application is then automatically published online. The best thing is it’s free ;-)
Nick
LikeLike
I am grateful for the help…Nick Buytaert
LikeLike
Hi Nick,
I trying to intergrate oraclre apex 4.2.5 with bootstrap but when I added the external libraries it doesn’t work well, do you know what could be the issue and how to add the bootstrap libraries mine is like this…
what could be the issue here?
regards,
scott
LikeLike
Hey Scott, it’s hard for me to say what the actual problem is. Have you downloaded and studied the custom themes in this blog post? These themes include external libraries in the Files section in Shared Components. These files are then referenced in page templates using the #APP_IMAGES# or #WORKSPACE_IMAGES# substitution string. Also, check your browser console for any errors or warnings. Any messages there might point you in the right direction.
Good luck,
Nick
LikeLike
Hi Nick,
can you do something about download to your sample applications themes especially bootstrap one? the downloads aren’t working…regards,
LikeLike
Hi Scott, it seems that the download links are still working. Just click on one of the download links:
https://www.dropbox.com/s/gklh50a11j5q6lx/f12689_bootstrap.sql
https://www.dropbox.com/s/90hdn1zbxs3fb10/f10251_foundation.sql
LikeLike
Nick, thank you that works…
LikeLike
Nick,
I am using your bootstrap option but there is some jquer conflick like if you set item label to “Required label with Help” or label with help then the Help popup window is missing the “Close X” as normally shown in jquery popup. i had the same issue when using apex custom template with reference to twitter-bootstrap libraries….regards Scott
LikeLike
As a quick fix, add the following CSS to your pages:
.ui-dialog-titlebar-close { font-size: 10px !important; line-height: 12px !important; } .ui-dialog-titlebar-close::after { content: "x"; }LikeLike
Good afternoon,
I downloaded the bootstrap.sql file (thank you very much) silly question but do I import it via apex itself and if so what option do I choose, theme, websheet, database application etc?
Thanks in advance
LikeLike
Hello,
Import the SQL file with APEX:
1. Go to your APEX application builder.
2. Don’t click the “Create” button, but instead hit the “Import” icon.
3. Follow the “Import” wizard. Use the downloaded SQL file as import file and choose “Database Application, Page or Component Export” as file type.
Nick
LikeLike
For regions, the grid layout is not having the start new grid option..? could you tell me why is this not coming. ?
LikeLike
What APEX version and theme are you using? Can’t you just set “Start New Row” to “Yes” ? It seems that the “Start New Grid” attribute has been removed in APEX 5.0.
LikeLike
The problem is, I created a sample theme by looking at your example. then i created a region with column span 6 so the region div class is “col-md-6”.(used bootstrap 3).
after that i added two sub regions and i want them to be displayed at same row but two columns. Below are the settings i added,
sub region 1: new row=yes;column=Auto;col span=6
sub region 2 new row=no;new column=yes;col span=6
But the out come was sub regions are automatically adjusted with col span 3.
Why is this happening for me?
LikeLike
The outcome you describe is perfectly normal. The sub regions can’t grow larger than the six columns of the parent region. I did the test myself and this was my result: https://apex.oracle.com/pls/apex/f?p=54599:2
LikeLike
Why do copyright holders want to restrict distribution of their content to a particular country?
LikeLike
Hello, i want to use a nice bootstrap theme in new blank application…could i?
LikeLike
You can export the theme from the demo application and import it wherever you want.
You might also be interested in the following Bootstrap APEX themes:
http://bootstrap-apex.com/apex/f?p=141
https://apex.oracle.com/pls/apex/f?p=73792
LikeLike