We Keep Coding

How to change the control bar color in Fancybox 3?

I want to change the color of the controls of my Fancybox 3 gallery, as the default is barely readable.
I already loaded a separate Fancybox stylesheet, that allows me to change the color of the background. I can not find a way to change the color of the controls using the same method, though.
Contents of fancybox.css:
.fancybox-bg {
background: #ccc;
}
.fancybox-is-open .fancybox-bg {
opacity: 0.4;
}

You should be more specific about what color you would like to change, but if you refer to buttons in the top right corner, then you can do that by tweaking .fancybox-button class, example:
.fancybox-button {
background: red;
color: #fff; /* Tip: This will change icon color */
padding: 0; /* Tip: Change padding to resize icon */
}
Important: Make sure you add your CSS customization code AFTER including fancybox.css

Please use the parent element or class or id to override plugin css.
For example
div .fancybox-bg{...}
or
.class_name .fancybox-bg{...}

Use
.fancybox-bg {
background: #ccc !important;
}

How can adding a JavaScript background effect disable controls in my element?

First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.

I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here

Remove panel border default css in ExtJS 5

I want to remove panel border completely (border, background-image and all). I have a window which has 6 panel and every panel has title. I want only title name without any border.
Question may be duplicate but i didn't get answer.
I have tried border: false but doesn't work.

Add a cls option to the window so that you can scope your "no border" styles:
cls: 'noPanelBorder'
Then use this:
.noPanelBorder .x-panel-body-default,
.noPanelBorder .x-panel-header-default,
.noPanelBorder .x-panel-default {
border: none;
box-shadow: none;
background: none;
}
See example: https://fiddle.sencha.com/#fiddle/sbs
Note that using SCSS with Sencha CMD is recommended so that the style declarations can look simpler.

How to add custom icon to JqGrid top-level toolbar button?

I have used the info here to add a custom button in JqGrid top level toolbar using code below in IE9.
Caret icon appears instead of image. IE9 network tab shows that request for Images/calendar.png is not issued.
$grid.jqGrid('navButtonAdd', '#grid_toppager', {
caption: '',
id: "grid_mybutton",
buttonicon: 'my-image',
onClickButton: function () {
window.location = 'Report';
}
});
css file:
.ui-button .ui-icon.my-image {
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}
.ui-button.ui-state-hover .ui-icon.my-image {
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}
How to add custom icon ?

The jQuery styles will always over-write your styles as they are applied last.
In addition to what jjay225 pointed out ones you fixed your references, add the !important tag to your image style to ensure it is always applied.
Try it out in the below demo, remove the !important, and you get the ^, add it again and you get your image.
See DEMO
Not having your full code I simply added an icon to the toolbar with jQuery append() and added the required CSS.
Using any debugging tool though, i.e: FireBug in FF and the build-in ones in Chrome or IE, you can check the exact class/id values of your new icon and fix any css reference issues you may have.

Your css of
.ui-button.ui-state-hover .ui-icon.my-image
should be
.ui-button, .ui-state-hover, .ui-icon, .my-image
Why not try just have the class
.my-image
{
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}

Webkit scrollbar dynamic styling

I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?

There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/

Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript

If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.

i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image

For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.

You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip

you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.

you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/