How to change dojodatetimetextbox icon in XPages - xpages

I tried to replace Dojo DateTimeBox icon with a new One. The CSS does not work.
I use that CSS code But It does not work :(
.dijitDateTextBox .dijitArrowButton .dijitArrowButtonInner
{
background-image: url('calendar_32x32.png') !important;
}
<xp:inputText id="eDate" value="#{document1.eDate}" dojoType="dijit/form/DateTextBox">
<xp:dateTimeHelper id="dateTimeHelper1">
</xp:dateTimeHelper>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>

If you set the background image on the dijitArrowButton class you might get a better result.
Your CSS code would be:
.dijitDateTextBox .dijitArrowButton .dijitArrowButtonInner
{
background-image: none !important;
}
.dijitDateTextBox .dijitArrowButton {
background-image: url('calendar_32x32.png') !important;
background-repeat: no-repeat;
background-position: center;
}

Related

How to put an image as watermark in TextField using primefaces?

Click on the following link,
TextBox with search Image on Left
i want the text box exactly the sameway with watermark in it.
I tried multiple ways,but nothing worked
Content from my .xhtml file
<h:inputText id="bundelId" styleClass="icon2" value="">
<p:watermark value="Enter Bundel Id" for="bundelId" styleClass="icon2"></p:watermark>
</h:inputText>
My css contains following classes
.icon2 {
background: url(search.gif) no-repeat 4px 4px;
padding:4px 4px 2px 20px;
height:10px;
margin: 0;
}
.icon3 {
float: right;
background: url(search.gif) no-repeat left bottom;
border: 0;
cursor: pointer;
margin: 0;
}
I have tried with both jsf and primefaces tags together with css classes mentioned above.
Can someone help?
if you are using FontAwesome you could try:
<p:watermark value=" Enter Bundel Id" for="bundelId" />
<h:inputText id="bundelId" value="" style="font-family:Arial, FontAwesome">
 being the unicode for icon-search.
https://fortawesome.github.io/Font-Awesome/cheatsheet/

How to resize primefaces galleria dynamically depending on the sorrounding div-container

(How) is it possible to dynamically resize primefaces galleria depending on the size of the sourrounding div-container? The galleria should allways fill the entire surrounding div-container.
Would be jscript/jquery the right approach?
http://www.primefaces.org/showcase-labs/ui/galleria.jsf
Try make the .ui-galleria width attribute to 100%. Make sure that css class is relative.
In order to make both the gallery and the images inside fill the container, add in the css:
.ui-panel-images {
width: 100%;
height: 100%;
}
.ui-galleria-panel {
width: 100%;
height: 100%;
}
Also, add the following to the p-galleria element:
panelWidth="auto"
I'm trying something similar, and I also came to a problem.
I am using the p:galleria element like these:
<h:form id="galleriaForm" style="border: 2px solid blueviolet; min-height: 800px">
<p:panelGrid columns="1" layout="grid" style="border: 2px solid aqua; min-height: 100%">
<p:row style="display: inline-block; min-height: 800px;border: 2px solid green; min-width: 100%">
<p:column style="display: inline-block; min-height: 100%; min-width: 100%;border: 2px solid red">
<p:outputLabel value="Überschrift" style="display: block;"/>
<p:galleria value="#{ImageManager.layoutBauenBilderlsite}"
id="galleriaID"
var="image"
showCaption="false"
transitionInterval="9000"
effectSpeed="1500"
style="display: inline-block; min-width: 100%"
effect="drop"
panelHeight="">
<p:graphicImage url="resources/images/#{image}"
style="height: 1040px; border:1px dotted lightgray; margin-left: 30%"/>
</p:galleria>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
To change the panelHeight attribute the h:body uses onload to call a js function:
function setGalleriaHeight(){
var h = window.innerHeight;
document.getElementById("galleriaForm:galleriaID").setAttribute("panelHeight", String(h));
}
The panelHeight attribute is set correctly, as I can see with my Browser, but the Element does not change.
To make sure that the attribute is correct I added it in my source code and it worked fine.
I also tried to set the the size as style="height: h" but then only the loaded image "p:graphicImage does not resize with.
Maybe there is someone to know why it does not change.

JSF tabbing/focus functionality not working in any version of IE

I have a modal housed by a main login page using ui:include. I was able to confirm that the ui:include portion was not causing the issue I am having.
On the modal, I have three JSF elements; two inputSecrets (myFaces) and one CommandLink (myFaces) for a submit button. Here is the code snippet:
<div style="padding: 0px 20px 5px 140px; width: 300px; text-align: left; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: 600;">
New Password:<br/>
<t:inputSecret forceId="true" id="pwOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}"
tabindex="72" />
<br/><br/>
Confirm Password:<br/>
<t:inputSecret forceId="true" id="pwTwo" title="Confirm Password" size="27" maxlength="20"
value="#{accountSettingsBean.confirmNewPassword}"
tabindex="73"/>
</div>
<div id="submitButton" style="width: 420px; align: left;">
<t:commandLink value="SUBMIT"
style="color:white; text-decoration:none; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); background: #4775AD; background: -moz-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b93d8), color-stop(100%, #4775AD)); background: -webkit-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -o-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -ms-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: linear-gradient(to bottom, #5b93d8 0%, #4775AD 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b93d8', endColorstr='#4775AD', GradientType=0 ); border: 1px solid #848484; padding: 0px 5px;white-space: nowrap;font-size: 14px !important;text-align: center; line-height: 40px;font-weight: bold;-webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 10px; border-radius: 10px 10px 10px 10px; width: 150px; height: 40px; margin-left: -20px; margin-top: 15px; margin-bottom: 10px; display: block;"
action="#{accountSettingsBean.updateExpiredPassword}"
id="lnkUpdateExpiredPw"
binding="#{accountSettingsBean.lnkUpdateExpiredPw}"
tabindex="74" />
In every version of IE available through the dev tools, the tabbing is not working properly. In IE9, the first tab press seems to give focus back to the main page when the modal is seen, and the second tab press gives it to the second inputSecret. In IE8, the tabs work for the "password" and "confirm password" fields, but I can never tab over to the submit button. I cannot tab over to the submit button in any version of IE. Also, hitting "Return" hits the submit button on the main page that houses my modal, instead of having focus on whatever field that IE says it is focusing on.
One thing I have tried is putting in a "onkeydown" event linking to a javascript function to manually give focus to the fields I want. I haven't been able to get this to work yet, but I would like to get to the actual root of the problem as to why its not working in IE.
This is a hack, but I was able to fix this issue in IE by nesting inputtext fields inside the three different elements, like so:
<t:inputSecret forceId="true" id="newPasswordOne" title="New Password" size="27" maxlength="20"
value="#{accountSettingsBean.newPassword}">
<t:inputText tabindex="25" size="1" disabled="true" style="display: none" />
</t:inputSecret>
It didnt break firefox or chrome. I'm not sure why this would work but it does.

Override the google custom search css

In my site have google custom search. I have an issue with the font of the search result. I need Arial,sans-serif .
Here is my google search code.
<div id="cse-search-results"></div>
<script type="text/javascript">
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";
var googleSearchFrameWidth = 600;
var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
Here is my css comes from google.
.gsc-control-cse .gsc-table-result {
font-family: font;
}
.gsc-control-cse, .gsc-control-cse .gsc-table-result {
font-family: Arial,sans-serif;
font-size: 13px;
}
.gsc-control-cse .gsc-table-result this class was override the font-family of below class.
Help me to solve this issue.
thanks lemondrop worked perfectly
I changed
.gs-result .gs-title,
.gs-result .gs-title * {
color: black;
text-decoration: none;
font-family: 'PT Sans Caption', Tahoma, sans-serif;
}
to
.gs-result .gs-title,
.gs-result .gs-title * {
color: black !important;
text-decoration: none !important;
font-family: 'PT Sans Caption', Tahoma, sans-serif !important;
}
I haven't looked into CSS, but I think you are following a very old example. Google now have a customizable search engine creator, in which you can specify which color and font you wanted for each element
See
Also, you can define this in code by using a context XML file, the detail of which is available in the Look and Feel section
If I understand you correctly cant you just use !important for the one you want to override like so:
font-family: Arial,sans-serif !important;

Hide link text from background image

For example:
<div id="slideshow-nav">
... ...
Example
... ...
</div>
In CSS, I have
#slideshow-nav a {
background: url(url-to-image) no-repeat;
color:#fff;
outline:none;
text-decoration:none;
}
My object is to hide the text ("Example") and only display the background. However, I still want the link click-able.
How can I do that?
Thank you.
#slideshow-nav a {
background: url(url-to-image) no-repeat;
color:#fff;
outline:none;
text-decoration:none;
text-indent: -9999em;
}
Will that work?

Resources