I created a new theme with the query theme roller. However, I can't seem to figure out how it is setting the checkbox color when it is not selected.
If you look closely you can see that the box is there with a slightly darker color. The theme roller or JQM itself, seems to create a darker or lighter shade than the main area. I've tried searching for that color in the downloaded theme, looked at the applied styles, etc but I can't figure out how this gets set or how I can change it to be either a little darker or a little lighter.
Here is the theme roller link if you want to download the them for yourself:
http://themeroller.jquerymobile.com/?ver=1.4.2&style_id=20140322-33
If you set the following it should fix your issue:
.ui-btn.ui-checkbox-off:after{
background:#fff;
opacity:1;
}
By default the opacity was was on:
.ui-checkbox-off:after, .ui-btn.ui-radio-off:after
And the color was set on:
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after
Hope that helps.
Related
Steps done to encounter this issue
I have an element with a blue background, then if I hover it, the background color turns black.
When I Copy the text inside of that element, and paste it also on that element, it creates another span with a background color of black which is the background color when hovering.
Is there a way not to include that hover style when pasting?
I've read the documentation but it doesn't give any help about this, or I just missed or didn't understand all the documentation
I have a situation where a user can select different themes. The problem is with the date-picker. The repository for this plugin is here:
GitHub: uxsolutions bootstrap datepicker
The problem is illustrated in the below image:
I set the foreground and background colors on the body tag using javascript. The values are sent from the server. So when the colors are white on black, most of the datepicker window is blank. Now I did come up with a partial solution using a click event on the date field. That solution basically looks for any DIVs that's using the datepicker css class and sets the colors to the theme colors. This is not an ideal solution.
What I would like to do is override the CSS color properties in the CSS classes themselves, but from my reading on here, that doesn't seem to be possible. I dug through the code and it uses HTML templates to generate the different views. It generates everything at once and then hides/shows different DIV frames based on user input. Based on the fact that it's using a find function to locate where to place things, I can't really modify anything. Short of a rewrite for this plugin to accept color themes, Is there a solution to this problem that I am not seeing?
You can absolutely override classes for that widget. I had a related issue where changing a color on my nav dropdown made the datetimepicker background dark, so I added this to a stylesheet that loads after all of the boostrap styles.
.bootstrap-datetimepicker-widget { background-color: #fff !important; }
In your situation looks like the color: rule is the one you need to change instead of background-color:
Make sure of a couple things:
use !important so that any javascript that modifies things after the styles are loaded will not overwrite it
make sure the level of specificity is higher than the current default
(https://www.w3schools.com/css/css_specificity.asp in case you need a refresher on specificity)
I'm currently trying to implement kind of a dark mode and I'm struggling with this:
Navbar when dark mode is disabled
Navbar when dark mode is enabled
As you can see, when dark mode is disabled .nav-item is hovered and text can be seen, but when dark mode is enabled, it's almost impossible to see due to the color.
This is how I'm toggling class to enable and disable dark mode
Thing is I can't put this:
.nav-item:not(.is-active):hover
as a className in order to toggle between .nav-item:not(.is-active):hover with a specific color for light mode and .nav-item:not(.is-active):hover with a different color (let's say white) for dark mode.
I hope you can help me. Thanks in advance! :)
When you toggle the dark-mode class on for nav-item, you can use the .dark-mode.nav-item:not(.is-active):hover CSS selector. Creating a style using this selector will allow you to target nav-items with the dark-mode class. In that style you can define a different color for hover while in dark mode.
For more info about what kind of CSS selectors are available, check this page from W3 schools.
I'm using flexnav for a top menu bar and I can't seem to change the color of anything. I'd like to have a different background color, but no matter what I change in the css the appearance of the flexnav bar stays the same. It's a pretty generic grey-black with a darker black for hover items. I've changed the color setting for the menu buttons, the border, etc. but nothing seems to make a difference.
Is there some js that is overwriting the css maybe? I can't find the problem.
I create a css button with some tutorial jsfiddle.net/EC2Eh/12/ but this is based on
jquery mobile. How to create a similar button just with javascript that will work like that button, and also where I can change a color of button and dimension.
Here on this jsfiddle.net/EC2Eh/12/ I can't change any color, dimension and so. So can you please tell me is there some tutotial to build this button bar (radio button) that will work just like that but where I can change all things.
Thanksa lot!
and sorry abut my english is not very well but I;m leasen hard.
just 3 steps you have to follow:
take 2 divs
adjust height ,width
give the divs rounded border
change color on MouseHover event and onClick event
Download firebug for firefox, right click on the element in the fiddle and copy out all the css for that element and apply it to your button.