I am new to Liferay and I have the following problem. I need to create portal theme - this is ok, no problem. This will style my portal and default portlets. But in some of my own portlets I use ZKOSS pages, which reqires completely different styling. My question is, how to do it that Liferay theme classes will not influence my ZKOSS pages? There are some general styles in Liferay theme like for input etc but I dont want those rules to be applied inside my ZKOSS portlets. Hope I explained myself clearly. Any suggestions?
You can set the <css-class-wrapper>My_Portlet</css-class-wrapper> in liferay-portlet.xml
for details see: http://www.liferay.com/community/wiki/-/wiki/Main/Liferay+UI+Guidelines
I don't know ZKOSS portlets, but the generic way to introduce portlet specific theme css is through the DOM: Inspect your page, see how your ZKOSS portlets are generated: Liferay generates a wrapper around each portlet that contains the portlet-name, you can use that for styling.
As I don't have ZKOSS available, here's an example to have some specifically ugly styling applied to every Navigation portlet:
.portlet-navigation .portlet {
background: purple;
}
Use Firebug or similar tools to find out the relevant DOM structure and just add the required styling for these elements to your theme
You can also use Liferay color schemes to define separate UI for same portlet.
Liferay 7/DXP:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/specifying-color-schemes
Liferay 6.2:
https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/specifying-color-schemes
Related
is there some tutorial explaining how to customize "Login" component?
For instance using a custom background or align the form in different way?
Thanks
There are two parts to the answer for your question.
THEMES (aka customizing your login svg image)
You can customize the SCSS variable for login background: $clr-login-background. Take a look at how I added the dark theme svg here. This means that you will have to build the Clarity styles as part of your apps build process even though you are only customizing one of the themeable variables for Clarity SCSS. There is more information on custom themes here, in the docs. This info on building a custom theme is near the bottom of the page.
LOGIN FORM
For the specifics of the form you use in your app, you can add the pieces that make sense for your specs. There are styles for: .title, .subtitle, .username, .password, .error etc ...
If you look at the example in the Login Page docs you can see how the form uses those elements and modify them for your use case.
By default we can apply styling to vaadin spring boot applications by annotating UI class with#Theme(themename). In my particular situation i annotated with #Theme(ValoTheme.THEME_NAME) ,but it's not over. Unfortunately, i didn't figured out how to set background for layout without dealing with css and extra files(And it seems the only solution unavoidable).
How to use both themes valotheme and custom (just for setting up background image) at the same time?
Many thanks for suggestions
You can extend a Vaadin theme in your own custom theme. If you extend the Valo theme in your theme, then you get Valo theme plus your own customization and additions:
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
// your own scss here
}
After enumorous attempts to get it done, i was forced to switch over css styling files. With that being said - i had to combine ValoTheme and my own "style".
For Spring Boot Devs: Initially Spring Boot won't generate any presets for custom styles (vaadin plugin for Eclipse and Netbeans does it), so you have to create folders manually:
src/main/webapp/VAADIN/themes/<yourthemename>/ and place necessary css files there.
Quicktip:
Time-less consuming way:
Make new vaadin project from here: Link
Locate theme folder and copy-paste to your project
Also do not forget to annotate UI with #Theme("myTheme")
Hope this helps someone
I created a widget, lets call it Vaadin addon, and included a css-file using the stylesheet annnotation: #StyleSheet({ "custom.css" })
Now I'm wondering how to handle the usage within different themes. My first idea was, to write the css like this:
.valo .mybutton { background: red;}
.reindeer .mybutton {background: yellow;}
The problem is, if my application theme extends the reindeer theme, the html will not contain any reindeer class name, same with valo. I didn't found documentation on this topic.. (what I read is this post)
Is this the right approach though? You have to define look of your component for each theme available on your own and decide what is the best visual representation of your component in that given theme. If that theme changes, you have to change your add-on too. If there is new theme, you will have to update your component too.
More suitable approach might be just to use standard vaadin css classes, thus letting theme decide how your component will look. You just define structure of your component and logical parts from which it consists using standard vaadin classes. This way, your component will fit perfectly no matter what theme is used, also it is prepared for any number of new custom themes to be published. I do not say you should not include styles to your add-on, i just say you should consider not tying your add-on to any concerte themes.
Does anyone know how I can change a css files like roadmap.css for trac? I figured out where the file is but when I modify it, the modification is overwrote on page load/refresh.
Example of where my roadmap css is – x:\xx\xx\BitNami Trac Stack projects\.egg-cache\Trac-0.12.1-py2.5.egg-tmp\trac\htdocs\css\roadmap.css
I would like to add some different classes for the milestone graph like
table.progress td.promote { background: #dcefdc}
Instead of modifying the existing stylesheets, add your custom styles to a new stylesheet and link it into your pages. Your custom styles should override the built-in styles. See TracInterfaceCustomization for more info and CookBook/SiteStyleCss for examples.
Can anyone tell me themes are better or CSS style sheets are better in asp.net for design?
Please explain the concept also with an example.
A theme can specify both .skin files and .css files. So there no reason not to use themes.
As for skins versus css: Go for css if its css'able.
You should combine them. Use your css files in the theme folder for your normal styling of all the html elements in your website (include all the generated elements).
In the skin file of a control, you can set the default css class. Other properties like the layout and default behaviour of the elements (sample: calender control) are editable here too.
Skin files are good for all layout specific configuration you can't easily do with css, but with the .net properties of the controls.
Basically themes is built for server controls. You can not use themes with html controls.
The css is used for server controls,html controls and tags. If you are using only server controls then you can use "theme" because you can enable or disable theme on control basis, page basis and whole website basis.
In my opinion CSS is best way to design website. because after rendering theme it shows the css style with controls and tags.
You can also use "Theme" and "CSS" together.
Same query is avilable at my post at following link.
ASP.NET 2.0, AppTheme: How can we utilize AppTheme in best way for my ASP.NET WEBSITE
It make you happy