I am using JQuery themes in my html. ThemeRoller works correctly and applies right themes. However I want to change the default theme that it sets when Page loads. For example, I want to use the 'Start' theme when html loads. Can anybody please help?
You can use the "loadTheme" option like that:
$("#themeSwitcher").themeswitcher({
"loadTheme": "Start"
});
You need to download the generated CSS and images from the ThemeRoller and reference the CSS in your page.
As SLaks suggests, you need do the following:
Download a new theme (jquery theme downloader)
Unzip the files and put them into your website (south-street theme gets copied to: MyWebproject\Content\themes\south-street)
Make a reference in your html to the css:
<link href="Content/themes/south-street/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
Related
I have made my own stylesheet that I require to include on the Jenkins plugin.
<l:layout css="/plugin/myPlugin/css/jquery-ui.css">
<link rel="stylesheet" href="${rootURL}/plugin/myPlugin/jquery-ui.css" type="text/css" media="screen" />
Please advice me..
Thanks..
To link CSS files in Jelly files is deprecated, see jelly tags documentation:
This was originally added to allow plugins to load their stylesheets, but the use of thie
attribute is discouraged now. plugins should now do so by inserting <style> elements
and/or <script> elements in <l:header/> tag.
Please use inline css tags instead (code example).
Place your css file(s) under
/src/webapp/css
and reference them as ..
" href="${rootURL}/plugin//css/layout.css"
Using a <link> element with the $rootURL as noted above worked for me. The important thing that I noticed was to make sure to place the <link> element after <l:layout>. I had it right after the <j:jelly> tag originally and it wasn't able to render the ${rootURL}.
The <link> tag will be much cleaner than doing inline styling.
I have some jquery mobile pages with custom css but it takes only effect when i reload the page and not at first load.
The css file is called in all sites with:
<link rel="stylesheet" href="http://mobile.kerger-mg.de/rezepte-suche/stylesheet/style.css" />
Thanks in advance for any suggestions and your time.
You must load all css the first time, in other words all pages must have the same inclusions,
don't forget that jqm is based on ajax navigation...
try to link the page in question in this way:
<a href="PAGE_WITH_PROBLEM_CSS.html" rel="external">
in this way, the landing page (PAGE_WITH_PROBLEM_CSS.html) is reloaded.
:)
In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
I am loading jQuery UI as
google.load("jqueryui", "1.8.6");
from the Google CDN
And I want the theme UI Darkness to be associated with it.
Any other methods other than
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" />
Something like
google.load("jqueryui", "1.8.6","{theme: 'UI-Darkness'}");
So far google loader doesn't support this syntax for jqueryui, you can check the documentation here.
http://code.google.com/intl/zh-CN/apis/loader/#GoogleLoad
I think refer to the link in a tag is still the best way in your case.
Can anyone know the link for loading jquery-ui-1.7.2.custom.min from j query site like
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>.
what are all the .js files needed for jquery tab.
You may use google api to load jquery:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
You need to make sure that you include the tabs script with your custom build. To do this go to http://jqueryui.com/download and tick the 'tabs' checkbox.
This will out put a zip file containing images, css and js files.
Next, attach the custom jQuery UI file, aswell as the jQuery file and the relevant CSS files.
Then visit http://jqueryui.com/demos/tabs/ and check out the source for that demo (click 'view source'). It'll give you the mark up needed to create the tabs.