How to add themeroller custom theme to my website? - jquery-mobile

I have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?

When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page

Related

How to use PhpStorm to autocomlete style sheets

I'm using PhpStorm for a Bootstrap project.
Is there any way to make PhpStorm autocomplete get and predict CSS classes from external file without linking this file to the edited file?
Or any way to select stylesheet file and make PhpStorm use its' classes inside whole project without linking this CSS file to the edited file?
In HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial via <link> or <style> tag. See https://youtrack.jetbrains.com/issue/WEB-2223 and linked tickets.
Vuejs templates will be treated differently since 2017.2 - see https://youtrack.jetbrains.com/issue/WEB-25767

Which files to use out of the many included in JQuery mobile download

I have not been able to get an explanation of which files are needed in a JQuery Mobile Web site. The stackoverflow documentation on JQuery Mobile shows that there is one file for css and one file for js:
jquery.mobile-1.4.5.min.css
jquery.mobile-1.4.5.min.js
However, downloading the JQuery Mobile 1.4.5 package one ends up with many more. All files that have ".min" appended to the name of the asset, is a minimized version.
The standard download includes one js (the one mentioned above). That is required, as well as JQuery itself. At this date, the latest jQuery that is compatible with jQuery Mobile 1.4.5:
jquery-2.2.4.js
(correct me if that is not true)
For css files standard download includes:
jquery.mobile-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery.mobile.theme-1.4.5.css
jquery.mobile.external-png-1.4.5.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.inline-png-1.4.5.css
jquery.mobile.inline-svg-1.4.5.css
It appears to me that the first file contains all the rest. So that one can choose to include all at once with one file. The others, I guess, would be used if less code is wanted in a streamlined version of JQuery Mobile. However if one does not use jquery.mobile.css, which are needed in HTML at the top of the page?
If one uses ThemeRoller, jquery.mobile.theme.css becomes MySITE.css (whatever name was selected during the export process in ThemeRoller). If one uses a custom theme, then that theme css is needed, along with jquery.mobile.structure.css.
If one includes jquery.mobile.icons.css, does that in turn include in the external-png, external-svg, and inline-png files?
And what is "jquery.mobile-1.4.5.min.map" for and when is it needed?
That would all be good information for the documentation in stackoverflow.
I created a custom theme (mysite.css) in ThemeRoller so I include the following in HTML (in the appropriate link of script tag):
mysite.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery-2.2.4.min.js
jquery.mobile-1.4.5.js
Is that correct?

Easy Way to Change jQuery UI Theme?

Is there an easy way to change the theme of the jQuery UI by replacing certain files? It seems like I have to keep downloading the entire jQuery UI every time I want to change the theme.
You can build your own theme at http://jqueryui.com/themeroller/.
once you build your theme you will have link both in address bar that you can bookmark and
in your css file jquery-ui-1.8.6.custom.css that you download:
http://jqueryui.com/themeroller/#ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-ser...
for each modification you can use these link instead of start from beginning.
EDIT
by using totalcommander compare tool or winmerge, you just do syncronize existing jquery ui files and the new jquery ui files, if you build new one
The only thing you need to change is the stylesheet and the images.
Referring to this answer, you can find ThemeRoller edit link in your css file. This url contains whole theme settings and this is the best way how migrate/upgrade it.

jqGrid without jQueryUI?

I can't find a clear answer on this. Is it possible to use JQGrid without using jQueryUI on my website?
According to the install.txt:
In order to use jqGrid 3.5, first a UI
theme css file should be loaded.
Download the desired theme (or build a
custom one) from jQueryUI site
(www.jqueryui.com) and point in your
link tag in head section the path to
the theme css
via http://www.trirand.com/blog/?page_id=6

problem with panel in ui layout

I am using a simple layout demo in my rails3 application
simple layout demo
in this demo there are 5 panel north,south,east,west,center
when I load my project this all panel show in each and every page.
instead of I want to some specific panel in different different page
give some idea how can i do that
Is the code from the simple layout demo all in your /app/views/layouts/application.html.rb? If so, rails will render everything from that file in every view. Since the jQuery code that does all of the stuff in that demo is in that same file, there may be no easy way to make that work with rails. The only thing I could think to do would be to have different .js files for different pages. each of these separate files would have jQuery code that creates the layout for that page, and is linked to that page using content_for and javascript_include_tag. I'm writing an app that uses jQuery UI and this is how I've had to do it. I created sub folders in my /public/javascripts directory that I named after my models to make it easier to keep all the .js files sorted.

Resources