I want to add a custom style to a selectManyButton in primefaces 5.1. The style I want to change is bound to the .ui-state-active class. When I change this class, I get my custom style for the selectManyButton, but all other elements which refer to this styleclass, changed, too. How can I make that just one certain element change to the defined style?
<p:selectManyButton value="#{projektCriteriaBean.selectedOptions}" >
<f:selectItems value="#{projektCriteriaBean.yearSelection}" />
<p:ajax listener="#{projektCriteriaBean.changeDate}" update=":form:startDate,:form:endDate" />
</p:selectManyButton>
You need to specify an id or styleClass for your button.
<h:form id="my_form">
<p:selectManyButton id="my_unique_selector" styleClass="generic-selector"
value="#{projektCriteriaBean.selectedOptions}">
<!-- ... -->
</p:selectManyButton>
</h:form>
The difference between id and class is a HTML matter, that is explained here.
I've included the h:form because the parent naming containers affect the resulting client id. More on that here.
Now you can stylize your button by class:
.generic-selector .ui-state-active {
background-color: red;
}
Or by id:
#my_form\:my_unique_selector .ui-state-active {
background-color: red;
}
The colon is a JSF naming container default separator char. It needs to be escaped with a backslash, because : has a special meaning in CSS. More on that here.
Related
<InputCheckbox class="input-checkbox100" id="ckb1" style="background: #918f8f;" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
however when the component is rendered, the color that is being displayed is from the class (input-checkbox100). I am trying to override it for this 1 specific element (so not trying to add it to the CSS).
You can use style tag in your blazor component and override your css class
for example :
#page "/"
<style>
.input-checkbox100{
background: #918f8f;
}
</style>
Give a name to your class here i set ForInput:
<InputCheckbox class="input-checkbox100 ForInput" id="ckb1" name="remember-me" #bind-Value="CurrentCustomerSubmission.AcceptedTermsAndConditions" />
then go to wwwroot go to css and then open app.css and add ForInput in your css with your desire background.
.ForInput{
background: #918f8f;
}
How to customize the Semantic UI buttons(background-color, border-radius and all)
<button class="ui button create-new-menu-btn">Create New Menu</button>
. create-new-menu-btn {
border-radius: 0;
background-color: red;
}
The above code is not working
You need to make your custom properties more specific than the ones semantic is using. How specificity works (simply) is that when there are competing property values on the same element, the one that is more "specific" is chosen.
Read this to know more about CSS specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
For your particular problem:
One way to make your custom CSS more specific is to use an id in the body tag of your page and use the following selector:
Method 1
#bodyid .create-new-menu-btn {
//Properties
}
Another way is to simply add an id to the element you want to select
Method 2
#create-new-menu-btn {
}
Method 1 is preferred when you want to apply the properties on multiple elements (hence the use of a class) (Like multiple comment buttons on a page)
Method 2 is preferred when there is a single element to be selected. (Like a login/signup button in the header)
You can also add semantic ui's classes before your own for specificity.
For example : if your className is .create-new-menu-btn you can add in css or scss before ui.button or any other semantic ui specific clas that you neeed. So in the end, your class definition in css would look like this:
ui.button.create-new-menu-btn {
....
}
If using JSX, you can use inline styling for the targeted elements
Example:
<Button style={{backgroundColor: 'red', borderRadius: 0}}> View Created </Button>
#bodyId .ui.create-new-menu-btn {
border-radius: 0;
background-color: red;
}
It will target all button with ui class.
Hope It will be useful :)
Put .ui.button infront of your class name create-new-btn. It should look like below
.ui.button.create-new-btn {
//Your css code
}
Then in your html/jsx template you can use the class name create-new-btn like below:
<Button class="create-new-btn"/>
or for Jsx
<Button className="create-new-btn"/>
I want to implement JSF button with image and custom label. I tested this code:
<h:commandButton id="savesettings" styleClass="avesettings" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
.avesettings {
background-image: url('../images/small.png');
}
This is the result:
I also tested this second code:
<h:commandButton id="savesettings" image="resources/images/first.png" value=" Save Settings " action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
I get this result with no label:
Can you help me to create JSF button with background image and custom label defined as button attribute?
The first method that you have used styleClass="avesettings" i.e., using CSS style is the only possible way to do it since if you specify the image attribute, the input element will become an image.
See also documentation
So your best bet would be to use advanced styling techniques for the buttons, refer to these articles for that:
http://coding.smashingmagazine.com/2009/11/18/designing-css-buttons-techniques-and-resources/
http://www.tyssendesign.com.au/articles/css/styling-form-buttons/
The following JSF/CSS should solve your problem:
JSF (the same as in your first example):
<h:commandButton id="savesettings" styleClass="avesettings" value="Save Settings" action="#{GeneralController.updateDBSettings}" rendered="true" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
CSS (adapted):
.avesettings {
background: url('../images/small.png') no-repeat;
cursor: pointer;
width: 126px;
height: 41px;
border: none;
}
Width and height of the css must be the width and height of your image. I also have the css in an external css file, not direct in the JSF template.
Did you try the "image" attribute of he commandButton tag?
One way to implement this is to load the image as jsf resource in your style sheet:
<style type="text/css">
.imageButton
{
background-image:url(#{resource['images/button.png']});
}
</style>
Then set the relevant commandButton styleClass in the xhtml:
<h:commandButton value="Submit" styleClass="imageButton" action="#{...}"/>
Put the file button.png under your resources folder i.e. resources/images/button.png and make sure your resources folder is located next to your WEB-INF folder
Or if you want the image to display as an icon next to the text in the commandButton then you can play around with css a little:
.imageButton
{
padding: ...
border: ...
color: ...
background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]
}
I'm developing a web based source code editor. I'm thinking of adding support for themes (syntax highlighting).
//Default theme
.default-reserved-word
{
background-color : red;
}
//Some other theme
.monokai-reserved-word
{
background-color : green;
}
inside the editor each syntax highlightable word is surrounded by a span tag with the appropriate class:
....
<span class="default-reserved-word">def</span>method name
...
which I want to convert to (when the user clicks a "change theme" button)
....
<span class="monokai-reserved-word">def</span>method name
...
Is there a simple way of switching these CSS rules without going through all the elements and modifying the class attributes?
(FWIW, I need to support IE7+, FF3.6+)
I'd suggest using a different method, perhaps have a theme class on a higher parent container:
<div class="theme-default">
And then use CSS like this:
.theme-default .reserved-word {
color: blue;
}
Whilst this method is not exactly what you've asked for it will simplify the process of changing styles, for a start you won't have to search through loads of spans, finding the current class of theme-name + ' -reserved-word' (etc) and doing a string replace on them.
Add a class name to the root element (<html>) and change that on use input.
.theme1 .reserved-word { color: red; }
.theme2 .reserved-word { color: green; }
and then change
<html class="theme1">
to
<html class="theme2">
with Javascript.
You can use jQuery for that:
var elements = $('.default-reserved-word')
elements.removeClass('default-reserved-word');
elements.addClass('monokai-reserved-word');
I have a simple UiBinder widget containing a TextArea:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:TextArea visibleLines="3" />
</ui:UiBinder>
I want to control the background color of this textarea for writeable and read only states. GWT uses the "-readonly" style name decorator to achieve this. So I try this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.textBoxStyle {
background-color:yellow;
}
.textBoxStyle-readonly {
background-color:lightgray;
}
</ui:style>
<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>
Obviously this won't work because style names are obfuscated for CssResources resulting in something like this:
.G1x26wpeN {
background-color:yellow
}
.G1x26wpeO {
background-color: lightgray;
}
The result HTML for writeable textarea looks like this:
<textarea tabindex="0" class="G1x26wpeN" rows="3"/>
The read only textarea looks like this:
<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>
How do I declare the style so GWT will obfuscate the primary part but not the "-readonly" decdorator?
I know that I can disable the obfuscation for the entire style name. But I'd like to keep the obfuscation while making use of the decorators.
At this moment (GWT 2.4) it is not supported, and it's not clear if/when it will be supported, see issue 4746 in the GWT issue tracker.
The workaround is to add #external, which disables obfuscation for those styles. In this case that would be:
#external textBoxStyle, textBoxStyle-readonly;
If you want to use this style for all your read-only TextAreas then I'd suggest just modifying the .gwt-TextArea-readonly style in your GWT theme CSS file.
Otherwise, I can only think of adding your custom style programmatically when you set the TextArea read-only.
PS: from the docs:
<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page.
I recommend using this (with "empty" or "X" or other unused prefix) for much shorter class names - because at default settings you don't gain that much through obfuscation (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars ;)).
Why don't you try sth like this
public class MyFoo extends Widget {
interface MyStyle extends CssResource {
String normal();
String readonly();
}
#UiField MyStyle style;
/* ... */
void setEnabled(boolean enabled) {
getElement().addStyle(enabled ? style.normal() : style.readonly());
getElement().removeStyle(enabled ? style.readonly() : style.normal());
}
}
this would allow you change style if a text box is "normal" or readonly...
And off course, in the UiBinder you should have sth like
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style type='com.my.app.MyFoo.MyStyle'>
.redBox { background-color:pink; border: 1px solid red; }
.normal { color:black; }
.readonly { color:gray; }
</ui:style>
<div class='{style.redBox} {style.normal}'>I'm a red box widget.</div>
</ui:UiBinder>
Try Now This One I Hope You will get it.
With the <ui:style> element, you can define the CSS for your UI right where you need it
Note: <ui:style> elements must be direct children of the root element
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:TextArea visibleLines="3" />
</ui:UiBinder>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style field='MyStyle'>
.textBoxStyle {
background-color:yellow;
}
.textBoxStyle-readonly {
background-color:lightgray;
}
</ui:style>
<g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>
Isn't there a typo in your UIBinder?
You have:
<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
.. but I think you need to be using "stylePrimaryName", ie.
<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />
But I guess this question has been answered really already..
Here's something valuable I figured out by putting together info from other posts in this thread especially...
If you use #external, you can override gwt styles. The problem is that is this change gets applied globally! It is possible, however, to extend & override select attributes without effecting every instance of a widget type. (This like the programmatic styling method of creating a css class with a gwt class name + a suffix and using addStyleDependantName().)
Here is an example of using UIBinder + a CssResource to extend a gwt style. I left out the CssResource part, but you'll get the idea...
In your xxxx.ui.xml file, expose the gwt style, but don't mess with it!
<ui:style>
#external .gwt-Button; .gwt-Button {}
</ui:style>
Then, style a widget it by specifying 2 (or more) styles in the styleName attribute. I.e. the gwt style, and the one (or more) from your resource.
<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" />
Here's the css class:
.submitButtonStyle{
margin: 3px 5px 5px 0px;
}
In this case, I defined a button that is styled in the standard method (easily changed via module inheritance) but with a specific margin that will remain fixed. This didn't mess up the global style, it didn't require defining all the attributes manually, and allowed for swapping the global styling at will with clean.css, dark.css, etc.