I've seen the new navbar control in winJs 2.0 for windows 8.1, is fantastic an simple.
But how did they develop the weather app navbar in windows 8? I mean the nice big squared buttons instead of the small round ones?
The only way I found is to have an appbar and don't use any AppBarCommands (because I can't find a way to change the shape of those) but only divs and do all the styling manually.
Is that the only solution or is it possible to square the circle?
I found it myself in the end, changing those classes can change entirely the style of the AppBarCommand:
CSS class Description
win-command Styles the entire AppBarCommand.
win-commandicon Styles the icon box for the AppBarCommand.
win-commandimage Styles the image for the AppBarCommand.
win-commandring Styles the icon ring for the AppBarCommand.
win-label Styles the label for the AppBarCommand.
for example to square the circle:
.win-appbar .win-commandring
{
border-radius: 0;
}
.win-appbar:hover .win-commandring
{
border-radius: 0;
}
It's a hard job to ovverride all the default behaviour but it can be done.
Have a look at this for an example of the main styles: http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx
Related
I want to set background color of whole app or a single background color
but what happened if i use div , different device take different height that's why bottom side not cover up and i am unable to set ion content background.
Add below code to your app.scss file :
html, body, ion-app, ion-content, ion-page, ion-view, .nav-decor {
background-color: #yourColor !important;
}
Bro u can use in this case i have a stylesheet global with primary color variable
I am using Apexcharts with the vue wrapper in my application, There is nothing in the documentation that allows me to edit the tool-tips on the cross-hairs. I would like to edit how it looks as the white box is not working with the design of the page. any help would be much appreciated. thank you
You can use CSS to customize the X-axis tooltip appearance.
.apexcharts-xaxistooltip {
background: #1B213B;
color: #fff;
}
Currently, there is no option to set x-axis tooltip colors in JS. Might be provided in the next releases.
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
If I make a TreePanel collapsible, the tool icons are up and down double arrows.
In an accordion, they switch to being +/-.
How can I use the double arrows for the accordion?
(version 4.1.1)
OK, I found an answer:
/* Undo the accordion's bizarre switch to +/- */
.x-accordion-hd .x-tool-expand-top,
.x-accordion-hd .x-tool-collapse-top {
background-position: 0 -210px;
}
.x-accordion-hd .x-tool-expand-bottom,
.x-accordion-hd .x-tool-collapse-bottom {
background-position: 0 -195px;
}
For reasons known to Sencha's designers, the accordion is always styled with +/-. The above fixes it. I'm sure that this is fragile and should be replaced by something done with their theming CSS compiler.