I'm not good at styling so I will ask straight ahead:
how do I draw a border over the whole web application's UI composed of nested views (ion-nav-view)?
My initial try was to set a class on a body:
<body ng-class="{'noConnection': hiresUnavail}" ng-app="app" ng-controller="MainCtrl">
this is being produced now:
now, you can see a top-left corner of the web browser. The orange line is the desired border defined in the body tag as you can see upper. So what should I do in order to see this border all round the borders even on the top of the nested ng-views?
Thanks!
Related
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
In the Spark BorderContainer component the border sides and corner radius styles were not copied over from the halo component set (see here).
Specifically:
borderSides (left, top, bottom, right)
cornerRadius(TL/TR/BL/BR)
borderThickness(Left/Right/Top/Bottom) * optional
backgroundAttachment (fixed, scroll) * optional
I've been trying to add them manually but I'm having some difficulty.
I've brought over some code from the HaloBorder.as skin and it is sortof working except it is appearing behind the background fill.
It's a lot of code so I pasted it here.
BTW That code was my first approach. But it looks like I could use the insetPath that is already there to draw border. That would be better since it allows me to set all the stroke properties but I don't know how to write path data so I'd have to learn that as well. But at this point I'd be happy to get anything working.
Update:
I found a class that has some methods for generating curved border path data. Look in spark/skins/spark/TabBarButtonSkin.mxml. You can see the code here, in the createPathData() method.
i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.
In the following example (from Mozilla's site):
<div style="color:darkred"> The color of this text is the same as the one of the line: <div style="background:currentcolor; height:1px"></div> Some more text. </div>
Please take a look at this corresponding jsfiddle link.
If I remove "background:currentColor" from the style, the line it draws disappears. How does a style like this result in the addition of a line?
Thanks.
Because the div has a height of one pixel (1px), which means it is presented as a line - namely because there is no content of x-pixels height within it, it sizes itself appropriately (if no height was specified then it would collapse to 0). Therefore, because the div has a background colour (which doesn't match the colour on which it is rendered (which, if the colours did match, would give the illusion of invisibility)) you see one pixel height line of that colour.
Think of crushing a box down, or folding paper: you couldn't make it entirely disappear (out of existence, or current form, at least not easily) and, upon bringing yourself horizontal to the plane on which it sat, would still see it (or its colour/shade of, etc.)
Of course, concentrating on only that one not a solution wouldn't be too helpful, although others have come to your aid: use a span element to 'group' text within text, these are inline by default and by rights should only be output if there is text to go in one - this forgets for a moment that you explicitly specify a height value at all, which is what makes me wonder about the whole scenario.
because Div is a block element.
<div style="color:darkred"> The color of this text is the same as the one of the line: <span style="background:currentcolor; height:1px"></span> Some more text. </div>
This really bugs me - a lot.
After wading through google maps v3 generated client side code in firebug, I'm about ready to drive down the street and give some of these engineers a piece of my mind... arrrgh :P
The infowWindow class produces HTML that personally I would think is simply nuts. maybe someone can help me make sense of it.
The infowWindow HTML structure is like this:
#map_canvas > div > div > div > div > div // 5 levels of elements,
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner
// now comes fun stuff for the speech bubble arrow:
div
div
div
div
div
div
div
div
div
div
// the 10 divs above are stacked diagonally with odd sizes to make this arrow.
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be
able to grab the map even right next to the arrow. Think about this: do users
really need to be able to not grab the arrow? if grabbing the arrow causes map pan,
as is the case for the shadow images, would that really be a problem?
div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container
WOW - thats nuts!
notice there is no real semantic structure, and - gosh, dare I have such an
assumption - no class names anywhere, nothing. I figured maybe they have some
kind of 9-slice box going on and then produce the arrow separately; I mean,
the image sprite in iw3.png sure isn't going to be the problem here.
I dearly hope someone who has an effect on this api comes across this and
hopefully google will eventually find a way to solve this such that custom
infoWindow visuals are as straightforward as markers.
Thanks for tuning in! happy commenting.
meanwhile I shall use a hack to get to these crazy divs and make them do my bidding.
earlier I commented on some other post and I think it shouldn't be too much to ask for a method in the API that lets you use custom UI without resorting to a near-duplication of the whole window object as is currently necessary (see google extension classes v3).
google.maps.infoWindow.setStyle({
'topleft' : {
'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
'width' : '10px',
'height' : '10px'
},
'topRight' : {
...etc...
}
...etc...
})
Have you tried InfoBox?
http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html
or InfoBubble?
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/
They both give you a bit more control over the appearance of infowindows, while still abstracting some of the complicated parts.
The lack of classes on elements is a (good) design decision for an API. It eliminates the potential for clashes with user defined classes.
After much trial and eror I decided the best way to resolve this is to use OverlayView class and simply custom build a container. Well, "simply" is an understatement, but it works. And now I have full control over layout and functionality.
You try styling with CSS? The below example shows this. This is the most straight forward way to change the UI.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows