I am using a Kendo MVC Scheduler control and it looks like this:
You can see all the background colors are blue. I would like to change this default to a different color. I cannot find a way to do this. I thought maybe this styling would work in my view, but it doesn't:
<style>
.k-event {
background: red;
background-color: red;
}
</style>
This is how I have the Scheduler defined:
#(Html.Kendo().Scheduler<LaibeManpower.Entities.OnCallSchedule>()
.Name("OnCallSchedule")
.Date(new DateTime(System.DateTime.Now.Ticks))
.Height(800)
.Editable(false)
.Pdf(pdf => pdf
.FileName("OnCall Schedule.pdf")
.ProxyURL(Url.Action("PdfExportSave", "OnCallSchedule"))
)
.Toolbar(t => t.Pdf())
.Views(views =>
{
views.WeekView();
views.DayView();
})
.Selectable(true)
.DataSource(d => d
.Model(m => {
m.Id(f => f.RowId);
})
.ServerOperation(true)
.Read(read => read.Action("ReadSchedule", "OnCall").Data("getAdditionalData"))
)
What I had to do was to put the following in a separate .CSS file and load it. Then it worked.
.k-event {
background-color: red;
}
Related
How can i change the global color attribute in Vuetify dark theme?
Like e.g.
html, body {
color: red
}
I try to set it via variables.scss but i cant find the appropriate variable name.
Is there a variable for this or how am i supposed to change the color?
There are a few ways. If you'd like to use variables.scss you need to enable treeshaking in nuxt.config.js
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true, // add this line
},
Otherwise if you'd like to define your own colour you'd do it in the same configuration object as well. Then you can then use anywhere in your vue template.
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
themes: {
light: {
myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},
Or in layouts/default.vue insert a style tag and put in your custom css
<style>
html, body {
color: red;
}
</style>
I am trying to use tailwndo css for a project in laravel and I would like to maintain the nunito font for the whole app but Tailwind has its own font set. Does anybody know how to change it?
Connect the font to the project (as you usually do) and just add your font to tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['-apple-system', 'BlinkMacSystemFont', ...],
'serif': ['Georgia', 'Cambria', ...],
'mono': ['SFMono-Regular', 'Menlo', ...],
'your-font': ['Your Font', ...]
}
}
}
https://tailwindcss.com/docs/font-family/#app
tailwind.config.js :
theme: {
extend: {
fontFamily: {
body: ['Rowdies']
}
}
},
css\app.css
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300&display=swap');
shell:
npm run dev
or
npm run watch
now you can use .font-body class in any tag that you want
for example:
<body class="font-body">
<h1>Hello World!</h1>
</body>
font + body = font-body
fontFamily: {
body: ['Open Sans']
}
(you can change body)
When defining a custom font with the webfont loader (repo here), we basically define the families loaded and the related URLs:
WebFont.load({
custom: {
families : [ "My font" ],
urls : [ "assets/css/fonts.css" ]
}
});
But, it seems the loader don't detect multiple weight defined for the same font in the css file:
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'My font';
src: url("../fonts/my-font.eot");
font-weight: bold;
font-style: normal;
}
And so, the loader trigger the active event when the first font is loaded. This can be confirmed if we check the fontactive event who'll only be triggered once:
WebFont.load({
fontactive: function( fontname, fontdescription ) {
console.log( fontname, fontdescription );
// Only trigger once `My font, n4`
}
});
So, is there a way tell the webfont loader there's multiple weight to get (a bit like their google webfonts interface)?
(A fix can be to use multiple names for each font weight, but that's not the solution I'm searching for here)
I'm one of the developers of the webfontloader. You are correct that the custom module does not support loading multiple variations. Luckily we recently added support for this, so if you upgrade your version of the webfontloader (or use the one on the Google CDN) you'll get support for it.
You can use it like:
WebFont.load({
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
urls: ['/fonts.css']
}
});
To load the 'n4', 'i4' and 'n7' variations of "My Other Font".
I am using Ext.net 2.0 and I am trying to load the first record of the store inside a form panel. I always get no records (getCount() = 0) in the store ? Am I missing something ?
#(Html.X().Store()
.ID("myStore")
.AutoSync(true)
.AutoDataBind(true)
.Proxy(proxy =>
proxy.Add(
Html.X().AjaxProxy().API(api =>
{
api.Create = "/Property/Save/";
api.Read = "/Property/GetById/";
})
.Reader(reader => reader.Add(Html.X().JsonReader().Root("data").IDProperty("P_ID")))
.Writer(writer => writer.Add(Html.X().JsonWriter().AllowSingle(true)))
))
.Listeners(c =>
{
c.DataChanged.Handler ="var store = Ext.getStore('myStore');" +
"alert(store.getCount());";
})
.AutoLoadParams(parameters =>
{
parameters.Add(Html.X().Parameter().Name("id").Value("document.location.href.split('/')[5]").Mode(ParameterMode.Raw));
})
.Model(model => model.Add(
Html.X().Model()
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("ID").Type(ModelFieldType.Int));
fields.Add(Html.X().ModelField().Name("DispalyName").Type(ModelFieldType.String));
fields.Add(Html.X().ModelField().Name("Title").Type(ModelFieldType.String));
fields.Add(Html.X().ModelField().Name("ShortDescription").Type(ModelFieldType.String));
})
))
)
For the form panel
#(
Html.X().FormPanel()
.ID("myPanel")
.Layout(LayoutType.Form)
.Width(350)
.FieldDefaults(d => {
d.LabelWidth = 150;
})
.BodyPadding(10)
.Items(item =>
{
item.Add(Html.X().TextField().ID("Id").Name("ID").FieldLabel("Id").Hidden(true));
item.Add(Html.X().TextField().ID("DispalyName").Name("IdDispalyName").FieldLabel("Id Dispaly Name").MaxLength(400));
item.Add(Html.X().TextField().ID("Title").Name("Title").FieldLabel("Title").AllowBlank(false).MaxLength(200));
item.Add(Html.X().TextField().ID("ShortDescription").Name("ShortDescription").FieldLabel("Short Description").MaxLength(200));
}
) )
Thanks in advance.
More appropriate event is Load (it is fired when data is loaded to the store from a remote source)
See the following description
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-event-datachanged
I am new to JqGrid, so please bear with me. I am having some problems with styling the cells when I use a showlink formatter.
In my configuration I set up the AfterInsertRow and it works fine if I just display simple text:
afterInsertRow: function(rowid, aData) {
if (aData.Security == `C`) {
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `red` });
} else
{
jQuery('#list').setCell(rowid, 'Doc_Number', '', { color: `green` });
}
}, ...
This code works just fine, but as soon as I add a formatter
{'Doc_Number, ..., 'formatter: ’showlink’, formatoptions: {baseLinkUrl: ’url.aspx’}
the above code doesn't work because a new element is added to the cell
<a href='url.aspx'>cellValue</a>
Is it possible to access programmatically the new child element using something like the code above and change the style?
`<a href='url.aspx' style='color: red;'>cellValue</a>` etc.
UPDATE: In order to work you have to do as follow:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
CSS Class
.redLink a {
color: red;
}
You could add a class to the cell:
jQuery('#list').setCell(rowid, 'Doc_Number', '', 'redLink');
Then define a CSS class along these lines:
.redLink a {
color: red;
}