Let's say I'd like to underline a word in one of my options in a RadioButtonGroup, is it possible?
I tried to use the Div class as an input, but it didn't work.
Thanks
This PR "Add support for specifying CSS classes on all LayoutDOM" will be going into Bokeh 0.12.4 in Dec 2017 and provided a mechanism to add arbitrary CSS classes to any Bokeh LayoutDOM model (e.g. widgets) so that they can be more easily styled.
It will be available like:
from bokeh.models import Div
div = Div(text="some text")
# add these CSS classes to the widget div
div.css_classes = ["my-custom"]
Then you can add styles for .my-custom in your template or whatever.
Related
In CKEditor 4, items shown in the "Styles" combo box are displayed with their styles, demonstrating how the text will be styled if the item is selected.
This is not the case for the "Format" combo box items for block-level formatting. Is there a way to fix this? For example by "cheating" and manually adding a CSS class to each item that mimics how the paragraph style will look?
You can add this in config.js
config.fontSize_style={
element: 'font',
attributes: { 'class': 'fs-#(size)' }
};
which will add class="fs-selectedFontSize"
for eg class="fs-18".
Then you have to add style for such classes in contents.css or link your CSS file. For similar techniques go to the official website of CKEditor Guide
https://ckeditor.com/docs/ckeditor4/latest/guide/index.html
I'm trying to set an specific CSS just for a certain item on my form. I would like to make it bold and in a different color. I used the following statement. Why is it not working?
myStaticTextItem.setCellStyle("color:#FF0000; font-weight: bold;");
You can use setTextBoxStyle to assign CSS class to your input box of that element.
There are additional methods for assigning CSS classes for special parts of element like title, hover, hint and picker icon. More here.
Is it possible to apply CSS styles to a dialogue or wizard modal window in Eclipse? I've been able to use the CSS Spy plug-in to figure out most elements but when I bring a modal up, Spy becomes inactive.
Yes it is possible for dialogs and wizards that you create. However changing some of the styles of a dialog or wizard can be quite tricky (such as the dialog background). To some extent you can also apply styles to existing dialogs.
For dialogs you create you probably want to set a CSS class for the dialog area to make it easier to specify styles applying just to the dialog:
#Override
protected Control createDialogArea(final Composite parent)
{
Composite composite = new Composite(parent, SWT.NONE);
composite.setBackgroundMode(SWT.INHERIT_DEFAULT);
WidgetElement.setCSSClass(composite, "DialogClass");
...
This sets the CSS class and the composite background mode.
You can also apply styles to any dialog using CSS selectors in the form:
Shell[style~='SWT.APPLICATION_MODAL'] > Composite > Text
{
font-size: 14pt;
}
which applies the style to a Text control in a application model dialog.
An example Dialog with styling:
No. The CSS styling feature works on Eclipse 4 workbench model which represents the workbench window along with editors and views within it, but not the content of editors, views or dialogs.
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.