I want to change the default zoom-in / zoom-out icons to something like in the Cirlce. Sorry I can't post the picture here so I can't show you guys the image.
Can anyone sugguest me how to achieve this?
AJ
You can easily override the default css style like:
.ol-control button{
background-color: rgba(40, 40, 40, 0.85) !important;
}
.ol-control button:hover{
background-color: rgba(40, 40, 40, 1) !important;
}
UPDATE
This is a CSS task, so you can play as your imagination allows, so it's up to you:
.ol-control button{
border-radius: 50% !important;
}
.ol-control button:hover{
transform: scale(1.5);
}
Related
If you click this link it takes you to a few examples on their page.
https://ng.ant.design/components/button/en
I am able to access the buttons and change the color but not the actual blue border. I have tried :active, :hover, :focus, etc..
This is how I access the button for some custom css
.ant-btn-circle {
background-color: $theme-foreground !important;
color: rgb(var(--MainColor)) !important;
}
.ant-btn-circle:focus {
background-color: rgb(var(--MainColor)) !important;
color: $theme-foreground !important;
outline: 0 !important;
}
The outline portion doesn't seem to work... Any tips?
I see something like this that has the blue color but I dont know what it is. --antd-wave-shadow-color
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
--antd-wave-shadow-color: #1890ff;
}
Only solution I found so far is creating a theme.less file in your src and adding this:
#import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
#primary-color: #6D6E70;
So I guess it is the primary color. Would be nice to set it custom. In the css.
I managed to resolve this by setting the transition period for the button's border-color property to 0ms.
So using your example:
.ant-btn-circle {
transition: border-color 0ms;
}
Got an issue on pages like this where the left border of my checkboxes appear cut off. Looks really unprofessional. Only seems to happen on iOS. I thought I could just add some padding to the div (or margin) but not the case. Is this common?
Try this.
input[type="checkbox"], input[type="radio"] {
-webkit-transform: translate(0px); /*Earlier than iOS 9.0*/
transform: translate(0px);
}
I think the problem is your framework (WooCommerce?) or plugin/theme for it. It has strange CSS code like this:
.single-product div.product .images {
width: 41.1764705882%;
float: left;
margin-right: 5.8823529412%;
margin-bottom: 3.631em
}
.single-product div.product .summary {
width: 52.9411764706%;
float: right;
margin-right: 0;
margin-bottom: 3.631em
}
I don't know why these numbers so fractional, but in this case your checkbox looks OK:
.single-product div.product .summary {
width: 52%;
...
}
I advice you to figure out why your framework/plugin/theme has so fractional numbers, but if you don't want/can't, you could use workaround with margin-left: 1px for your checkbox.
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.
I build my first phonegap Jquery Appl
Im changing my icon using this class
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
This custom icon is for a list view , and i try to remove the round grey background load
Also my picture is a bit big for the shape
I was playing with the .ui-icon but doesnt work
Cant find the class
I just wanna my custom arrow picture full size on a white background list no round no circle box shape
Maybe there is an attribute or via css to make that
thanks
If you are using jQuery v 1.4.0 + then you just need to add the class .ui-nodisc-icon to your link element to remove that annoying circle. You will not need to edit any css or write any overrides.
Late to the party here, but a simple answer is to add
background-color: transparent;
box-shadow: none;
to your custom class name, so:
.ui-icon-myapp-email {
background-color: transparent;
box-shadow: none;
}
is all you need.
With JQuery Mobile 1.3, now all you have to do is add the class "ui-nodisc-icon", no need to mess around with the CSS.
from JQuery Website:
"If you don’t need the dark circle behind the icons, simply add the ui-nodisc-icon to the element or its container to remove the icon background."
This should work.
.ui-icon-myapp-email {
background:transparent; /* or none */
background-image: url("app-icon-email.png");
/* The following border radius rules will override the circle around your icon */
-moz-border-radius: 0px;
-webkit-border-radius:0px;
border-radius:0px;
}
/* To fix the size issue override the .ui-icon height */
.ui-icon{
width:14px;
height:20px;
}
Overrides the icon disc color to white.
.ui-icon,
.ui-icon-searchfield:after {
background: #fff /*{global-icon-color}*/;
background: rgba(255,255,255,1) /*{global-icon-disc}*/;
background-image: url(images/icons-18-white.png) /*{global-icon-set}*/;
background-repeat: no-repeat;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Icon size is specified in ui-icon class which defaults to 18px.
.ui-icon {
width: 19px;
height: 19px;
}
For those of you looking to have just an icon for the button - I found this article to be very useful! I followed the "Reset the button theme" and "Icon-only buttons" sections to get the effect that I needed.
http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/
I solved this issue, using:
background-color:transparent;
if you want to add color in background you can use:
background: url(yourimage.png) repeat;
I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.