I created a liferay 7.3 theme based on the theme-generator (yo liferay-theme) and want to support color schemes.
In the past, I set the boostrap/clay variables in _clay_variables.scss such as:
$primaray: #ff0000;
$secondary: #00ff00;
$theme-colors: (
primary: $primary,
secondary: $secondary
)
and my bootstrap theme will have the appropriated color theme.
Is possible to somehow overwrite $primaray or $seconday variables based on the liferay look-and-feel color-sheme? How can this be archived?
Related
How do I apply part styling to a nested Vaadin component? Vaadin components expose "parts" for styling in their published APIs.
Specifically, the vaadin-upload component hosts another component, vaadin-upload-file. I can style the main vaadin-upload component alright, but how do I reach the parts of the nested vaadin-upload-file component?
E.g. for the "name" part of vaadin-upload-file I unsuccessfully tried CSS selectors like
[part="name"] { ... // plain, as if it were passed through
vaadin-upload-file[part="name"] { ... // qualified with the component name
[part="file-list"][part="name"] { ... // qualified by the part of vaadin-upload that hosts the file list
:host([part="file-list"]) [part="name"] { ... // same with :host() selector
This is all in the style of the component that deploys vaadin-upload.
As the answer made its way to me on a different path, here is the solution for SO:
You can only apply styles to Vaadin components and their sub-components using a custom theme.
Here is a slightly extended way to set this up using a parent theme.
Create a local custom theme in your app
path is frontend/themes/<my-theme-name>/
must contain a sub-directory components (to style Vaadin components)
must contain a styles.css (even empty)
must contain a theme.json with contents
{
"parent": "<my-parent-theme>"
}
but there are other keys for theme.json like importCss, documentCss or assets
the parent theme can be a pom dependency
Use the custom theme in your Application.java:
#Theme(value = "<my-theme-name>")
public class Application extends SpringBootServletInitializer ...
Then you can add style files locally to style Vaadin components, e.g.
add frontend/themes/<my-theme-name>/components/vaadin-upload.css:
[part=file-list]::before {
content: "These are the current files:";
}
frontend/themes/<my-theme-name>/components/vaadin-upload-file.css:
[part=name] {
background-color: yellow;
}
This applies to Vaadin21 (e.g. in Vaadin19 using a parent theme is not working this way).
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 {
...
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;
}
By default, nodes added to the Place Bar on the Application Layout Control are displayed on the right hand side of the Place Bar. Is it possible to instead display the nodes on the left hand side of the Place Bar?
Do not change the default cssfiles on the server. Create a new theme extending your oneuiv2 default theme and styles. Then add a custom.css for your application where you overwrite what you want to change in the default css:
Theme:
<theme extends="oneuiv2.1">
<resource>
<content-type>text/css</content-type>
<href>custom.css</href>
</resource>
</theme>
custom.css:
.lotusPlaceBar .lotusBtnContainer {
float: left;
}
This will give you a better overview and lets you customize oneuiv2 for your needs
You can modify the CSS classes used by Application Layout control to move the place bar buttons left.
.lotusPlaceBar .lotusBtnContainer {
float: left;
}
Take help of Google Developer Tools to inspect Application Layout control and find out more of its CSS classes.
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]