Liferay: Global CSS Styling on Selected Portlet - liferay

I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.

The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}

Related

Remove <div> tag from DOM

I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.

Image inside h:outputtext Primefaces [duplicate]

I often, change the images of my buttons using the image attribute, but someone told me that it is a good practice to do it using .css
I tried but i cant, what i am doing wrong? This is what i did:
1-The resources of my project are stored like this:
2-This is how i created the style.css for accessing the image
.c2 {
background: url(/resources/images/smiley.jpg);
}
3-This is how i access the css from the body of my page(Im sure this is correct because other classes in the same document works in other tags in this page)
<h:outputStylesheet library="css" name="style.css" />
4-This is how create a sample commandButton that uses the appropiated css class
<h:commandButton styleClass="c2"/>
I think the problem is in the .css, i tried a few combinations but none worked:
background-image: url(/resources/images/smiley.jpg);
background: url(resources/images/smiley.jpg);
background: url(smiley.jpg);
background: url(../smiley.jpg);
Where is the mistake?
update
I managed to make it work by the following code:
.c2 {
background: url("#{resource['images:smiley.jpg']}");
}
Notice the difference when i use css(right) and when i use image attribute(left)
How could i solve this so the hold image is shown?
When importing CSS stylesheets by <h:outputStylesheet>, the stylesheet is imported and processed by the FacesServlet through /javax.faces.resource/*. Look at the generated <link> element pointing to the stylesheet in question and you'll understand.
You have to change all url() dependencies to use #{resource['library:location']} instead. JSF will then auto-substitute it with the right path. Given your folder structure, you need to replace
.c2 {
background: url("/resources/images/smiley.jpg");
}
by
.c2 {
background: url("#{resource['images/smiley.jpg']}");
}
Assuming that your webapp context name is playground and that your FacesServlet is mapped on *.xhtml, then the above should end up in the returned CSS file as follows
.c2 {
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}
Noted should be that the JSF implementation will for determine only during the first request on the CSS file if it contains EL expressions. If it doesn't then it will for efficiency not anymore attempt to EL-evaluate the CSS file content. So if you add an EL expression to a CSS file for the first time, then you'd need to restart the whole application in order to get JSF to re-check the CSS file.
In case you wanted to reference a resource from a component library such as PrimeFaces, then prefix the library name, separated with :. E.g. when you're using PrimeFaces "Start" theme which is identified by primefaces-start
.c2 {
background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");
}
This will be generated as
.c2 {
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}
See also:
How to reference CSS / JS / image resource in Facelets template?
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
Unrelated to the concrete problem, the way how you use the library is not entirely right. It's meant to be the common identifier/subfolder of all related CSS/JS/image resources. The key idea is to be able to change the entire look'n'feel by just changing the library (which can be done by EL). You seem however to be relying on the default library. In that case, you could just omit the library from your <h:outputStylesheet> and #{resource}.
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
Since I struggled with this a little bit and while BalusC has already answered the question but might be able to comment as to why this is happening. I have 5 EAR projects consisting of a bundled WAR and EJB projects. I then have one standalone WAR project deployed on its own. The following code worked perfect with all the EAR's:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
Where the "img" folder was within the WEB-INF folder but for the EAR project, it would not work and it wouldnt even load the picture in the browser by manually typing in the URL. I verified the resulting html was 100% accurate. So all the talk of "resources" got me thinking that maybe it was a ?security? issue of some sort which doesnt seem to make sense between the WAR and EAR deployments so I created a "resources" folderin the root of the web application, e.g. in Eclipse its parent would be WebContent, then added a subfolder to resources called "img", placed my image in there.
The code now looks like this:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Super FIPS Calculator PRO</title>
<style>
.Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
</style>
</h:head>
<h:body styleClass="Bimage">
.
.
.
And now the image is displayed. Again not trying to hijack balusc's thorough answer, I just wanted to bring it up in case anyone ran into a similar issue. If someone wants me to open a separate Q and A I will!
Ahh yes, this was on JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.
Edit #Basil-Bourque answer What is WEB-INF used for in a Java EE web application seems fairly relevant
But its still a little confusing in that how can a WAR within an EAR access that location but not a standalone WAR?

icefaces 3 combine ice and ace component on the same page , problems with the style

I am using ace:daaTable and other ice component on the same xhtml page .
when I click oמ ice:commandButton the page style is changing.
I tried to define "rime" style on the web.xml but it doesn't help.
when I defined "none" style
param-name :org.icefaces.ace.theme
param-value:none
the clicking on the ice:commandButton save the page style, but I am failing to change the table style to "styleClass="oddRow, evenRow" (that was the style I used on ice:dataTable in my previos IceFaces 1.8 project with"xp" style. )
can someone please explain how to define this styleClass on the table,without changing the page style on each click.
and give me an example that show how to use styleClass on the ace:component
thanks
Tami
To include rime.css you can include below line in you head section.
<link rel="stylesheet" type="text/css"
href="./xmlhttp/css/rime/rime.css" />
If you want to specify your own styleclass you can use like this.
<ace:dataTable style="width:200px; height:200px; cellspacing: 1px;
cellpadding:1px;" ></ace:dataTable>
If you want to use styleclass attribute then you specify external css and include the name.

Add special characters and background colour

I am working on validation of a user registration form. What JSF tags can I use to add special characters and background color to that registration form?
Try this it forms unique tags for you in input field:
http://xoxco.com/clickable/jquery-tags-input
http://plugins.jquery.com/plugin-tags/tags
I'm not sure what you mean with "special characters", but I assume that you mean "special fonts" or something. In general, to style a webpage you should use CSS. You can set the font type by font-family property and you can set the background color by background-color property.
First create a style.css file with the following content:
.yourFormClass {
font-family: arial;
background-color: pink;
}
Then put it in public web content (there where your JSF pages also are) and then declare it in the <head> (or <h:head> if you're using JSF 2.x):
<link rel="stylesheet" href="style.css" />
Then you can use the styleClass attribute of any containing JSF component to let JSF generate it as class attribute in the final HTML element.
<h:form styleClass="yourFormClass">
(open page in browser, rightclick and "View Source" to see it)
To learn more about CSS (which is a completely separate subject from JSF), check the CSS tutorial. Keep in mind that JSF is basically just a HTML code generator.

Wrapping title is not working

We have a need to include long title for Sharepoint's (2007) built in webpart. title runs across and users are having to scroll left to right. Is there a way to introduce wrapping to the web part title? I tried few html tag but they are not working.
You should add this little snippet of css that will override the way the space are rendered in the title (and will thus allow proper wrapping) in either your master page, a separate style sheet or one linked with the master page that you are using (do not edit core.css although)
.ms-WPTitle nobr { white-space: normal !important; }
The easiest way is to include it inline within your master page, you'll have versioning for your master page if you want to roll back this change and it won't require to create another style sheet and attach it in the master page or load it as an alternate stylesheet.
In the relevant master page, at the end of the head tag, add this style overriding
<head>
<!-- ootb head content kept above -->
<style type="text/css">
.ms-WPTitle nobr { white-space: normal !important; }
</style>
</head>

Resources