I created a custom theme for Liferay 7.2 through IDE. When I try to modify "Look and feel" setting of any widget, I'm unable to remove the title or to see the option's dropdown of "Application Decorators".
I followed this tutorial and created the "liferay-look-and-feel.xml". With this file the option's dropdown is now visible, but I still cannot remove any title. Even selecting "Barebone" option and "No" in "Use Custom Title".
I printed the portlet preferences, and the "portletSetupUseCustomTitle" property is set to false
Probably, I have a missing configuration on my Theme's settings but I'm not aware about which one is.
In your custom theme find portlet.ftl file Add this line where title are shown
<#if portlet_display.getPortletDecoratorId() != "barebone">
<div class="autofit-col autofit-col-expand">
<h2 class="portlet-title-text">${portlet_title}</h2>
</div>
</#if>
Related
I need to create a footer in a Liferay-project, that can be modified from the instance. I've been trying various things in my footer-code and instance, but haven't figured out how to do it.
Any content inside the footer can't be touched and in page edit mode, Liferay says "This area is defined by the theme. You can change the theme settings by clicking more in the Page Design Options panel on the sidebar". I didn't get any help from Page Design Options either. Is there a way to do this?
I found the answer after hours of work and searching and want to share it with everyone here. The working solution was found here, in one of the comments.
You need to write some code (I use Freemarker/ftl) and then configure the site pages a bit, but here's how it works:
Put a new setting inside liferay-look-and-feel.xml:
<settings>
<setting key="footer-article-id" value="" configurable="true" type="text"/>
</settings>
This will create a new configurable option in page options, allowing you to input the ID of the web content.
NOTE: <theme> might get underlined red "The content of element type "theme" must match". This still prints everything correctly, but the tags are given in a wrong order. Inside my <theme>, I have <template-extension>, <settings> and <portlet-decorator> in that order, which removes the error.
Assign a variable in init_custom.ftl (cleans up the footer-code):
<#assign footer_article_id = getterUtil.getString(themeDisplay.getThemeSetting("footer-article-id"))/>
And then add this to the footer-code, to create the spot, where the content is visible:
<#liferay_journal["journal-article"]
articleId=footer_article_id
groupId=page_group.groupId
/>
After this, everything should be ready code-wise.
Create a Web Content for your footer. In the creation screen, there's an ID on the panel on the right. Publish your content and grab the ID.
Finally, go to Site Builder --> Pages and click on configuration from the top bar (behind three dots). You should see the input field like in the first picture: That's where you add the ID.
Save the settings and your web content should now be in the footer.
Hope this helps!
I am new to liferay and using liferay-ce-portal-7.0-ga3 i have placed a blog and able to write contents in it. i want to change the blog portlet design by adding thumbnail preview to it . My current view is it has either title,abstract and full content view. How could i customize to get blog view
You can customize Liferay's appearance through Application Display Templates (ADT). Unfortunately there's no sample for the OOTB appearances, but when you go to your site's (or the global site's) Configuration area, you can find/edit/create ADTs there. Depending on the markup and CSS, as well as your typical image size etc., the actual ADT you write would be different, thus impossible to include anything here.
The editor however, has some autocomplete and some predefined entries/fields, that should give you a starting point. E.g. when you just open a blank editor and hit the "Blog Entries" field, you'll end up with
<#-- Application display templates can be used to modify
the look of a specific application. Please use the
left panel to quickly add commonly used variables.
Autocomplete is also available and can be invoked
by typing "${". -->
<#if entries?has_content>
<#list entries as curBlogEntry>
${curBlogEntry.title}
</#list>
</#if>
You'll find what you can do with BlogsEntry in it's javadoc, make sure to follow the BlogsEntryModel superclass link as well to see more.
I'll have to leave the exercise to generate proper markup and styling to you though.
I need to make a footer in Liferay and use theme for it. What's the simpliest way to do it?
I have created new theme, filled _diffs folder with other folders, but it's empty and I couldn't find relevant docs about this. Should I copy all basic files there? What should I change to create footer?
In Liferay, theme's portal_normal.vm serves as the template to
construct HTML structure of the page. There you define your header,
body and footer includes.
When you will look at the portal_normal.vm of classic theme, you will observe following HTML snippet:
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by")
Liferay
</p>
</footer>
This is the footer of the page. This is what you need to implement. However, it's not necessary to use footer tag at all, as you can simply use div or table based structure with bootstrap or customized CSS classes for your footer, it's upto your requirement.
Remember! Classic theme is just like a sample provided by Liferay, so, it's not good idea to directly customize it.
Everybody needs a whole customized view of the site, and for this the best idea is to create a custom theme (that's what you are doing!), that will give you full control over your look-n-feel.
To kick-start, you can initially copy required folders from classic theme to your customized theme's (_diffs folder) and start changing bit by bit.
I added a nested-portlet inside my page. This nested-portlet is a 2-column 50-50 layout. I am able to insert a portlet inside that, but I can't insert one next to another one, although the layout of the nested-portlet has two columns.
Is there anything I am missing?
EDIT: Ok, there is a problem related to the custom theme used. If I set the default theme of Liferay, the problem disappears.
SOLVED: The problem was that the theme I installed forced the portlet divs to be display: block;. I changed that as display:table-cell and the problem disappeared.
Check HTML well-formedness of the page generated by your custom theme. I expect the structure to be broken - for example an unclosed div element may prevent the portlet dropping from working.
I am working on Liferay 6.1 and I want to remove portlet header section completely for one of the portlet( This should not be visible for admin even)
Header section is edit,minimize,maximize,delete and title bar.
I have tried removing border but in vain. Also tried additional style sheet options
PortletId is correct as I am able to change other styles
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-borderless-bar {
display:none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-topper {
display: none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-title {
display: none;
}
Try this code
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-borderless-bar {
display:none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-topper {
display: none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-title {
display: none;
}
As you are using css class you need to give space before using it.
More Info css .class selector
Edit: Sorry, I misread your question - You're explicitly asking about an embedded portlet. Disregard my answer, I'm not deleting it as this question might be found by others that are looking for this solution for non-embedded portlets.
I'm suggesting a slightly different approach than you ask for:
Don't display portlet borders. This will do the job if you also uncheck the "Display Edit Controls" checkbox in the dockbar. However, it will allow you to move the portlets on the page, configure them as you need.
Alternatively, specify in your theme that you don't want to show the borders by default - this way you don't have to change each single portlet's borders, but they're all gone at the same time (provided the current border-display-setting is on default):
in liferay-look-and-feel.xml add this line:
<setting configurable="true"
key="portlet-setup-show-borders-default"
type="checkbox"
value="false" />
When you disable borders, some handle will only appear if a) "Display Edit Controls" is checked AND the user is hovering the mouse over a portlet.
After that, don't grant the full Administrator role to people that you don't want to see the controls at all. Instead create an alternative role with permissions that match your requirements - this typically involves setting portlet preferences for the single portlets, configuring permissions for them as well as changing/modifying pages (try them out, I can't name them from the top of my head)