I am curious if there is a way to programmatically change the green check icon that appears when you drag a jstree node. I haven't seen anything regarding this in jstrees API.
What I have is 2 jstrees. I want the green check and red X to be used when I drag and drop internally. When a node is dragged across trees I want a different icon to appear instead of the green check.
Thanks,
LL
Change the style of jstree like this:
#jstree-dnd .jstree-er{ background-image: none !important;}
#jstree-dnd .jstree-er:before{content: "\f05e" !important;font-family: FontAwesome !important; color: #a32020 !important;}
Related
I may not have described the issue accurately with the title, but it's easier to explain here:
I have a button that has an icon image contained within it. I need to get rid of the grey box around that icon and keep the icon itself, along with the button functionality. I assigned the button a second class called "nogray", and in my styling sheet I set opacity to 0.
However, this got rid of the entire button, along with the little orange trash bin icon, which I need to be visible. Essentially, I need the button to function the same way, just with the orange icon and no grey box. In this screenie, you can see the buttons at the top of each bulletin note.
Here is the button code in the bulletin notes view:
<button class ="remove-card nogray" id="#item.BulletinId" type="button"><i
class="fa fa-trash"></i></button>
And here is the css for the button:
i.fa.fa-trash::before {
content: "\f1f8";
}
.remove-card.nogray {
opacity:0;
}
(i.fa.fa-trash::before targets the trash icon, and .remove-card.nogray targets the outer gray area. However, I suspect that the latter is targetting the entire button because setting the opacity to 0 affects both gray area and icon.
How would I tweak the button code so that the opacity is 0 only for the grey, and not the icon? I've tried changing the order of the code element by element, but a lot of it is guesswork because this is a team effort and I did not personally write the button code. I'd also like to apologize in advance if this is an impossible question to answer; if there's some detail you need to know, please tell me and I will edit this to include it.
Thank you very much for any suggestions!
I realized I was targeting the wrong lines of code in my css. There was an ActionLink that a teammate commented out, and I assigned the classes from that to my original button code and was able to target the button that way instead.
I have read the answers to the other [very] related questions, but I thought I would pose it again since polymer updates might have been made.
I can change all the colors in [dart] paper-scaffold (core-scaffold) - the menu and toolbar, but I cannot change the color of the header across the top. It is always background-color=#526E9C. The only way I can do it is change the core-toolbar style in the generated (using pub build) index.html. And this one line change sets the color across the whole header across the browser window (which is what I want). So I can get by.
When I do style:
core-toolbar{
background-color: #7A418D;
color: #FFF;
}
it only changes the color above the drawer, and not across the whole top. It's very mysterious why it just does that bit!
I have tried shadow-shim, core-scaffold::shadowdom.. etc. I have tried changing the /src/ core-scaffold.html - and more, where this pervasive value #526E9C appears.
In my website (sekpa.org) it shows this blue (#526E9C) half.
Is it just a bug? If it is, I'd be very happy in that knowledge!
Thanks Steve
There are two core-header-panels inside a paper-scaffold.
Each core-header-panel contains one core-toolbar.
The left collapsible core-header-panel as well as its inner core-toolbar are sitting in the normal Light DOM, and that's why you can change its color by specifying the css like that.
However, the right core-header-panel and core-toolbar are inside paper-scaffold's Shadow DOM. In order to change the color of this core-toolbar, you need to do something like -
paper-scaffold::shadow core-toolbar {
background: #7A418D;
color: #fff;
}
For more info, please refer to this link.
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
I'm using classic Galleria theme. I implemented the lightbox and changed the frame color:
.galleria-lightbox-shadow{background-color: transparent !important}
.galleria-lightbox-content{background:black !important}
But is it possible to change the color of the next, previous and close buttons in Lightbox?
Right now they are white. I would like to have them in black. Is there a solution to that?
If my hunch is correct, the 'next', 'previous' and 'close' buttons are images (as is with most Lightboxes).
You should edit the images in their folder and convert them into black-themed ones manually, or search online for any replacements.
I am trying to achieve a borderless QLineEdit through CSS. It works fine when the QLineEdit is not in focus but when in focus the default blue border always comes up. The simple CSS I am using:
QLineEdit, QLineEdit:focus { border: none; }
I have tried with different background color through CSS for focus and not-in-focus, it works but I am unable to remove the blue border while in focus. Just to inform, I am working on a Mac.
You might get rid of the focus border by setting:
QLineEdit.setAttribute(Qt::WA_MacShowFocusRect, 0)
Read the documentation, there are plenty of other Mac specific settings
WidgetAttribute-enum
There is rather a similar question too
Refer this question
Maybe also like this way:
ui->treeView->setAttribute(Qt::WA_MacShowFocusRect, 0);
Reference: http://doc.qt.digia.com/4.6/demos-interview-main-cpp.html