You are here

LP5 Bootstrap Responsive Theme (not template)

Submitted by dnase on Thu, 04/24/2014 - 13:47

Hi There,

I have modified the base Luminis 5.1 theme to include Bootstrap CSS and Javascript so that a responsive template (like Dustin Sier's) can be used. It's available here:

https://github.com/dnase/lp5-theme-bootstrap

Feel free to post a reply if you need any help.

Cheers,
Drew

Luminis Version:

Comments

The responsive template that Dustin Sier wrote, where would that go in the code? I was able to take what you put on github and build out the war file. Thanks for help and the modified Luminis theme.

Mike

Hi Mike,

To get Dustin's template to work, you would take the .tpl files that Dustin provided, and put them in this directory:

$CP_ROOT/products/tomcat/tomcat-[admin|portal]/webapps/ROOT/layouttpl/custom/

Then you need to modify liferay-layout-templates.xml in:

$CP_ROOT/products/tomcat/tomcat-[admin|portal]/webapps/ROOT/WEB-INF/

And add the XML that Dustin provided in the copy of liferay-layout-templates.xml on his github. I added mine to the end of the section, inside the tags.

Also note that for whatever reason, the template marked "3 column bootstrap" is only 2 columns.

Don't forget to bounce your servers after making these changes!

Regards,
Drew

Drew,

Thanks for the steps to add Dustin template. I figured out my issues and now the repsonsive theme works. I noticed that there are some changes between 5.1 and 5.1.1 that were messing me up. Now to figure out what I need to change to get the 3 column working for the responsive theme. Thanks again for posting this.

Mike

Did you get the 3 column layout working? If yes, how??

I can only get 2 columns of portlets using that layout.

Any hints will be most appreciated.

Karen

Yes we did get it working. From my reading about using bootstrap for the responsive themes the "col-md-insert_number" must equal 12. Below is the code, hope it helps.

Code in the file Bootstrap_3col.tpl

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

Code in the file Bootstrap_3col.wap.tpl

<div>
<div>
$processor.processColumn("column-1")
</div>
<div>
$processor.processColumn("column-2")
</div>
<div>
$processor.processColumn("column-3")
</div>
</div>

Hi,
After installing the responsive theme and the template, on both my Luminis 5.1 and 5.2.1 installations, Luminis just freezes went I try to select the bootstrap theme.
Has this happened to anyone else? Do you know about any solutions?