So it's detailed here on how to remove the padding on buttons by overriding the class on the page: Can the button padding be adjusted in Jquery Mobile?
But how do I take this:
.ui-btn-inner {
padding: 0;}
And selectively apply it to one button, ie:
<button data-icon="false" onclick="alert('clicked me')">Button Name</button>
Doing anything like this doesn't work:
<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>
Thoughts? Creative solutions?
Thanks
Just set a new class for that button and then change subclass as below.
HTML:
<a href"#" data-role="button" class="myClass">Text</a>
CSS:
.myClass .ui-btn-inner{
padding: 0px;
}
I think I have finally found a solution (been trying to figure it out for a while now)!
Use the 'cascading' part of CSS to help you. If your button uses theme 'a' for instance, you can apply the padding rules of .ui-btn-inner to only buttons with theme 'a'. Just prefix the class you are trying to change, with the themed property.
HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>
CSS:
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{
padding: 0px;
}
As you can see, this means you have to create the rule for each state of the button, otherwise the padding will return for the split second when you touch the button.
Just apply a different theme (such as 'b') to the buttons that should keep their padding. You can go totally nuts with buttons using this type of CSS inheritance.
You can have an unlimited number of themes. I go to theme roller and create a default theme for every letter of the alphabet. Then, just override them with CSS to my heart's content.
This was a big sticking point when I was trying to use jQuery Mobile for a work project. They already had a UI design and I was tasked with making jQuery Mobile match it exactly.
I just wanted the icon to show with no border or background so I used your example, but the icon was shifted up so I used this to reposition it:
.ui-btn-up-mytheme .ui-btn-inner,
.ui-btn-hover-mytheme .ui-btn-inner,
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}
The html markup:
<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
data-theme="mytheme" data-shadow="false" ></a>
Related
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
this is my first time using glyphs, but i know this much they are text, and can be styled just like any other text.
This is the reason I'm confused to why my glyphs icon is not changing colour.
I want it to change the colour from black(default) to white. This is my code:
HTML
<li><span class="glyphicon glyphicon-cog"></span><a class="lolo" href="Franchise-Details.php"><b>Admin Panel</b></a></li>
CSS
.glyphicon glyphicon-cog{
color: #fff;
margin-right: 2px;
}
where have a gone wrong? any help would be appreciated
It should be
.glyphicon.glyphicon-cog{
color: #fff;
margin-right: 2px;
}
You have missed a . before the glyphicon-cog and also the space between the two classes is not required.
As the space indicates that glyphicon class named element is parent and glyphicon-cog named element is under this parent, which is not the case in your scenario.
Since you are targeting the same element with two classes the syntax should be
.classOne.classTwo
Try not to override the colors of of your glyphs. You may need to use a different color for the same glyph elsewhere. Instead make a CSS class like:
.white
{ color: #fff; }
-and keep the margins to your "glyphicon" class, then reserve the "glyphicon-cog" class only for the data (before content *unicode) as this saves file-size because you do not need to define margins for every single glyph, only in the font-class: "glyphicon" -if required.
Then simply use in HTML as:
<span class="glyphicon glyphicon-cog white"></span>
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I've been instructed to make links on a website have a different colour underline than the font colour. It all seemed quite easy, using border-bottom as below, except that linked images are now also underlined.
Is there a way, without using JS, to stop happening?
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
An example - hovering over the below image now adds the border-bottom CSS style to it, which I don't want -
<a title="Dyne Drewett" href="http://test.dynedrewett.com">
<img class="attachment-full" width="202" height="78" alt="Dyne Drewett Solicitors" src="http://test.example.com/Website-Header.png">
</a>
The only static way to do this would be to use a class on image links like:
<a href='http://whatever.url.here/' class='imglink'>
<img src='img/image.png' alt='Alt text'>
</a>
Then apply a CSS style to this class:
a.imglink:hover {
border-bottom: 0px solid;
}
You'd have to declare this AFTER the other a:hover CSS class.
Technically, you cannot set a style on an element based on what elements it contains. You cannot make the border of an a element depend on the presence of an img element inside (and this is what you are dealing with). Using classes would help, but from the comments, it seems that this is out of the question.
There’s a workaround: place each image at the bottom of the containing element (not on the baseline as per defaults), and shift it down one pixel, or whatever the border width might be. This way, the image will cover the bottom border, provided that the image has no transparency. CSS code:
a img {
vertical-align: bottom;
position: relative;
top: 1px;
}
This slightly changes the position of all images, so it might affect the overall layout unless you take precautions.
I'd suggest adding a class to the link, so you can do
a.imglink:hover{
border:0;
}
Alternatively, if you can't control that class, you can try adding a negative margin to your image to ensure the border doesn't show:
a img{
margin:0 0 -1px 0;
}
That -1px might need adjusting based on your other rules
Here's a fiddle to show the negative margin solution: http://jsfiddle.net/QRXGe/
Your solution will require you adding an additional class name to links that wrap images (or anything where the border should be removed). There's no way to sort of "reverse select" unless you want to employ a JavaScript technique.
A jQuery technique would be something like this:
$('a > img').parent().css('border-bottom', 'none');
That will remove a "border-bottom" style from all anchor tags that have image as a direct descendant. But you'll need it on every page, and every page is getting parsed by this script, so it's a little added overhead on each page.
Otherwise, if you have access to the HTML, creating a CSS class to target these specific links such as:
a.img-link{ border-bottom:none; }
And apply it to any link that's around an image such as:
<img src="#" alt="" />
I hope that helps!
Another way to achieve this is to simply make the images in links relative and then offset the bottom to cover the border. 5px seems to do it http://jsfiddle.net/ECuwD/
a{
color: #6A737B;
text-decoration: none;
}
a:hover{
border-bottom: 1px solid #C60B46;
text-decoration: none;
}
a img {
position:relative;
bottom: -5px;
}
a:hover img {
border-bottom:none;
}
or perhaps...
a:hover img.attachment-full {
border-bottom:none;
}
Apparently, what you want is a different behavior for the same markup (<a>) based on its content.
Sadly, there is no real way to do this with pure CSS, as this language is not programming language and therefore lacks the condition structures, such as if.
That does not mean that there is no solution! Here is a couple of things you can do:
Declare (say) in your HTML that the element (<a>) should be handled differently (with classes, in your case either <a class="text"> or <a class='image'>.
Use JavaScript to change your style dynamically, which means based on conditions, such as content for instance. In your case it would probably be something like:
function onLoad() {
for (var element in document.body) {
// look for links
// if this is a link:
// look for image inside link
// if there is one:
// remove the border
}
}
I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.
The effect should be like when you hover over the anchors in the navbar here
How is this done?
You use the CSS pseudo-class :hover to set a different background:
.menulink:hover { background-image: url('alternative_sprite.png'); }
Use jQuery toggleClass() on hover to change the icon to white.
See this jsfiddle.
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#"><div class="btn btn-primary">
<i class="glyphicon glyphicon-print"></i> Click</div></a>
<br/>
Script:
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});
just switch over the glyphicons image?
(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
Actually, the AngularJS website uses a webfont to display icons:
font-family: 'FontAwesome';
And they insert the font-icon using CSS pseudo-class :before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
Which it is a brilliant solution, if you resolve to create your own icon web font.
Or even better, you can use Font-Awesome.
Use CSS psuedo-class :hover..
.menulink:hover { background-image: url('myimage.png'); }
Some of the answer above are not working and give a background image with all glyphicons at ones.
This works form me. Notice that I have changed the color of the icons to fits my needs.
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:
Crate an $scope object that contains the name of the icon class your would like to set by default.
$scope.myClass = "glyphicon glyphicon-ok"
Add ng-class directive and get the class name from $scope.MyClass, add ng-mouseover and ng-mouseleave directives and change $scope.MyClass value
<span
ng-class="myClass"
ng-mouseover="myClass = 'glyphicon glyphicon-remove'"
ng-mouseleave="myClass = 'glyphicon glyphicon-ok'">
</span>