You are here

Responsive Luminis 5 Theme using Bootstrap - Step by Step

Submitted by gskinner on Sat, 11/22/2014 - 09:25

Forums:

Hello friends, this is another post of mine that involves some code sharing in preparation for my presentation at PA-BUG on Monday. Much of the credit goes to Dustin Sier and Drew Nase. Drew was an employee of mine, responsible for the portal, and he got a job offer that he just couldn't refuse. So I was left to piecing together our somewhat responsive test instance. I honestly can't remember which bit of knowledge I picked up from who, and which bit I figured out on my own, However I do know I used Dustin's liferay bootstrap templates plus some of Drew's instructions here (https://www.lumdev.net/node/13451).
On to the good stuff... I'm attaching a PDF that I built and still follow when implementing responsiveness to the portal. With 3 web/admin portal servers in test and 3 web/admin portal servers in production, you get pretty good at perfecting and following the doc :-)
Read the PDF to see everything, but the crux of it is...

--Bootstrap 3.2 (Grids)
--Dustin's liferay bootstrap templates
--editing luminis files to include the templates and bootstrap code
--choosing the layout from the GUI
--Tested on Luminis 5.1 and 5.2.1

Additional things to note
--The "Grids" part of bootstrap is perfect for portal columns. This essentially will allow you to have content flow from 3 columns to 2 and all the way to 1. However, I haven't done anything for tabs or the dockbar. Some of this looks like it might fold in nicely. I've also been considering just hiding the dockbar on a mobile view, but if you want some additional responsive fanciness or if you have a ton of tabs, than you still have more work to do. If you come up with something, please document and share!
--Now that you have responsive columns, you soon realize what content you have in channels isn't responsive. If you make the frame of your site responsive, you better make sure your content is as well :-)

UPDATE #1
-If you read the comments thread, Jason pointed out a missing column in the Bootstrap_3col.tpl file. I've attached my modified Bootstrap_3col.tpl file. Please remove the .txt extension when putting it on your server. (Lumdev only allows certain file extensions to be uploaded).

Luminis Version:

Trying it out now. When I do these steps:

Go to http://getbootstrap.com/customize/
Uncheck all boxes except "Grid System" from the "Less Files" section.
Uncheck all boxes from jQuery plugins
leave everything else as the defaults
Click the "Compile and Download" button at the bottom

The download is composed of just css files. No bootstrap.js. If I check at least one box in the jquery section, the compile does produce a bootstrap.js.

Edit: I also noticed that the BootStrap_3col.tpl at https://github.com/MiracleManS/Liferay-Luminis-Bootstrap-Layouts/blob/ma... is a 2 column layout.

I tried to create a new 3 column bootstrap layout by starting with the default 3_columns.tpl, and "bootstrap'ifying" it like this:

<div class="container columns-3" id="main-content" role="main">
<div class="portlet-layout row">
<div class="col-md-4 aui-w33 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>

<div class="col-md-4 aui-w33 portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content")
</div>

<div class="col-md-4 aui-w33 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>

The columns to not collapse when I resize. Any ideas?

Jason,

As soon as you mentioned the bootstrap 3 template file, I remembered that I too had to modify Dustin's. I'm going to ping him to see if he doesn't mind updating his GitHub. In the meantime, I'll attach my 3 column bootstrap file.

Greg

I got this working in Foundation framework, so I'll likely not go back and debug the 3col Bootstrap one. We had a ton of other scripts and css going on, so there was probably a conflict with our custom code somewhere.

Jason, to also comment on your first response. When I was initially testing this I downloaded everything that bootstrap provided and then through it into Luminis. Not a good idea! Bootstrap was ripping through buttons and many other content types. When I went back through and grabbed only the 'grids' portion of the css, I believe I left the full bootstrap.min.js file. I might be able to test this further next week. It might also be as simple as disregarding my instructions to "Uncheck all boxes from jQuery plugins". I know you don't want Bootstrap CSS to override things beyond the columns, but I might have went too far with scaling things back, and the jQuery plugins might be what's missing. Hope that helps -Greg

Just as an fyi for Eclipse+Liferay SDK users, you can create a new plugin project of type 'layout'. When you war your project up and copy it to the liferay-admin/deploy and liferay-portal/deploy directories, it will add your layout as a webapp under the standard tomcat-portal/webapp and tomcat-admin/webapp directories. Inside the webapps are WEB-INF folders with a liferay-layout-template.xml file. Liferay will use your webapp's WEB_INF xml files so you don't have to edit stuff in ROOT/WEB-INF.

I'm glad to hear you folks are moving forward with this. I encourage anyone to take a fork of the Github repo that is out there and keep it active. There's a 50/50 chance I'll miss any pull requests so might not be the best to do that :)

Thanks Dustin, I have a new portal admin starting on Monday, so I might add this to their list, or if another school beats me to it, they are more than welcome :-)

Our school is going to be using Foundation for our responsive. I've got a theme done, the layouts done, and I'm just waiting for our designer to finish the css work. I'll post and maintain our files on Github once we are done.

I was using the Bootstrap work just to see how to translate it to Foundation.

I'll make a step by step post, including liferay IDE/SDK set up, in the next week or two.

I just wanted to say thanks to the future contrib. Between Bootstrap and Foundation that should cover most of the schools that are looking for help.

-Greg

Hello,
I am trying to make a navigation bar to show in Luminis 5. The portlet "My courses" has a navigation bar that only is showing is the horizontal resolution of the browser is greater than 1300. I have tried changing custom.css (inside tomcat-portal/webapps/LP5-ellucian-theme/css/) but it seems that the changes on those css files are not taking any effect. I even restarted the whole platform but nothing happen.
The rule that I want to change shows as: .aui .nav-collapse, .aui custom.css:1722 @(max-width:1300px)
.nav-collapse.collapse { overflow:hidden !important; height:0 !important; }
The buttons appear when I change (using firefox developer tool) overflow from hidden to visible.

Can I produce the same effect by editing some css file? Or is it something much more involved like building some war file or something like that?

Disclaimer: Not a developer...Just a basic idea of the concepts around web developing. But not afraid to dive into the coding, specially if somebody gives me some pointer where to look at.

Thank you very much,
Andres