Forums

Home » Liferay Portal » English » 2. Using Liferay » General

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
diego gutierrez
WebPage in liferay
June 5, 2014 12:36 PM
Answer

diego gutierrez

Rank: New Member

Posts: 2

Join Date: June 5, 2014

Recent Posts

Hi.

I am a beginner in liferay. I have never worked with it. I am wondering if I can create this page: http://www.liminal-it.com/index.php.

Someone could give me a tutorial o explain me how can I do to create that page in liferay?.

Thanks in advance.
Andrew Jardine
RE: WebPage in liferay
June 5, 2014 2:17 PM
Answer

Andrew Jardine

Community Moderator

Rank: Liferay Legend

Posts: 1062

Join Date: December 22, 2010

Recent Posts

Hi Diego,

That shouldn't be to difficult once you get the hang of themes. For starters, after you have installed Liferay of course, log in as the admin user. Across the top of the page you will see something called the dock. It's essentially some quick access to administrative functions. IT may or may not be important but you should know that Liferay allows you to host multiple "instances" on the same installation -- internally (in the API and the database) these are referred to as Companies. You are likely looking at the default instance and default site (which will be named whatever you named it in the wizard -- if you didn't change it it will be called liferay.com)

I am assuming that you are usig 6.2. On the left will be a big blue + sign. Click it and a menu will slide out. Choose the page tab and proceed to add your 6 pages one at a time -- LiMiNAL, Servicios, Productos, Clientes, Contacto, liminal-labs. You should now see the tabs across the page in the default theme. So step one, adding the pages, is done.

Next thing you have to do is download and setup the SDK -- https://www.liferay.com/documentation/liferay-portal/6.1/development/-/ai/installing-the-sdk

Once you hav that done, create a theme project. The theme project contains the physical assets you need, js, css, images and also template files. You can use either velocity templates (.vm) or freemarker templates (.ftl) though I think most of people use the velocity. If you expand the project you will see several folders that are obvious what they hold (templates for vm files, images, for images etc) and a folder marked _diffs. The _diffs folder is the one for you. Anything you want to override or add to the main folders (templates, images, css, etc) needs to be added in a mirror folder under diffs. So if I had this structure BEFORE I build...

docroot
_diffs
templates
test.vm
css
js
images
templates
init.vm
portal_normal.vm
<etc...>

Then after I run the build the deployed plugin will have --

docroot
css
js
images
templates
test.vm
init.vm
portal_normal.vm

<etc...>

Notice hwo the test.vm file is moved. If I had called that file portal_normal.vm then it would have overridden the portal_normal.vm file in docroot/templates. So what you need to do is find the files you want to change and mirror their location (folder structure) in the _diffs folder, copy the file into the new location and make your changes.

For the styling of the menu which looks different you have two options. You could override the navigation.vm or more simply, yo ucould create a custom.css file inside /docroot/_diffs/css and override the styles from the default theme to have new definitions.

Here is a link to the development guide for themes in liferay: https://www.liferay.com/documentation/liferay-portal/6.1/development/-/ai/creating-liferay-them-7. The link is for v6.1 but for what you are doing there is not much difference.

PS> Once you get the hang of it you should have a look at the resource importer tool. It will allow you to create a definition for your top level pages so that you can omit the manual creation. When you deploy the theme, the resource importer will create the pages for you.