I'm trying to adapt some code from the following page:
https://plnkr.co/edit/plSzOtlpPXFguBIY1JwB?p=preview
When I click 'Column', the checkboxes are pink.
The style seems controlled as follows:
<style> html, body { margin: 0; padding: 0; height: 100%; } </style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
<script src="https://unpkg.com/ag-grid-enterprise#18.1.1/dist/ag-grid-enterprise.min.js"></script></head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-material"></div>
I'm trying to follow and trace the .css but I'm having trouble doing so.
How would I, for example, change the checkboxes to blue?
I'm trying to follow and trace the .css but I'm having trouble doing
so.
How would I, for example, change the checkboxes to blue?
Here's how to do this using Chrome's Developer Tools:
Inspect a checked checkbox: <span class="ag-icon ag-icon-checkbox-checked"></span>
Look for this CSS in the styles panel:
.ag-theme-material .ag-icon-checkbox-checked:empty {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiNGRjQwODEiLz48L3N2Zz4=);
}
Right-click the underlined data:image... part, click "Open in new tab".
In the new tab, right-click "View page source".
Here's your SVG (formatted):
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM7 14L2 9l1.41-1.41L7 11.17l7.59-7.59L16 5l-9 9z"
fill="#FF4081"
/>
</svg>
You need to change the fill to the desired colour. I went for #1976D2 (blue[700]).
You can just save the SVG file and point to that in the CSS if you want to. Otherwise, here's how to get it back as a data URI.
Put your SVG into some random web tool. You don't particularly have to use base64 these days for SVG, but I'm not going to get in to that.
I used this one: https://dopiaza.org/tools/datauri/index.php
Put the output in the original CSS:
.ag-theme-material .ag-icon-checkbox-checked:empty {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMEgyYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0yVjJhMiAyIDAgMCAwLTItMnpNNyAxNEwyIDlsMS40MS0xLjQxTDcgMTEuMTdsNy41OS03LjU5TDE2IDVsLTkgOXoiIGZpbGw9IiMxOTc2RDIiLz48L3N2Zz4=);
}
Put this new CSS somewhere in your code. It must be after the original ag-grid CSS.
The end: https://plnkr.co/edit/BuxqByk5Py0vW0qUfPbx?p=preview
They are not using real checkboxes, see the HTML structure
<span class="ag-column-select-checkbox" role="presentation" ref="cbSelect">
<span class="ag-checkbox-checked" role="presentation">
<span class="ag-icon ag-icon-checkbox-checked"></span>
</span>
<span class="ag-checkbox-unchecked ag-hidden" role="presentation">
<span class="ag-icon ag-icon-checkbox-unchecked"></span>
</span>
<span class="ag-checkbox-indeterminate ag-hidden" role="presentation">
<span class="ag-icon ag-icon-checkbox-indeterminate"></span>
</span>
<span class="ag-checkbox-label" role="presentation"></span>
</span>
they're using spans, when you check those elements styling you can see they have images set up as background like this one that its being used for the ag-icon-checkbox-checked element.
They're using javascript to achieve this.
But here you can see an article and a codepen on how to customize checkboxes with css:
w3schools - How TO - Custom Checkbox
CodePen - Custom checkboxes CSS only
Hope it helps,
Related
This is my first bug so be gentle. I just can't get a custom url cursor to work. When using a standard one like "pointer" everything works, but when using a url, either local or remote it just does nothing.
I've come across similar issues being solved here but none of them are working for me (checking the sizing, file type, url location...)
My goal was for it to appear when hovering an svg image. I've tried styling it inside the svg file itself, it works fine for "pointer" but not for "url".
I've tried adding the svg file inside an tag, and styling the cursor inside it, works with "pointer", doesn't work with "url".
Tested on different browsers, none of them respond to it.
What am I doing wrong? See below some of the stuff I've tried:
<svg ...>
<style>
svg {cursor: url(01ssss3326.cur);}
</style>
</svg>
doesn't work
<svg ...>
<style>
svg {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=107471);}
</style>
</svg>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: url(http://www.rw-designer.com/cursor-extern.php?id=109070);">
</body>
doesn't work
<body>
<img src="prettyinternet.svg" alt="" style="cursor: pointer;">
</body>
this works
<svg ...>
<style>
svg {cursor: pointer;}
</style>
</svg>
this works too
Is that working in this way? I guess you are just missing ""
<svg ...>
<style>
svg {cursor: url("01ssss3326.cur");}
</style>
</svg>
This is another example which I used in one of my project and it works. I am passing it in my css
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='38' viewport='0 0 100 100' style='fill:black;font-size:19px;'><text y='50%'>🚀</text></svg>") 16 0,auto;
I added “add to cart” button image over which I have put a link to checkout, image is located on top of my product description but spacing between image and text is too great is there any way to decrease it? Perhaps with CSS?
How “add to cart” button looks now:
and how I would like for it to look like:
Here is my code in the product description for the image/visual above:
<img class="alignnone size-full wp-image-623" src="http://example.com/wp-content/uploads/2018/03/addtocart1-2.jpg" alt="" width="383" height="70" />
<ul>
<li>FREE WORLDWIDE SHIPPING</li>
<li>Delivery time: 9 to 18 days</li>
</ul>
Update:
Bottom margin is definitely a source of problem. I'm using SiteOrigin CSS plugin to edit my css but Konards code (answer below) is not working as expected, you can see how it looks with Konards code and when I uncheck bottom margin with inspect element (text is deformed as well even when I delete text part of the code).
And here you can see how the code looks before and after it's saved in SiteOrigin CSS (got some errors as well).
And here is the code (begins at line 10)
Can you send image how it looks on website?
I tried do it with CSS:
<img class="alignnone size-full wp-image-623" src="(your image url)" alt="" width="383" height="70" />
<ul>
<li>FREE WORLDWIDE SHIPPING</li>
<li>Delivery time: 9 to 18 days</li>
</ul>
<style>
img {
margin: 0;
margin-bottom: 0 !important;
}
li,
ul {
margin: 0;
margin-bottom: 0 !important;
line-height: 8px !important;
}
</style>
I'm having a real difficult time trying to style a checkbox in bootstrap, I currently have the default checkbox, and I need to style it to look like this
I'm aware this picture it's round but the designer made a mistake, so instead of being round it still needs to be square
I have looked at the following and also tried what is suggested.
Twitter Bootstrap radio/checkbox
I did on the other hand find a website which has a similar to style to what i'm trying to achieve which is on here located on the left hand side where you do the filtering
Example of the checkbox
I tried using firebug to get/check out the CSS but I was unable to obtain the CSS.
So if you don't need support for IE8 you can easily do this with a background image and the :checked selector in CSS only. I used an svg image, but you could use a font, sprite or just two images.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
body {
background-color:#f5e1c6;
}
.image-checkbox {
position: absolute;
left: 100%;
visibility: hidden;
}
.image-checkbox-label {
height: 50px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/></svg>') no-repeat;
color: #7b7163;
}
.image-checkbox:checked + .image-checkbox-label {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 96 84" enable-background="new 0 0 96 84" xml:space="preserve"><path fill="rgb(213,195,170)" d="M74.2,73.5H19.5c-2.8,0-5.1-2.3-5.1-5.1V15.6c0-2.8,2.3-5.1,5.1-5.1h54.7c2.8,0,5.1,2.3,5.1,5.1 v52.7C79.3,71.2,77,73.5,74.2,73.5z"/><polygon id="check" fill="rgb(251,253,223)" points="30.2,31.8 30.2,43 46.1,54 80.1,19.1 80.1,6.1 46.4,44.7 "/></svg>') no-repeat;
color: #c3b39c;
}
.checkbox label {
padding-left: 60px;
line-height: 50px;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="form">
<div class="checkbox">
<input id="remember-me" type="checkbox" class="image-checkbox" />
<label for="remember-me" class="image-checkbox-label">
Remember Me
</label>
</div>
</div>
</form>
</div>
</div>
</div>
How it Works
Give the input an id so that you can use the for attribute on the label. Don't forget to make your ids unique. Give the input a class (I used .image-checkbox), and position the input so that it's hidden offscreen but still displayed.
Style your label using the background-image for the unchecked box style. Using the :checked pseudo selector and the sibling selector (+), you can target how the label should be styled when the input is selected. In this case, I changed the background image to the checked image and changed the font color.
To get the actual label text to align nicely, I'm also overriding some of the default Bootstrap styles for .checkbox label. You can adjust them to suit your needs.
Something is definetly wrong with my ul and li. I know I made a huge mistake but I cannot find it. When you go here:
http://icpy.webs.com/text/Mass.htm
You will see both thumbnail images are different but both pop ups have the same bigger image as the first thumbnail.
Why are these before doctype? What are those custom elements?
<link rel="stylesheet"type="text/css"href="../text/aboutleft.css">
<img src="http://icpy.webs.com/content/masslayout.png"/><br>
____________________________________________________________________________<br><br>
<x><re>colors available</re></x><br>
<x><gre>available to unlimited users </gre></x><br>
<x>Changes available: box, link, username</x><br><br>
Why don't you use a relative link for the masslayout.png?
Have you ever heard of the <hr> element in HTML?
I don't see any thumbnails, neither popups and I don't know what you are talking about.
jQuery is stored on Google and it is in cache for most of the users. Why do you store and link another one?
Your CSS:
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
#cas ul {
list-style-type: none;
}
}
What is this?? What did you want?
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe>
Href attribute needs a close quote mark.
Look at your source code and after that into the inspector and please correct as many errors as you can.
I think the reason it's like that, because both boxes are within the same <a>-Tag, which of course links to only one of the big images:
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/BEA01.png"/>
<div id="inlineframe" style="width: 1040px; height: 785px; display: none;">
</div>
</a>
<a class="fancybox" title="Mass Sale layouts" href="#inlineframe">
<img src="http://dgamerhelp.webs.com/soccer/layouts/JAK01.png"/>
<div id="inlineframe" style="width:1040px;height:785px;display: none;">
</div>
</a>
I have two banners (images) which keep switching every 4 seconds. One image is clickable and the other is not. Below is the code,
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" style="cursor: pointer;"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" style="cursor: default;"/>
</div>
I have specified style for 1st and 2nd image as pointer and default respectively.
When images switch, 1st image will appear as Pointer to user when he moves his cursor over the image. When a switch happens to 2nd image, and when user has not moved his cursor away from the image, 2nd image will also appear as Pointer instead of Default.
Only when User clicks on 2nd image, it will change as Default and then User will come to know that 2nd image is not clickable.
Same thing happens with 1st image. When User is in 2nd image and when a Switch happens from 2nd image to 1st image, Cursor will still be default instead as Pointer. So, User doesn't know that 1st image is clickable.
Instead of using inline style.,just create two simple classes for your cursor styles like as follows.
For CSS :
<style type="text/css">
.clickable {
cursor:pointer;
}
.not_clickable{
cursor:default;
}
</style>
For HTML :
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" class="clickable"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" class="not_clickable"/>
</div>
After that you can easily switch over the classes as per your wish, while you triggering or clicking the image.
Try pointer-events:none; css property mention where ever you want.