I want to use Font Awesome for certain buttons inside Kendo Grids.
I can use the HtmlAttributes to add the class and it works fine.
command.Custom("name").Text(" ").Click("handler").HtmlAttributes(new { #class = "fa fa-file-text" });
But to avoid repetition, I'd like to use CSS. Kendo Grid add a class with the name of the custom button to it, e.g. k-grid-name. The end DOM looks like this:
<a class="k-button k-button-icontext k-grid-name" href="#"><span class="fa fa-check"></span> </a>
The CSS selector that I'm trying is:
.k-grid-name{
font-family: FontAwesome;
content: "\f000";
}
.k-grid-name a:before {
font-family: FontAwesome;
content: "\f000";
}
.k-grid-name span{
background-color: red;
}
I prefer to use the inside span, because it's in the center of the button. What's the correct selector for that?
try this
.k-grid-custombtnname span:before {
font-family: 'FontAwesome';
content: "\f00c";
}
This worked for me. Replace "custombuttonname" with the name of the custom grid button.
.k-grid-content .k-button.k-grid-custombuttonname::before {
font-family: 'FontAwesome' !important;
content: "\f000" !important;
}
Here' my solution. Register the dataBound callback with this..
const dataBound =(e) => {
$(".k-button.k-button-icontext.k-grid-custombtnname ").append("<span title='View Request'><i class='fas fa-search'></i></span>");
}
Related
Good day!
I have successfully changed WooCommerce cart icon to text, but cannot seem to add the brackets () around the cart quantity, e.g. (0) Bag.
Before the Elementor Pro and WooCommerce updates, the brackets were showing and working perfectly.
My website is www.byzastra.com
This is the CSS code I used to change the icon to text, but with no luck so var the brackets still does not want to show up on the front end nor back end.
How do I make it so that the brackets show up on website?
.eicon-cart-light::before {
display: none;
}
.eicon-cart-light::after {
content: "Bag";
font-family: 'Good Sans';
font-size: 12px;
letter-spacing: 0px;
}
.elementor-button-icon::before {
font-family: 'Good Sans';
font-size: 12px;
letter-spacing: 0px;
}
.elementor-button-icon[data-counter]::before {
content: "(" attr(data-counter) ")";
}
Like this:
.elementor-button-icon-qty:before {
content: "(";
}
.elementor-button-icon-qty:after {
content: ")";
}
<span class="elementor-button-icon">
<span class="elementor-button-icon-qty" data-counter="0">0</span>
<i class="eicon-cart-light"></i> <span class="elementor-screen-only">Cart</span>
</span>
Is it possible to style the first 2 characters of a message another styling?
::first-letter
Does not do the trick, also looked at this question, but this only hides the other ones.
Is it perhaps possible with the new pseudo elements? Or use the ch in combination with ::first-letter?
This is what I want to achieve but I have no clue how to do it with pure CSS.
NOTE, I can not change the HTML.
<h4 class="date">10 Mar. 2022</h4>
This can't be done with pure CSS since there is no way of (dynamically) selecting the first 'word'.
Consider a javascript alternative that wraps the first part in an <em></em> that can be styled with some CSS.
const e = document.querySelector('.date');
const t = e.innerHTML.split(' ');
e.innerHTML = `<em class='up'>${t.shift()}</em> ${t.join(' ')}`
.up {
color: darkblue;
font-size: x-large;
position: absolute;
top: 5px;
font-style: unset;
}
h4 {
color: lightblue;
margin-top: 30px;
}
<h4 class="date">10 Mar. 2022</h4>
You can use a mixture of JS and css to achieve what you are looking for.
First, just split the different parts (day/month/year) into different spans and add styling accordingly. An example as follows.
var text = $('.date').text();
var textArr = text.split(/\s+/);
$('.date').html(`<span class="day">${textArr[0]}</span>
<span class="month">${textArr[1]}</span>
<span class="year">${textArr[2]}</span>`);
.month {
color: red;
}
.day {
color: blue;
}
.year {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="date">10 Mar. 2022</h4>
I am using a framework (vuetify) which by default inserts the following css rule:
[type="button"] {
color: inherit;
}
The problem is that this is always inserted at last and I cannot control that. So if I am using the html <button type="button" class="button">Test</button> with the style .button { color: red; }, the css rule is not used because it gets overriden by the other rule. This means that for all button classes I either have to use another selector like button.button or I have to use !important. Is there another way to globally disable the property color: inherit so that I can still use a class like .button without using a more restrictive selector?
You can get around it by not putting type="button" on your buttons, it has that (button) behaviour by "default".
.button {
color: deepskyblue;
}
.container {
color: deeppink;
}
[type="button"] {
color: inherit;
}
<div class="container">
<button class="button" type="button">What color will I have?</button>
<button class="button">What color will I have?</button>
</div>
I would like to style each letter of the word SEND separately. I can't insert HTML into the value field, and I would prefer not to use an image.
<input type="submit" value="SEND" />
I simply would like each letter to be a different color. Do you have any suggestions? Thank you.
Use Lettering.js (http://letteringjs.com/)
It allows you to style each letter according to the CSS specification which isn't fully implemented in browsers.
Check http://codepen.io/FWeinb/pen/djuIx for example, e.g.
And in addition, use button instead of input:
<button type="submit">SEND</button>
button::first-letter {
color: red;
}
EDIT: I created an ugly hack with HTML+CSS only by using button element with span elements: http://cssdeck.com/labs/apkycgyi
<button type="submit">
<span>S</span>
<span>E</span>
<span>N</span>
<span>D</span>
</button>
button {
font-size: 0px;
}
button > span {
font-size: 16px;
}
button span:nth-of-type(1) {
color: red;
}
button span:nth-of-type(2) {
color: blue;
}
button span:nth-of-type(3) {
color: green;
}
button span:nth-of-type(4) {
color: yellow;
}
Can we write selectors by only name
For example,
<div name= "outer-name">
<img name="inner-image" src="images/ine.jpg" alt"" />
</div>
I want to take style of inner-mage in css file like [outer-name] [inner-image]
In CSS file
[outer-name] [inner-image] {
/*styles*/
}
I cant take selector as [outer-name] img etc .. only selecting by name
You can use attribute selectors:
[name="outer-name"] [name="inner-image"]
But keep in mind that name is not a valid attribute for <div> or <img>, even though the above selector will work. It's best that you either change them to classes, or if you're using HTML5, add the data- prefix to them, so it looks like this:
<div data-name= "outer-name">
<img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>
Then use this selector:
[data-name="outer-name"] [data-name="inner-image"]
Given the following html:
<div data-name="something">
<p>Content in 'something'</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name] [data-someAttribute] {
display: block;
background-color: #ffa;
}
This is perfectly valid (or, at least, it's implemented in Chromium 14/Ubuntu 11.04). I've changed from using name attributes (since they're invalid for div elements, or other non-form elements), and used, instead, data-* prefixed custom attributes, which are valid in HTML5 and, while perhaps not 'valid' in HTML 4, they seem to be understood by those browsers still.
JS Fiddle demo.
It's worth noting that you can also use attribute=equals notation, to select only certain elements based on the value of their data-* attributes:
<div data-name="something">
<p>Content in data-name='something' element.</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name="something"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
Also, if CSS3 is an option for you, it's possible to use attribute-begins-with (^=) notation:
[data-name] {
background-color: red;
}
[data-name^="s"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
And attribute-ends-with ($=) notation:
[data-name] {
background-color: red;
}
[data-name$="ing"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
References:
data-* attributes (W3.org).
data-* attributes, (HTML5 Doctor).
attribute-equals selector (W3.org).
attribute-starts-with, and attribute-ends-with selectors (W3.org).
As #Bolt said, name isn't valid there (yet it still works on my browser). You can use the HTML5 data- properties. Here's a fiddle showing how it's done.
The real solution here would be to use classes, but I assume you have a reason for not using them.