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.
Related
Problem
I have a MenuItem that by default is initialized with drop shadow—which I’d rather not have. I’ve got a css file set up, but can’t seem to figure out what’s necessary to remove the drop shadow.
See how there's a rather ugly drop shadow down below that? I'd like the whole menu button to be flat, containing no borders nor shadows whatsoever.
The reason the background color of the various different elements in the image are red is due to my attempts in styling it differently—the background color does indeed work the way I’d expect it to.
What I’ve tried so far
.menu-item
{
-fx-effect: null;
-fx-drop-shadow: null;
}
Neither one of the properties seem to effect the outcome of my program.
I've also tried styling the menu, but that only appears to style the actual “Plugins” button.
Moreover
I can’t seem to think of any better solutions compared to those I’ve already tried. Perhaps someone can point me in the right direction?
Once again, I’m attempting to make the menu items look flat.
You need to add the effect to the context menu, e.g.
.menu-bar .context-menu {
-fx-effect: null;
}
BTW: There is no -fx-drop-shadow property.
I'm trying to display images instead of nodes using Cytoscape.js to create a network diagram, but I haven't had any success yet. I started with the Images and breadthfirst example (https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5), but there are a couple key things I would like to change.
For starters, I'd like to display an image only instead of a node. The above example displays a circle node with an image inside it. Is there any way to make the node completely transparent, and just let the image show through? I just want to see my vector icon images. When I delete all style properties for my node selector except width and height, I still see a circle constraining my image. I just want to see my image.
Next, I'd like to use something on the element data to decide what image to use instead of the #nodeId mechanism in the example above.
.selector('#order-db')
.css({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
Using a unique selector for each id is not very scalable or easy to modify. I'd prefer a declarative approach where a property on the data element determines which image to display. I tried using the "classes" property on an element, and I added a "shape-database" value to it. Here is how the class is defined...
.shape-database {
width: 95px;
height: 95px;
/*background: url('images/network-icons.jpg') 0px -95px;*/
background: url('images/database-5-med.png');
}
I then tested that the "shape-database" class was working by adding a simple div to the page, and the class is working properly on a normal div. The cyto node I added the classes property to does not display the background image. It's as if the class was not applied to the node, or else the node is blocking the image somehow. This is with the exact same code I was using above, with all the node selector css properties removed except width and height, and the #order-db css selector removed. I just see a grey circle for the node.
When the classes property on the element didn't work, I even tried the following to no avail...
cy.$('#order-db').addClass('shape-database');
Any thoughts on what I'm doing wrong? A link to an example displaying just images instead of nodes would help as well.
Displaying an image instead of a node:
The key here was in hiding the node background and border completely, so that the background image alone shows through. The key to accomplishing that is through "background-opacity" and "border-opacity" (or "border-width") on the style objects. I added an image property (value is an img src) to the data object for each element that I wanted to swap out with an image, as well as the following style.
{
selector: 'node[image]',
style: {
'background-image': 'data(image)', // specify some image
'background-opacity': 0, // do not show the bg colour
'border-width': 0, // no border that would increase node size
'background-clip': 'none' // let image go beyond node shape (also better performance)
}
}
This also satisfied my requirement to use the element data to designate which elements are to be replaced with images and which images to use, instead of hard-coding a unique style and image for each element id.
I never got the classes data property to have any effect whatsoever on the background-image of a node. Perhaps there's a bug there.
Hopefully, this will help someone in the future because it was not obvious to me that background-opacity etc. made the entire node invisible. From the documentation, it sounded like it affected the node's background. Knowing that I was altering the background image for the node caused me quite a bit of confusion around nodes and backgrounds. I'm still quite fuzzy on all the layers and how they interact, but the above works and is better in my opinion than the image example given on the cytoscape site.
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 trying to fix something another developer did on this site: http://alamodecreamery.com/products-page/accessories/girls-atom/
If you hover over the sizes a waffle icon appears, however when the item is checked (radio button) the background disappears. I need a label:checked background to show the waffle. I found the CSS selector on line 1150 of wpsc-default.css and added a label:active for testing which works fine (aqua on active).
Can anyone figure out why the :checked background isnt working? Ive tried a few different things which all failed to work:
label + input[type="radio"]:checked {
background:pink !important;
}
input[type="radio"]:checked {
background:pink !important;
}
.wpsc_variation_forms label:checked {background-color: green !important;}
Thanks in advance!
What you are attempting cannot work. You have a structure in which the radio input is contained inside the label. The label is sized to match the waffle, and on hover changes its background. When the radio button is checked, the input gets the :checked state, not the label! And in CSS, right now, it is regrettably not possible to select an element based on a descendant's state. As such, it is not possible with pure CSS to change the appearance of the label based on a pseudoclass of one of its contained elements.
I would recommend adding a bit of Javascript which toggles a class on the label when the radio button is toggled, would be the easiest fix.
Techy sidenote: there have been multiple proposals in the past for 'parent selectors', and all have been shot down by the browser developers because it was unfeasible from a performance perspective due to the way the DOM and CSS are matched up. Nowadays the engines are so efficient the discussion has been restarted, but still in very preliminary stage. Don't expect anything before CSS4 surfaces.
label:checked is invalid. checked is for inputs only.
Something like
wpsc_variation_forms label + input:checked
might work better
The attached screenshot is from OS X/Firefox 3. Note that the center tab (an image) has a dotted line around it, apparently because it was the most-recently selected tab. Is there a way I can eliminate this dotted line in CSS or JavaScript? (Hmmm...the free image hosting service has reduced the size of the image. But if you could see it, you'd notice a dotted-line select area around the block.)
Screen Shot http://www.freeimagehosting.net/uploads/th.fadf78173b.png
You'll want to add the following line to your css:
a:active, a:focus { outline-style: none; -moz-outline-style:none; }
(Assuming your tabs are done using the a element, of course.)
[edit] On request from everyone else, for future viewers of this it should be noted that the outline is essential for keyboard-navigators as it designates where your selection is and, so, gives a hint to where your next 'tab' might go. Thus, it's inadvisable to remove this dotted-line selection. But it is still useful to know how you would do it, if you deem it necessary.
And as mentioned in a comment, if you are only dealing with FF > v1.5, feel free to leave out the -moz-outline-style:none;
In your onclick event, this.blur()
or, specifically set focus somewhere else.
For starters, try this
*,*:hover,*:focus,*:active { outline: 0px none; }
This will however decrease usability.
You'll want to selectively apply alternative effects where relevant to give people such as those whom navigate primarily with the TAB key have an idea of what currently has focus.
div.foo:active,
div.foo:focus,
div.foo:hover
{
/* Alternative Style */
}
You can start by looking at the :focus and :active pseudo classes, although you probably shouldn't be completely removing any formatting from these cases, since they are an invaluable usability aid.
using
*:focus {outline:0px;}
will remove styling for inputs and textareas when selected with the mouse. Make sure you append these styles with a border for these form items if you choose to remove all outlines on :focus.