I would like to define all our styles in a the custom Liferay theme we developed. I want to know if it is possible to use css classes defined in the theme in portlets project. We need to avoid duplicate css files in every portlet project. The aim is that the theme controls all look and feel aspects of our portlets and so if we change the theme (or deploy portlets in another portal container) portlet styles change.
You think this is possible ?
Thanks in advance ..
What you want to do is the recommended way to style both the theme and the Portlets.
Portlet styles should only be affect the layout within the Portlet it belongs. All other styles; colors, fonts, etc., should be defined in the theme's custom.css.
I would advise you to try styling the existing Portlet classes before introducing new ones. Then, if you're really stuck, edit portlet.vm.
Take a look at Liferay's Political Theme:
custom.css
...
.portlet {
margin-bottom: 10px;
.portlet-topper {
padding: 0;
.portlet-title {
...
Related
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
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)
I am using Liferay 6.1 CE bundled with tomcat, I deployed the Zenlike Theme (http://sourceforge.net/projects/lportal/files/Liferay%20Plugins/6.1.0%20GA1/zenlike-theme-6.1.0.1-ce-ga1-20120106155615760.war/download) to use it in my portal.
My problems are:
1) I can't add the breadcurmbs navigation like in the classic theme.
2) When I add a child page it doesn't be shown in the navigation menu.
3)also I wanna change the style and css modification to the current page (where the user is navigating) to make it scroling (with a style different to others and which still exist until I click on it)
1) Is caused by the following css in the main.css
#breadcrumbs {
display: none;
}
2) The menu is not a dropdown menu so childpages will not shown.
3) Create a new theme that extends the zen-theme
http://www.liferay.com/documentation/liferay-portal/6.1/development/-/ai/creating-liferay-them-7
[Jump to point 9 if you already made a theme before]
I have images in my theme (in the Content/ directory) and I want to show them in different places.
My current approach is : <img src="#Url.Content("~/Themes/MyTheme/Content/Images/image.gif")" />
This works, but is not very maintainable (what if I want to switch themes, etc).
Is there an built in method, something like GetCurrentThemeDirectory() that would return the directory so I could do or something like that?
Edit: from mdm's comment, I realize that changing the theme isn't a valid concern. I really just want to avoid typing out the url for every reference
Where are you referencing the image from? Module? Another theme?
If it is from the theme that has the image, then you don't need to worry about switching themes. If it is from another theme, then the image should be a part of the theme. If it is from a module, then it would make sense to store the image as part of the module or override it in the theme (see below).
If you wanted to have the image as part of the theme, then you could have the module return a 'default' shape and then override that in the theme. There really shouldn't be any reason to reference the theme's images from a module or vice versa.
Edit after your edit
In the themes I've written, I've followed what the Orchard authors do. Rather than using <img> tags, images are placed in Styles/images. They can then be referenced using the CSS background-image attribute.
In Views/Branding.cshtml:
<div id="header"></div>
<h1 id="branding">#WorkContext.CurrentSite.SiteName</h1>
And then in site.css:
#header {
/* snip */
background-image: url(images/header.png);
/* snip */
}
Themes/TheAdmin/site.css contains plenty more examples of this method.
Excuse me if I'm asking silly or easy question, but I just can't figure it out.
So, I have a theme, I want to render only portlets, skipping any journal articles.
Which is the most appropriate way to do it?
In your theme's resources, there is a portlet.vm template available in the _diffs/template directory. This template allows you to override the default presentation of portlets in general (e.g. change the configuration icons, remove the title bar, ...).
However, inside portlet.vm Liferay injects a predefined variable called $portletDisplay. This is an instance of the com.liferay.portal.theme.PortletDisplay class and represents the portlet that is currently printed.
You can use the $portletDisplay.portletName attribute to check for 56, which is the ID for all Web Content Display portlets. So, in short, encapsulate the parent <div> inside portlet.vm with the following condition:
#if($portletDisplay.portletName == '56')
<div class="portlet" ...>
...
</div>
#end