How do I adjust the background color of the event header in Fullcalendar?
I see that I can use color or backgroundColor to change the body of the event, but I don't see a setting for the header background color.
Quite simple using CSS
.fc-widget-header{
background-color:blue;
}
http://jsfiddle.net/ppumkin/PaKbx/
Passing the value from the feed is not a good idea as the header has nothing in common with events. So that would have to be passed somewhere else ;server side or jquery client side parsed from another source..
Thats just good practice-
but if you want you can pass the values back with your feed using a custom field
eg
[{ 'myHeaderForThisCalendar': 'Blue', ...other stuff ... }]
And using jquery look for that id and set your header using the CSS or ATTR function.
Related
I'm not having any luck figuring out how I can style the PayPal input boxes for debit/credit card payments. Unlike the pay with paypal button which creates a popup, when you click the debit card option the input boxes are displayed inline. The default styles of the input boxes screws up my design and I would like to make them smaller so they fit the page better (I read that you can't make them a pop-up like the pay with paypal option. Here is a pic:
From the paypal docs, it sounds like I should be able to style the input boxes directly from my own stylesheet using the input boxes id:
"Change the layout, width, height, and outer styling (for example,
border, box-shadow, background) of the card fields. You can modify the
elements you supply as containers (for example; #card-number { border:
1px solid #333; }) with your current stylesheets.
Typically, input elements calculate their height from font size and
line height (and a few other properties), but advanced credit and
debit card payments require explicit configuration of height. Make
sure you style the height of your containers in your stylesheets. The
text of the field components is configured with JavaScript."
I'm using react, I've tried modifying #card-number in my stylesheet but nothing I add changes the input box (font-size/height/background-color). I also render the buttons to a div called #paypalBtns, I tried styling the input boxes through that div as well but couldn't get anything to work (e.g #paypalBtns * {font-size: xx}). Has anyone had success styling these inputs?
Here is the code where I render the paypal buttons:
window.paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create({
purchase_units: [
{
amount: {
value: braceletTotal()
}
}
],
application_context: {
shipping_preference: "NO_SHIPPING",
},
})
},
onApprove: async (data, actions) => {
setPaymentLoading('visible')
const order = await actions.order.capture();
const paypalTotal = order.purchase_units[0].amount
processOrder(paypalTotal, customer)
},
})
.render('#paypalBtns')
EDIT
pic of web html:
As mentioned in my comment, you can look into manipulating the iframe data with Javascript as suggested here: How to apply CSS to iframe?.
You can try to add new inline style tags or replace the existing ones with Javascript where Paypal use inline css tags, but it's hard to target the right html tag. Where Paypal use css classes you can try to override them with the !important flag on each css property in your own stylesheet, but you have to load these styles after Paypal's style (but before the whole iframe is rendered), so this too has to be injected with JS, otherwise it won't work.
Also: Is manipulating the css styles against Paypal's terms? I would say that's likely. And is manipulating this form good for conversion? Your end users probably trust Paypal, but will they trust a form that says it's Paypal but doesn't look like it?
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
I have the following checkbox with a class on it, for future use
.class{onClick: "doSomething()"}= check_box #var, :var
But there's a problem. Let's pretend |AAAA| is the buton, if i click on the ==.. it still triggers doSomething().
|AAAA| ====================
I tryied with
display: block
in css but it doesn't work
Thanks
That's because both the label and input area are enclosed in the .class.
Instead, specify via js that you only want the checkbox input to trigger your JS action, and not the label.
= check_box #var, :var, id: 'my-id'
Then:
:javascript
$("input#my-id").click(function() {
doSomething();
});
What is generated html?
Looks like you've set onClick handler to outer div, not to the checkbox.
( I assume you have reasons to use inline javascript instead on unobtrusive one)
There may be 2 reasons this:
1: You have a label tag around the checkbox as well as element containing ==================== (As you said in the question )
2: You may not have given the class to checkbox, rather it is bound to another element that contains checkbox.
How to add a font color to a cell in dojo datagrid? I need to change the color dynamically (depend on the value it gets). I don't want to use html tags returning from formatter method.
for example,
'number' should be red if lesser than 0 and blue greater than 0.
in layout,
number{
formatter : format
}
method,
var format(value){
if(value<0){
// what should to returned to change font color without html tag?
}else if(value>0){
// what should to returned to change font color without html tag?
}
}
You can try with
dojo.style(node, style, value);
if you know the node. After that you may need to render the grid.
This should have the same effect as using html tags in the formatter. Which may look aesthetically ugly but works.
I have an ASP.NET text control "FromDate" whose visible property is set to false, but I wanted a client side javascript to be able to toggle the visibility property using CSS properties
element1.style.display = "none"; // hides the element
element1.style.display = ""; // shows the element
but when I attempt to get the textbox, I get null on
var element1 = document.getElementById("FromDate");
When I try the same code with visble=true as the default on the "FromDate" ASP.NET control, it works (although that is not the behavior I need)
Any ideas?
When you set Visible = false to a control, it is not rendered. That means there is no HTML representation of that control sent to the page. Set the style only.
You can set the style as display: none from server side code like this:
FromDate.Style.Add(HtmlTextWriterStyle.Display, "none")
If you want to hide this control, you can try CSS like this:
<asp:somecontrol id="FromDate" style="display:none" />
I think hiding the control with CSS is easier to understand.
Instead of setting Visible=false, set its style.display to none, that way the element is still there for JavaScript to manipulate.