If I create multiple portlets with liferay, how can I have 1 theme control the look of all of them?
Thanks
The Liferay's templating system consists of Velocity/Freemarker templates that renders particular html segments of portlets on a page. It is essentially one theme that styles everything.
If you choose to use JSPs on server side and Alloy UI framework on client side, even your portlet would have the same look and feel as the rest of the portal because Liferay JSP taglibs and Alloy UI both use the same CSS classes that the classic/default Liferay theme is expecting and made for.
Related
I have a problem when developing a new Liferay 7.2 theme based on gradle as a build tool, the problem is when I added a custom css in the file _custom.scss in order to customize some styles within my theme, the default liferay admin Control panel and Menu( in the left hand side and in the top ) are looking very bad and my theme looks not Responsive(I mean the style and there are buttons which are not displayed anymore example the toast-animation-btn is not visible ).
From my perspective, maybe my custom css ( because I have a large css file it is kind of Migration from 6.2 --> 7.2) is impacting the default liferay portal things --> this is just my opinion and maybe I could be wrong...
Otherwise, if my reasoning is true please How could prevent my styles to impact liferay default menu?
A whole lot of things have changed between 6.2 and 7.x html markup. I would strongly advise testing each small css feature independently and rewrite the one that is not compatible anymore. By feature I mean all css code related to a specific portlet or section of your template.
Also the theme template themselves have changed a lot and are not strictly compatible. In this case I'd suggest starting with a new theme templates and bring back one by one the customization, you made in it. Also look at the new content page feature: https://portal.liferay.dev/docs/7-2/user/-/knowledge_base/u/creating-content-pages You might be able to replace many theme customization with them in a more maintainable and web admin-friendly way.
That being said if you just want to isolate you sass code from impacting the admin menu, in the default template there is no quick way to identify the content section of the page (well, there is #wrapper and #content, but they are too generic and present in the admin page as well) I'd suggest that you add an id at the right level of your own template. After that just embed all your sass code inside that id.
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'm new to liferay.
I imported a big lar into my liferay instance but, for the moment, have none of the required portlets : there are a lot of portlets in the project I'm joining.
Currently, I have the site structure, but the pages display the message that the portlet is not here (logical).
For comprehension purposes, I wanted to build my portlets one after the other, on the need, to see them appear by the grace of liferay ;-)
But for that I wanted to know which portlet is missing.
This thread : How can i find - which portlets are deployed on which pages in Liferay 6.1? explain how to achieve this through the DB.
Is there really no built-in solution to do it through the liferay interface? Have we really to hack in the DB to get the info or install plugin?
Thanks!
In your browser console, Liferay.Portlet.list contains all portlets in the page.
This value is generated by themeDisplay.getLayoutTypePortlet().getAllPortlets() on the server.
As an alternative you can also look at the HTML code of the page and look for elements with the class portlet-boundary. For example this belongs to an instance of the Journal Content Portlet (Portlet name 56):
<div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content full-screen" id="p_p_id_56_INSTANCE_WdRdMGe86kDa_">
I have a css web design and I want to converted in Liferay theme. Is this possible?
I am using Liferay 6.1 Ga2 with Tomcat 7 and Liferay SDK for java.
Any advice will be appreciated!
Thanks in advance
If you have css designs then you can use it in your theme. But make sure that if you are using any liferay OOB portlets then you have to customize those OOB portlets CSS as well.
afaik,Direct conversion of css designs into liferay css structure is not possible.
From someone who has a background as a Web Designer who learned Liferay. You need to extend the basic theme and start customizing it. You do this by creating a theme through the liferay SDK. Then it copies all the files into /docroot/diffs/*
In there you will see a css folder, in there you will see a custom.css file, That is the file you want to add your css properties to. It has highest/last priority to set elements and attributes.
If you want to customize the template engine, you need to look at the velocity templates under /docroot/diffs/templates. If you're new to it, make a copy of the file you're playing with so you don't have to blow it all away and start over if you mess up. But basically Velocity is very easy to learn. If you want to embed images directly in velocity from liferay via your theme via the /docroot/diffs/images/custom/ folder, here is a piece of code that will work.
<img src="$themeDisplay.getPathThemeImages()/custom/image_name.png" id="logo" />
I recommend though to keep the portal_normal.vm as similar to the default portal_normal.vm because then upgrading will be easier down the road.
Is it possible to create a few portlets inside a portlet? I mean a multilevel portlet.
Yes. You can use the Nested Portlet to this purpose. This is a layout container for other portlets. You can choose the wanted layout in the configuration.
Yes, definately, you can have portlet within portlet.
Liferay provides taglib, thru which you can easily embed different util portlets (web content display, breadcrumb, navigation etc) within portlet
NESTED-PORTLET
Assuming that you are talking about a framework, a platform or something similar, yes, it's possible. Look if your framework have a kind of Nested-portlet. I'm using the liferay platform, and they offer an implementation of Nested Portlet.
No you can't have portlet within portlet, its similar to having servlet within servlet...