Practially, i have a css file with some classes ,id's and html selectors (index.css) and the kendo.mobile.all.min.css.
I've tried putting it before and after to no avail.
My classes won't work , for example:
<div data-role="view" data-title="main-menu" id="main-menu" data-persist="true" class="body" data-transition="overlay:up" >
<h1>Text text</h1>
<h2>Another</h2>
<div>
This code, when used only with my css and the kendo.common.min.css and kendo.default.min.css files, shows the proper styling with background, when used , in any combination with kendo.mobile.all.min.css all i see is the plain html.
I'm a begginer (still in university) , is there something implicit about this that escapes me? I also tried jquery mobile but quit that because it overrided all my css and got blank html.
Also anyone know how can i change the default android skin from android-dark to android-light without forcing the app to run on one platform? (as in still adapt to different platforms)?
My include order:
<script type="text/javascript" src="cordova.js"></script>
<script src="js/load.unload.js"></script>
<script src="js/hangman.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<!-- audio css-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/kendo.ui.core.min.js"></script>
<script src="js/kendo.mobile.listview.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- audio js sources-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/main.js"></script>
you can try adding the !important property to your css to see if that works.
like this:
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
}
Related
This is my first attempt at writing some LESS css code and I can't seem to get it to compile. I'm sure I'll be missing something simple but I can seem to find what it is.
My Styles are declared as follows:
<!--Styles & JS-->
<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
And my LESS file looks like this:
//Theme Colours
#headingcolor: #212d43;
#accentcolor: #005bc4;
#textcolor: #FFF;
#footercolor: #0856a1;
//Theme Fonts
#font: 'Sniglet', cursive;
//Theme Sizes (1980)
#mainfont: 12px;
#h1: #mainfont + 6;
#h2: #mainfont - 1;
#footerlinks: #mainfont - 2;
//Styles
header {
background: #headingcolor;
color: #textcolor;
font: #font #mainfont;
padding:10px 36px 15px 36px;
}
Try to load your stylesheet before the js. With your theme.less, the following code is working:
<body>
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<header></header>
</body>
If everything is working, you should find in your browser console some messages like:
less.min.js:13 rendered http://localhost:8000/theme.less successfully.
less.min.js:13 css for http://localhost:8000/theme.less generated in 19ms
less.min.js:13 less has finished. css generated in 20ms
I am using the bootstrap switcher:
http://www.bootstrap-switch.org/examples.html
And I would like to set the label width to 0 because I only want to see ON and OFF, not the white label between. But if I set label width to 0 there is still some pixel of the white label visible. Do you know a trick to change this? Happy about any help!
<input id="switch-labelWidth" type="checkbox" data-label-width="0">
UPDATE:
<link href="http://www.bootstrap-switch.org/docs/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/docs/css/highlight.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<link href="http://www.bootstrap-switch.org/docs/css/main.css" rel="stylesheet">
<input id="switch-labelWidth" type="checkbox" data-label-width="100">
<script src="http://www.bootstrap-switch.org/docs/js/jquery.min.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/bootstrap.min.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/highlight.js"></script>
<script src="http://www.bootstrap-switch.org/dist/js/bootstrap-switch.js"></script>
<script src="http://www.bootstrap-switch.org/docs/js/main.js"></script>
I don't think you can do it using plugin options, but you could do it using some CSS tricks:
.bootstrap-switch-label {
width: 0px ;
padding: 0px ;
}
.bootstrap-switch-wrapper {
width: 55px ; // You may need to change this if you do not use the "normal" size
}
I made an iframe on the right side of the main page/parent page and added some pictures, these are working with Fancybox.
Pictures are not showing their preview out of the iframe. I need the preview in full screen. Need to help in settings.
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<head>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="http://www.ntzsportsonline.com/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ntzsportsonline.com/source/jquery.fancybox.css" media="screen" />
<style> .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; } </style>
<iframe src="http://www.ntzsportsonline.com/advertisements.htm" width="335" height="629" name="Advertisements" border="0" frameborder="0" scrolling="no" target="_blank">
Technical Problem</iframe>
I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css
.myInvalid {
border: 5px solid red;
}
I have added that file to my index.html and the file gets loaded but when I write
<input type="text" class="myInvalid"/> there isn't any border around my input.
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ui-bootstrap-0.4.0.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
<link href="Content/css/my.css" type="text/css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div data-ng-view=""></div>
</div>
<input type="text" class="myInvalid"/>
</body>
</html>
If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?
You have to make sure that your selector is more specific than the bootstrap one,
Instead of .myInvalid use input[type='text'].myInvalid
Check out this answer for more about selector priority.
This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:
.myInvalid {
border: 5px solid red !important;
}
I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.
You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.
I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.