we have created a simple Webcontent template with Liferay 6.2 EE.
The template was built with freemarker.
Now we want to use our own homemade css file to apply our style to the webcontent template.
But liferay's aui.css seems to override some of our css styles.
What's the best way to integrate our css file within freemarkers webcontent template ?
Is it possible to override aui.css ?
Thanks
Wrap your styles within aui class:
.aui {
//your styles goes here
}
Related
In my web project I use Vaadin 7.3.6.
My custom css file is here:
myproject\src\main\resources\VAADIN\themes\non.print.component.css
In non.print.component.css
#media print {
.noPrint {
display:none;
}
}
In my code I use this:
import com.vaadin.ui.Button;
Button myButton = new Button("My custom button");
myButton.setStyleName("noPrint");
But it's not work.
When I print current page, the myButton also print.
Your css file will not be used by the Vaadin UI until you do not declare it or include it in your custom theme.
The best way is to create your custom theme, then you'll have to :
Add theme annotation to your UI class -> #Theme("mytheme")
Create a folder 'myproject\src\main\resources\VAADIN\themes\mytheme'
Put your css / scss stuff there
Please check basics of theming vaadin7 at : https://vaadin.com/docs/v7/framework/themes/themes-css.html
You do not want to create a theme, two solutions :
Put the CSS file in the src/main/webapp/VAADIN/* directory and use #StyleSheet("vaadin://style.css").
Put the css file in the src/main/resources/com/example/demo/ directory and use #StyleSheet("style.css").
(credits to Alejandro Duarte in offical Vaadin Forum)
Regards
Sebastien
I'm testing the use of a static html template for TYPO3 (in typo3 directory). I copied the fragment <body> ... </body>
It should be like on img_1a:
and it's like img_1b, instead:
Sure, the original template "introduction" can not load my own style.css
I followed the instructions as here, img_2:
How to include a custom CSS file in TYPO3
There is CSS yet included from the Introduction Package. You should either remove this CSS or overwrite the CSS.
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
I'm using Liferay Portal Community Edition 6.2 CE GA2 (Newton / Build 6201 / March 20, 2014). It uses AlloyUI.
Every page in my project is created by using JSF and Primefaces. Unfortunately AUI css has ie. that rule:
.aui input {
width: 209px;
}
... and my colorpicker created by PF looks like this
Best solution for me is reseting aui css for portlet, how to do it? Sorry for my english.
liferay-portlet.xml
[...]
<portlet>
<portlet-name>DSeedvar</portlet-name>
<icon>/icon.png</icon>
<requires-namespaced-parameters>false</requires-namespaced-parameters>
<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
<css-class-wrapper>seedvar-portlet</css-class-wrapper>
</portlet>
[...]
You may create your own css which will overlap liferay default css and set it for your portlet in liferay-portlet.xml
<portlet>
<portlet-name>MyPortlet</portlet-name>
...
<header-portlet-css>/css/main.css</header-portlet-css>
<css-class-wrapper>portlet-login</css-class-wrapper>
<add-default-resource>true</add-default-resource>
...
</portlet>
See also: https://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/anatomy-of-a-portlet
Try to create a new custom.css into your portlet and define it into the liferay-portlet.xml too, custom.css have more preference than main.css and will not take the aui from your theme.
I had the same problem, if that doesn't work, then you must overwrite your custom.css of your theme.
Hope it works
I have a ClientBundle:
public interface Resources extends ClientBundle {
#Source("styles/styles.css")
Layout styles();
#Source("styles/styles2.css")
Styles styles2();
}
In my UiBinder xml I use this class like this:
<ui:with field='resources' type='com.nordea.omega.gwt.client.ui.AppResources' />
...
<div class="{resources.styles.label}">Text</div>
Standard is that styles.css is used, but is it possible at runtime change to use styles2.css instead?
If you use GWT-style annotations, AFAIK it will not be possible to change that dynamically because the annotations/classes are resolved statically, ie, when GWT compiles (last time I used GWT it was around a year or so).
The best way would be to navigate the DOM and change the linked style.css to another stylesheet.
Check the showcase src for an example of how to do this:
http://code.google.com/p/google-web-toolkit/source/browse/branches/crawlability/samples/showcase/src/com/google/gwt/sample/showcase/client/Showcase.java?r=5652#514
If you use CSS resources it's quite easy to access them programmatically: check this http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
The key code being:
#UiField AppResources resources;