I am trying to create a iOS style back button for my jQuery mobile based app here is what i have tried ..
HTML
Back
CSS
.ui-btn-left {
background: linear-gradient(#9fbfe7, #6e84a0) repeat scroll 0 0 #87a2c4;
border: #000000;
}
what i couldn't achieve is
making text color white
making triangle shaped button from left side
like this
here is the Fiddle http://jsfiddle.net/A6u9n/
Here is example of iOS Style “Back” Button in CSS.
http://writings.orangegnome.com/writes/ios-style-back-button-in-css/
Related
I was using Audacity with a GTK 3 theme I created. On some of the dialog boxes the background comes up as a solid black color, while the theme's background color is a light yellow. I noticed this happens only on some of the dialog boxes.
Below is an image of the Compressor dialog.
I want to know how to get the proper background color, as I checked some other themes with GTK Inspector and they render correctly.
The code for the gtk-widgets.css file is on this GitHub page.
Perhaps you can try:
window > box > widget > widget { background-color:yellow; }
I Implemented mat-spinner in my project, but it only has few configurable changes like Color, mode of spinning. I want to include Image Icon which is the Logo of a brand/Company inside the spinner, how can i achieve it ?
Below is the Stackblitz link:
https://stackblitz.com/angular/lmgppgejqxdv
It has mode and color change but how do i include any image to fit inside the progress spinner ?
you can access the background layer of the spinner using:
.mat-progress-spinner svg {
background: red;
}
Note however that the svg is subject to transforms, so the background may end up being rotated as well.
I changed color of buttons using css, but when I move the mouse over them, buttons change their color to the default for a moment.
"button:hover" and "button:active" didn't help.
I used both:
background-image: image(black);
background-color: black;
And now it works great.
The title says it all. How do you go about doing this? For example, editing the width of a file upload button results in this: http://i.imgur.com/jacnps2.png For comparison, here's an ordinary file upload button: http://i.imgur.com/tIy05HA.png
The red rectangle represents the area the button normally takes up. In addition, when you hover your cursor over that spot (except for where the red and blue rectangles overlap), your cursor will transform into a hand icon, indicating that something will happen when you click that area. However, nothing happens.
The blue rectangle represents what portion of the screen you can click (which is mostly invisible, and much smaller than usual) to make the file upload form appear.
Trying to edit the file upload button's height yields similar results, only vertically instead of horizontally.
For the sake of explaining what my goal is: I'd like to overly a transparent or invisible file upload button on top of user avatars on my website. So far I've pulled off the easy parts, making the file upload button transparent and overlaying it on top of a user's avatar, but I haven't figured out how to edit the usable dimensions of the file upload button. For a working example of this, if you have a facebook profile, go to your profile and hover your mouse over your avatar. The words "Update Profile Picture" will appear and you can click them to edit your avatar directly from your profile instead of having to go to a separate settings page.
You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.
There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.
As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.
See below:
http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Cross-browser custom styling for file upload button
I did it with an after element and an icon from FontAwesome
# your-page.html.erb
<div>
<label class="button-image">
<%= f.file_field :attachment, value: "", class: "active-storage-button" %>
</label>
</div>
# app/assets/stylesheets/your-page.scss
.button-image:hover::after {
content: "\f196";
font: normal normal normal 100px/1 FontAwesome;
color: #778899;
padding: 10%;
right: 10%;
position: relative;
}
.active-storage-button{
display: none;
}
# for hover effect
.button-image:hover::after {
color: #5a5a5a;
cursor: pointer;
}
I have made a round button and i have set a background image on it. I want it to display the other background button image while hover over it.
You can do that using style sheets:
QPushButton:hover { color: white }
See more about pseudo states here.