I'm still familiarizing myself with Liferay. I currently have liferay 6.1, running on Glassfish on a linux server. Right now, I'm trying to edit and view the edits of multiple themes that I have downloaded and included in my themes location of a deployed Liferay instance.
My question is, what is the directory convention and best practices for theme customization. I've added the themes through the Liferay GUI itself but for more custom editing I'm directly editing CSS files in the themes/ directory.
I'm having trouble finding information regarding the build and directory information. How does liferay know which theme is active at a given time? Is this reflected in the directory? Is there an 'Current Theme' folder? Is there an easy way to easily swap out themes that I'm editing? Should I be using the __diff directory or is this only used when editing from the GUI?
You shouldn't edit a deployed theme in the appserver's directory. If you edit/develop a theme, you're typically editing files in the _diffs folder. Each theme is built as "the difference" to a base theme, typically one of Liferay's _styled or _unstyled themes. Everything that is different from them (typically you start with css/custom.css goes into the _diffs folder. Upon build (and prior to deployment) everything gets merged and subsequently used by Liferay.
There's no "current" theme, as Liferay can have a theme per page, or per site (e.g. Liferay can maintain many sites - and pages - each with their own theme). You choose the active theme per site or page in the page administration (Manage/Page, select Look&Feel).
Please read more in the Developer's Guide and Wiki.
Also, the 6.1 branch (if you're speaking of CE) is discontinued, you might want to upgrade to 6.2 unless you're using Enterprise Edition, which is still supported for a few years.
Related
I'm very new to Liferay theme development and i'm trying to find the most optimal workflow for development.
So I've been experimenting with creating Web Content Templates and Web Content Structures within Liferay CMS configuration.
What I would ideally like to do is create my view "Web Content Structure" outside of Liferay configuration and instead have it as a view/template inside my theme files so that I can have my code peer reviewed and version controlled in Bitbucket.
Is this possible?
Alternatively is there a way to output the values of a given web content instance within my theme?
I'm building a theme for Liferay 7 by the way.
Thanks in advance
Richard
You can copy and paste the structure when you create them form the LFR editors into your source code repository.
Also if you know how to define the JSON you can do it straight in the file. The free market templates are even easier to edit in file format. When you're done, you need to go and upload the artefacts to the portal via the editor/file upload option.
You can't stick it into the theme because that approach would not allow you to do updates.
You can search for a community plugin or write your own one that would do structure/template updates during deploy.
I'm new to the Liferay Portal and I have been assigned to develop a Liferay application with the following structure:
logo
search bar
result list
We plan is to sell the application to different customers so the resources like images (logo and so on) and css need to be customizable. According to this tutorial resources like images and style sheets are part of the portal apps which are deployed to Liferay. So in my case for 2 different customers I would need 2 different app versions. Instead I'd like to have one version of the portlet which would load all the resources from a database (maybe via a rest call to an appropriate configuration service). That would give us an opportunity of a better provisioning.
Furthermore I'd like to be able to share css resources between different portlets.
Any ideas how I can achieve this 2 goals?
You seem to be talking about themes. You need to create a Liferay Theme. You can Extend an existing Liferay theme or create a brand new. Themes are like portlets meaning you deploy them the same way only they are specific for what you seem to be descibing. Take a look at https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/theme-builder.
Here you have lots of examples https://github.com/liferay/liferay-plugins/tree/master/themes and scripts for generating new themes.
Hope it helps
As Sudakatux said, you're talking about themes. I'd just like to add a couple of things:
If you're talking about styling portlet content (i.e. what should it look like when you display content in a portlet), you want to search for Application Display Templates (see links below).
If you're talking about styling portlet itself, i.e. what it looks like when you place portlets on your LR, you can do that within a theme.
Themes in Liferay 6.2 and 7.x are incompatible. You tagged the question LR-6 and LR7; I'd recommend choosing one (LR7 is vastly easier and faster to develop themes for, in my experience)
If you are creating your own portlet, and you want to style the content of your own portlet, you'll have to do that within JSPs. Edit: You can also use Freemarker with your portlets; however, I personally still prefer JSPs due to the sheer power of what you can do within it.
Useful links:
Liferay 6.2 Lunar Theme tutorial - shows how to create and deploy LR 6.2 theme
Liferay 7 Theme sample - LR7 has a Blade project that shows a lot by example. You can change Maven to Gradle and vice versa. Very useful.
Application Display Template LR7
Application Display Template LR6
This is how your theme directory structure should be laid out in Liferay 7 DXP. Make sure though you create a Liferay Workspace and create a Liferay module ( theme ) in that workspace. If you do not, you will have lots of errors and cause yourself much confusion.
You can put all your css changes in the _custom.scss file and they will overwrite the default css styles.
Blade CLI will generate the core freemarker templates. I recommend a header/footer template as well.
Lastly, this is how you reference the logo in your freemarker template
<a class="${logo_css_class}" href="${site_default_url}" title="<#liferay.language_format arguments="${site_name}" key="go-to-x" />">
<img alt="${logo_description}" class="logo1" src="${site_logo}" />
</a>
I don't know if I'm the only one to have this problem, I'm developing a liferay theme using the plugin sdk and eclipse. I have a theme based on classic, when I turn off eclipse and turn on again I found that all changes on custom.css are gone and reset to default classic theme.
this was my fault I was making changes on docroot/custom.css directly, I should put the on _diff/.
You have to done your custom css in _diff/css/custom.css ok
when you create the theme your _diff folder is empty so you just take all css folder, template folder, js folder and images folder form classic theme and place in _diff folder then modify in _diff/css/custom.css file
Have look into following site for more info about liferay Liferay Savvy
I am using eclipse ide and I have created a liferay project Test-portlet. I haven't written any code for this project
When I ran this project I got the usual welcome screen and I added the Test-portlet to the page and removed other stuff from the page.
I actually want to create a website using liferay. The website already exists which should be rewritten in liferay.
So when I load the project I get this welcome screen and the Test-portlet. At the top of this page I get the the menu-Admin,Sites,.... and LIferay logo on LHS.
I wish to remove all of these and displa only the web page data of the website. I know I can use themes and layouts for such purpose.
If I should use portlet to create this website , how should I keep adding pages and designs?
Also how should I add pages,themes,templates to this portlet?
Before creating this Test-portlet project, I had created pages using control panel.
How should I create this website? Using portlet by creating project?
EDIT:
Also this Test-portlet is displayed as a small portlet on the entire page. WHen click on the gear symbol and click on maximise, it only maximises during that time and when project is run again, it comes back to its original size.
Should I create this websiste using portlets?
Data for website comes from database. Few pages have static data.
Subsequent pages may be added in future.
HOw should the pages be added if I use portlet to create the website?
Please go through liferay themes and liferay layouts
I know this is not specifically a programming question, but programmers will often have to do this work.
How do I create a website with Liferay portal - the docs are pretty light on this fundamental issue and are all for version 4.4. I am using version 5.2 and the docs don't seem to be relevant.
Do you know what the basic steps are. So far I have logged in as the bruno user and can see the 7cogs website and edit it. But I now need to create my own website (for my company) and be able to develop portlets to add to the parts of the page.
Further I notice that the docs talk about doing work in Eclipse. If our website is all static HTML, (the reason we want liferay is mainly so that we can edit content items using its content management tools), then will there be any need for Java dev, or will it all be drag n drop and clicking to get setup. Any guidance will be much appreciated.
Liferay can be used as a simple CMS, without much Java knowledge : creating, editing and positioning of web content fragments are drag'n'drop and use of the included rich text editor.
But to start using Liferay for your company, there are two main steps : a technical configuration (database, etc.), and a look'n'feel customization.
The technical part
First of all, you should get rid of the 7cogs website : this is called a hook in the Liferay wording. To do that, if you are using Tomcat for the application server, just delete the 7cogs directory as stated here.
You can now create the configuration file for your installation : it's a simple text properties file, named portal-ext.properties and placed in the webapps/ROOT/WEB-INF/classes folder of your tomcat installation.
This file handles most of the configuration of the Liferay portal, for example :
the name of your company
if you want to display a terms of use page on first login
if you want anybody to be able to create an account on your portal
the database where the data will be stored
To do this, the properties in the portal-ext.properties override default properties found in a embedded portal.properties file located in the jar file portal-impl.jar, in the webapps/ROOT/WEB-INF/lib directory. Just unzip the jar file in a temporary folder to access the portal.properties file.
A sample portal-ext.properties file :
company.default.web.id=yourcompany.com
terms.of.use.required=false
company.security.strangers=false
jdbc.default.driverClassName=com.mysql.jdbc.Driver
jdbc.default.url=jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=false
jdbc.default.username=root
jdbc.default.password=root
Once done, you can startup your application server. As the default admin (named test, something you can change in the portal-ext.properties file), you can access to the centralized web "control center", located in the "dock" (the strange menu labelled "welcome Test" in the upper right part of any page once logged in).
I would advise you to read the administration guide, useful for most administrative tasks.
The "branding" part
Liferay uses "Themes" to automatically decorate the portal pages (logo, navigation, portlet borders...) using images, CSS, Javascript (JQuery) and the templating language Velocity. The themes are bundled in a .war file, like a standard web application, and deployed on the fly either via the control center or by dropping the file in the deploy directory of the server.
Liferay can use several themes at the same time, one for each community (a group of pages, users and content) for example.
Creating your own theme can be done afterwards, using the "Plugins SDK".
The Wiki, forums and blogs can be very useful.