I'm using one of the included KendoUI themes, but I'd like to replace the font family. What is the easiest way to override the entire font family used throughout Kendo UI?
In Angular you can do below
$scope.$on("kendoWidgetCreated", function (event, widget) {
var styleTag = widget.body.parentNode.getElementsByTagName("style")[0];
styleTag.parentNode.removeChild(styleTag);
widget.body.style.fontFamily = '<your font name here>';
widget.body.style.fontSize = '12px';
widget.body.style.color = '#35384D';
});
Make sure the new font you are using exists in Kendo provided fonts, if it doesn't exist, Kendo will use default Arial font.
To use any other third party font, it needs to be included in Kendo header section. I am struggling to use google font in Kendo at the moment but will update the thread when I get working example.
Finally I have to do go for ugly solution to use google font, though Kendo demo show much easier way to do it, but those were not working for me
angular.element(angular.element('.k-editable-area .k-content')[0].contentDocument.getElementsByTagName("head"))
.append("<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>");
Related
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
Is it possible to do the following things in an email template for Dynamics CRM online:
Change the default font
Insert an image
Have a table/multi-column layout
?
Yes, it is. There two ways to achieve this:
Using Design Tool on UI. You can change Font Name, Font Size, and Font Color with buttons on the UI Tool. However, there is no controls to insert Image, Table, or other stuffs. To achieve this, you can create your template somewhere else in HTML, and copy-paste the result to template create form. More here and here.
Another way is to create a workflow which is triggered when a template pre-creation. And update the template body with your HTML template.
Hope it helps!
I have found lots of ways to control a QtComboBox using style sheets, but not directly from code (well, you can use the setStyleSheet method).
I have a requirement to disable all widgets when a page is disabled, and I can accomplish that requirement. The problem is trying to make a QtComboBox look disabled (also a requirement).
Is there a way to change the QtComBox drop-down arrow to another image in code?
I have found that sometimes you have to implement an entire style sheet in Qt whenever you want to change one part of the widget.
Do I have to implement a disabled style sheet in code and use the setStyleSheet method?
And then, do I have to re-implement an enabled style sheet when the page is re-enabled?
It seems there should be something like: myComboBox->setDownArrowImage(url . . .);
Am I missing something?
Thanks.
Use pseudo states.
Stylesheet example:
QComboBox:enabled {color: red;}
QComboBox::down-arrow:enabled {image:url(:/images/downarrow.png);}
QComboBox::disabled {color: white;}
QComboBox::down-arrow:disabled {image:url(:/images/downarrowdisabled.png);}
I'm using the telerik TreeView.
I wonder if there is a way to change the dotted line used in the TreeView to a line that is not dotted(by uploading a background image file,or if telerik a have another solution.
http://demos.telerik.com/aspnet-mvc/treeview/draganddrop?theme=default
Based on your Theme please update below highlighted (three) images.
If you used CDN URL then please create this three images and add into your project.
Then copy all the css class which was used this three images.
Then update the image source and add "!important" in the style property.
Code from Original CSS File (ehich was used 'treeview-nodes.png' image)
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('Default/treeview-nodes.png')}
Updated CSS code
.t-treeview-lines .t-top,.t-treeview-lines .t-mid,.t-treeview-lines .t-bot{background-image:url('YourNewPathComesHere') !important;}
How can i change the look of the jqgrid without changeing the stylesheet. Basically im using jqueryui to style my site but i want to use different background images for just the grid. Is this possible?
Is it that you want to apply several jQueryUI themes to the same page, and have jqgrid use one of them while having other elements in your page use the other?
You may want to look at this page which discusses how to add scope (I'm assuming the easy way is to have the rest of your page use the manually scoped theme, and have jqgrid use the "default" scope, unless you want to dig into the jqgrid jquery extension code to see how to use a custom scope)
I haven't done this, but the strategy that I would use would be to define some alternate styles for your grid, keeping the same basic CSS definition layout that jQuery UI uses, but redefining the style content the way you want it. I'd make sure that these styles are included after the jQuery UI style sheet. Then I would use javascript on document load to go and apply the new CSS classes to elements of the jqGrid that have the matching jQuery UI classes to your styles.
I think it will be a major pain as there are many classes and I'm not sure that I would do it since sort of defeats the purpose of having a theme.
.jqgrid-widget { ... override widget styles ... }
.jqgrid-widget input, .jqgrid-widget select ...
.jqgrid-widget-content { ... override widget-content styles ... }
$(function() {
$('#myGrid .ui-widget').addClass('jqgrid-widget');
$('#myGrid .ui-widget-content').addClass('jqgrid-widget-content');
...
});
This function removes all (at least almost all) the jquery ui candy
/* Remove jquery-ui styles from jqgrid */
function removeJqgridUiStyles(){
$(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
$(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
$(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
$(".ui-jqgrid-pager").removeClass("ui-state-default");
}