I use PrimeFaces 1.1 with JSF 1.2.
I need to change the style of PrimeFaces <p:lightBox> overlay that has a black border to blue, but the style attribute of the component don't change the overlay, but only the link from which the lightbox is been called.
<p:lightBox width="50%" height="25%"
style="border: 5px; border-style: solid; border-color: blue;">
<h:outputLink value="#" title="Leo Messi" >
<h:outputText value="The Messiah"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/images/barca/messi.jpg" />
<h:outputText style="color:#FFFFFF"
value="Messi is an unusual player. He is highly creative, and has the skills to take on defenders with ease. He is a versatile left-footed player who can play either in the middle or on either wing, or even as a centre forward.
Although he is quite short, he is so fast and physically strong that he can cope with larger opponents. He is incredibly powerful, and a specialist in such dead ball situations as corners, free kicks and penalties.
Leo Messi is cool-headed and able to assume several responsibilities in times of need. He is a player who is destined to have a very successful career in football."></h:outputText>
</h:panelGrid>
</f:facet>
</p:lightBox>
If I am not wrong that is the <a> tag generated. I don't know if you can add any attributes to lightbox's <div>.
I don't have your HTML code generated, but you can do this:
Use Google Chrome to inspect lightbox (right click on lightbox and inspect element) to view <div>'s class.
Add a new "onclick" attribute to <a> and using javascript restyle the elements...
But you should modify primefaces's css from the jar file... I don't find the javascript method elegant...
Related
I want to make a style on html5 audio player.
<audio id="player" controls="controls">
<source src="song.ogg" type="audio/ogg" />
<!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
Is it possible to put css style on the html5 generic audio player timeline?
-thanks.
The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure:
var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;
Going to the chrome debugger's elements tab reveals this document fragment:
<div>
<div>
<div>
<input type="button">
<input type="range" precision="float" max="0">
<div style="display: none;">0:00</div>
<div>0:00</div>
<input type="button">
<input type="range" precision="float" max="1" style="display: none;">
<input type="button" style="display: none;">
<input type="button" style="display: none;">
</div>
</div>
</div>
If there was a way to change the style of the time display or the play/pause button without redefining the inner structure(i.e. shadow DOM), it would be through that document fragment. There is neither a function nor an attribute that suggests the ability to access said document fragment.
Youtube does their own HTML5 video timeline in case someone wants to "try something new"(or just hack an easy way to download some of their ad-free WebM videos), so I know it is possible. I'm guessing you would need to do it like this:
<audio id="player" ><!--notice how you get rid of the controls -->
<source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
Your browser does not support HTML5 audio. Please upgrade your browser.
</audio>
If you have the audio player hidden, you can add Event Listeners to update the status/progress. You will definitely want to use at least onTimeUpdate
Meanwhile, you can make your own DOM controller with a square tags with border-radius = (width/2) for a circle, or just use a . I suggest you look into the Shadow DOM for a way to hide functionality from both users and other scripts.
If you want to just show the user how far the music has played and not allow the user to seek, use a tag or a tag. Otherwise, you can use an tag and stylize that. Don't forget to add an onInput handler to skip through the track.
edit
I did not see that image. You must have uploaded it while I was answering. I would suggest you use a filter, but that might not work on anything but images. Try making a div transparent over it and allowing the user to click through it
edit #2
It turns out that background-color kinda tints the player in Chrome(only the audio player) depending on the background color, but the play time color does not change color with either background-color or color. You can get full control and uniformity over your style with a custom player, but that would mean extra work for you. I hope that my answers were helpful.
My objective is simple enough i just want to modify Title="New" to bigger size and color, i did apply with CSS but it doesnt works :(
<style type="text/css">
#g_523a7cea_3249_4ac1_b2bc_48efea016ad1
{
color: Blue;
}
</style>
<WebPartPages:DataFormWebPart runat="server"
Description="" ListDisplayName="" PartOrder="2"
Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True"
AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True"
DataSourceID="" Title="News" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True"
DisplayName="Employee News" PageType="PAGE_DISPLAYFORM" FrameState="Normal"
PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default"
DetailLink="" ShowWithSampleData="False" ListId="645a16cc-7fe6-4247-9800-2170e1479074"
ListName="{645A16CC-7FE6-4247-9800-2170E1479074}" FrameType="Default" PartImageSmall=""
IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False"
AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId=""
InitialAsyncDataFetch="False" CssStyleSheet="" MissingAssembly="Cannot import this Web Part."
HelpMode="Modeless" ListUrl="" ID="g_523a7cea_3249_4ac1_b2bc_48efea016ad1"
ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True"
IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{A7755E5E-BE3F-4415-A163-BAA925625A0E}"
__AllowXSLTEditing="true" WebPart="true" Height="" Width="">
The ID is for the DVWP. There is no style that you can apply to a whole DVWP in one fell swoop. Inside the DVWP there will be lots of other CSS classes for the different elements and they will be applied, overriding anything, even if you could use the web part ID for a CSS format.
A DVWP typically displays in a table. There are different classes and styles for TH, TR, TD and so on. If you want to change the appearance, then you need to tackle these classes for the table elements.
replace script with style. script is for javascript. style is for css
<style type='text/css'> ... </style>
Render the page and see what ID you have in your HTML code, then apply the CSS. I'm almost sure that the ID is different, and that's why it doesn't work (happens almost everywhere, where web controls are being used, especially in ASP).
how can i set the header style of the p:panel component? i want to set the height of the panel_header div.
<p:panel id="panel"
toggleSpeed="500" toggleable="true">
<f:facet name="header" >
<p:outputPanel style="float:left;">
<p:commandButton process="#this" id="new"
oncomplete="dialog.show();" icon="ui-icon-plus" />
<p:spacer width="15px;" />
</p:outputPanel>
<h:outputLabel value="Title" />
</f:facet>
</p:panel>
You normally use CSS for styling. Use the .ui-panel .ui-panel-titlebar selector. You can find the CSS selectors and all its properties in every bit decent webbrowser developer toolset. In Chrome, IE9 and Firebug, rightclick the titlebar and choose Inspect Element or press F12.
Here's an example how it look like in Chrome:
To start, you could set the padding to 0.
.ui-panel .ui-panel-titlebar {
padding: 0;
}
Put this in a .css file which you load by <h:outputStylesheet> inside <h:body>, so that it get loaded after PrimeFaces default CSS.
See also:
How do I override default PrimeFaces CSS with custom styles?
Enclose the p:panel in <h:form prependId="false">.
Then you can use the ID selector (as mentioned in the other reply), as the id will not change.
.ui-panel-titlebar {
//Your style-sheet code
}
Adding a header facet to the panel is a good solution if you just need to change one panel. Inside the facet add any styling you require.
<p:panel>
<f:facet name="header" style="font-size: medium">
</f:facet>
</p:panel>
I avoid messing with the primefaces styling as much as possible if I just want to change individual components.
I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.
e.g. I want every option of coffee in the list below to be displayed in a different color.
<h:selectOneMenu value="#{user.favCoffee1}">
<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>`
Can anyone help me out here?
The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.
<h:selectOneMenu styleClass="mymenu">
with
.mymenu option {
color: red;
}
Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.
I’m not familar with JSF, but I assume the <f:selectItem> is not what gets sent to the browser.
You’ll need to figure out what HTML is sent to the browser for that JSF tag, and apply your CSS to that.
I've not seen a useful, authoritative web resource which says how to reliably enable rollover effects on a4j:commandButton elements in RichFaces JSF content.
I have found plenty of css resources re buttons, but then when they start talking about html I start wondering what the equivalent is in more recent web technologies.
Basically I want my buttons to look different on hover and then on click. I'd like to use images but client side js is out of scope for this q.
m
Use the following attributes as in this example below to your a4j:commandButton (have a look at the full list (v3.3.1.GA)):
<a4j:commandButton value="Submit" styleClass="ctlBtn"
id="myCtlBtn" type="submit" style="margin-bottom: 5px;"
reRender="allMyOtherplaces"
onmouseover="this.className='ctlBtn btnHover'"
onmousedown="this.className='ctlBtn btnDown'"
onmouseup="this.className='ctlBtn'"
onmouseout="this.className='ctlBtn'"
onclick="this.className='ctlBtn btnDown'"
oncomplete="this.className='ctlBtn'" />
And create classes ctlBtn, btnHover and btnDown in your included .css file.