I want to change my kendo ui theme from default. The problem is it changes but only for controls: grid etc. but charts stay exactly the same.
I'm adding this styles in the bundle.
bundles.Add(new StyleBundle("~/Content/kendoUi").Include(
"~/Content/kendo/2016.1.112/kendo.common.min.css",
"~/Content/kendo/2016.1.112/kendo.mobile.all.min.css",
"~/Content/kendo/2016.1.112/kendo.metro.min.css"
));
Am I missing something ?
I was struggeling with the same thing today. For some reason, the Theme of a chart must be set via widget configuration.
From the Documentation of the Kendo Client Library:
The Kendo UI Chart widgets come with a set of predefined themes. Use
the theme option to select a theme, as demonstrated in the example
below. The theme name is case insensitive.
$("#chart").kendoChart({
theme: "blueOpal",
//...
});
There is no documentation for the Server-Wrappers. However, it will work this way:
#(Html.Kendo().Chart().Theme("blueOpal"))
The reason for this, seems to be explained here:
Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps use a mix of
browser technologies to attain the required precision and
responsiveness. Visualization is rendered as vector graphics with
computed layout. In contrast, interactive features are built using
traditional HTML elements. As a result, the appearance settings of
these widgets are split between declarative options and traditional
CSS.
If you want to do it globaly, you need to override kendo:
var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];
if (kendo.dataviz) {
for (var i = 0; i < themable.length; i++) {
var widget = kendo.dataviz.ui[themable[i]];
if (widget) {
widget.fn.options.theme = "blueOpal";
}
}
}
Related
Does Sitecore 9.3 Helix support ASCX user control referred in sub layout, if so, could you please share any reference?
Yes, it does support. In fact, this will work regardless of whether you follow Helix principles or not.
I guess that you want to mix renderings with sub layouts on a Sitecore MVC layout.
If your ASCX sub layout does not contain any postback logic and/or does not have another sub layout inside it then the easiest way will be to declare it in a View Razor file as follows:
#Html.RenderSitecoreSubLayout("~/Layouts/Sublayouts/YourSubLayout.ascx")
Alternatively, you can generate the inner sub layout at a code level and add it to a placeholder to get it rendered correctly, for example:
Sublayout yourSublayout = new Sublayout
{
Path = "~/Layouts/Sublayouts/YourSubLayout.ascx",
DataSource = yourItem,
Cacheable = true,
VaryByData = true,
VaryByParm = true
};
phYourPlaceholder.Controls.Add(yourSublayout);
based on a single page view I am looking to have my content structure dynamically build the page.
So as an example: with a child item of GALLERY template, this would itself have sub-items using the GALLERY ITEM template which defines each of the images to be shown in a carousel; so an Editor can simply add multiple items and the carousel will scale accordingly rather than having fixed fields (banner, banner 2 etc)
Currently I am having an issue in understanding how my sublayout which defines the galleries HTML can automatically be included in this main page if that template is present.
Rather than an Editor having to manually add the Sublayout and define a datasouce to the gallery node I'd want the main page to iterate down the tree and observe there is a template for GALLERY therefore knowing it needs to use the sublayout and add it to the main page placeholder
On this principle the page will self build depending on what items an Editor adds to the page.
Any advice or sample code (using webforms) is appreciated; currently I am having to manually add sublayouts which seems to not be intuitive for Content Editors to assemble pages.
Thanks
If you are properly using and configuring the Page/Experience Editor, adding the sublayouts and data sources is a very intuitive process, and allows you to take full advantage of all the features and capabilities of Sitecore, in particular personalization and A/B testing. This is the recommended practice that you should follow.
That said, if you have extenuating circumstances that really prevent you from doing this, there is an older technique called "Presentation Inversion of Control" which pulls renderings from items associated via the content tree. It was useful prior to the "unified page editor" and datasource wizards which appeared in Sitecore 6.4. There are various approaches to this, but the simplest is a sublayout/web control that you place on the page.
The following code hasn't been tested by be on Sitecore 7:
public partial class Gallery: System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
PageItem page = Sitecore.Context.Item;
//custom item contains logic for finding items to include
foreach (Item galleryItem in page.GalleryItems)
{
string strDataSource = galleryItem.ID.ToString();
RenderingReference[] renderings =
galleryItem.Visualization.GetRenderings(Sitecore.Context.Device, false);
foreach (RenderingReference rendering in renderings)
{
rendering.Settings.DataSource = strDataSource;
this.Controls.Add(
rendering.RenderingItem.GetControl(rendering.Settings));
}
}
}
}
But really, you should just properly implement the Page Editor.
I like the new library(shinydashboards), but I wonder whether it's possible to arrange several tabs next to each other in the dashboard header - like in the navbarpage layout of the normal shiny library?
It seems impossible to use the navbarlaout within a "dashboardPage" since "navbarPage" is a layout command like "dashboardPage".
Nevertheless, a combination of navbarpage & dashboardPage would be interesting.
From the shinydashboard examples I found (below and others), it looks like different dashboard tabs can only be placed in the sidebar.
Has anyone found a way to add tabs for several dashboards in the "dashboardPage" header?
https://github.com/rstudio/shinydashboard/tree/gh-pages/_apps
Samples here are using the dropdownMenu() function. The type is currently very limited (e.g., can choose icon from libraries font-awesome or glyphicon, but not text), but maybe that is enough customization to make this useful for your application?
So I've been adding tabs to my top header by adding them as links within html tags. I appreciate this isn't quite the same thing as having tabs, because the links are hosted on different urls, but in my case that's the whole reason I need the additional tabs and can't just use navbarPage e.g.:
dashboardPage(
dashboardHeader(
title = "Your Page Title",
tags$li(
a(
strong("Tab Title"),
height = 30,
href = "www.google.com"
title = "",
target = "_blank"
),
class = "dropdown"
)))}
When working in Sitecore page editor, our editors navigate through the tree of placeholders, components and edit frames using the blue arrow icon to open the component navigator.
The component navigator shows each ancestor in the tree (from the context of the area of the page where the editor clicked) with a title and a small blue square bullet icon:
/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_blue.png.aspx
Unfortunately, all components, placeholders and edit frames are represented by the same icon, and it isn't always easy to tell the difference between a component and a placeholder by title alone (edit frame buttons have an editable title and tooltip, in the core database).
Ideally, we'd like to have colour coded bullet icons that would help our editors understand where they were and what they were clicking on.
These aren't icons as used in the content tree.
So is there anywhere that I can set a different icon for each of these? If not, is there a code fix for this?
Edit for clarification: The blue bullets in this image - Body is a placeholder, the first Image Banner is a component, the second an Edit Frame (will get a new title), Banner Overlay is another placeholder:
What you need to do is to edit javascript files for chosen ChromeTypes.
Go to sitecore\shell\Applications\Page Modes\ChromeTypes directory. What you see there is base ChromeType function and inheriting functions like PlaceholderChromeType, RenderingChromeType, etc.
Edit the type which you want to change icon for. Override icon function like this:
icon: function() {
return '/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_green.png.aspx';
},
So if you edit PlaceholderChromeType.js file it should start like this:
Sitecore.PageModes.ChromeTypes.Placeholder = Sitecore.PageModes.ChromeTypes.ChromeType.extend( {
constructor: function() {
this.base();
},
icon: function() {
return '/sitecore/shell/~/icon/ApplicationsV2/16x16/bullet_square_glass_green.png.aspx';
},
controlId: function() {
var marker = this.chrome.openingMarker();
Clear your browser cache and refresh the page. Now all your placeholder icons will be green.
These are generally configured under WebEdit; as defined in the "core" database. As an example, take a look under "/sitecore/content/Applications/WebEdit/Edit Frame Buttons" after switching to "core".
You should be able to make most of the icon changes you require, from there.
I'm creating a Qt application with some web pages loaded on QWebViews and also some plain QWidgets, all inside a QMainWindow. Both the webpages and widgets are going to have some checkboxes here and there, and I'd like them to look the same. Well, at first they DO look the same, because they inherit their style from the native theme engine, but I'd like to define a new CSS style for both.
I tried some things like
QCheckBox::indicator:unchecked {
image: url(:/image/checkbox_unchecked.png);
}
but that only works for checkboxes inside my QWidgets.
I also tried some plain CSS style, but then they only apply to webpage checkboxes.
So, is there a way I could design a single CSS style for checkboxes and apply it to all sorts of checkboxes inside my application?
For the record, I could achieve exactly that when it comes to text selection. I set the main window stylesheet to
*{
selection-color: #363636; selection-background-color: #bfebeb;
}
and both web page and qwidget selections followed this style.
UPDATED
change your code to
QCheckBox:!checked {
image: url(:/image/checkbox_unchecked.png);
}
QCheckBox:checked {
image: url(:/image/checkbox_unchecked.png);
}
http://harmattan-dev.nokia.com/docs/library/html/qt4/stylesheet-syntax.html