Customize JQuery Mobile iOS Theme - css

I found the JQuery Mobile iOS inspired theme here:https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme. While I admire it, ideally I would like to customize it. My question is, can I modify this using the JQuery Mobile Theme Roller (http://jquerymobile.com/themeroller/). Or, do I need to do it the hard way? I couldn't figure out how to customize it via the themeroller. However, i've not tried to import a theme previously. I was hoping someone may have some tips for me.
Thank you

Probably not directly in the ThemeRoller, no. The ThemeRoller allows you to import themes it produced to customize it, but copying & pasting the CSS from https://raw.github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme/master/ios_inspired/styles.css is not recognized. Looks like you may have to do it the old fashioned way.

Related

Same styles to Bootstrap Documentation site

I want to make a demo of some sort online study book. I am trying to use bootstrap as a core for my styles but it feels like it's not enough.
What I really like is a bootstrap site itself: getbootstrap.com.
Both of these sidebars with navigation and this fancy header. Plus they have nicer styles for typography:
So I have two question:
1) Am I allowed to use their styles?
2) If so what will be the right way to get those styles? I can see two extra files in the head of the site but I hope that maybe there is a repository or something.
P.S. any other advises are welcome too. Maybe you can recommend framework for online books/documentation or something?
Thanks.
UPD: For those who vote negatively on this question could you please explain why?
I'm not sure if you're directly allowed to use their styles. However, you could always legally obtain a similar template such as
https://guidebook.webuildthemes.com/html/docs/layout-2.html
Alternatively, there are plenty of other free options designed to build documentations and have them customized to suit your design needs. A few of them are listed below:
https://docusaurus.io/docs/en/installation
https://docsify.js.org/#/
https://daux.io/
https://www.mkdocs.org/

Twigmo custom style files

did anyone ever customize the Twigmo addon basic theme for cs-cart? I am trying to write custom css files for font size and color. What I tried:
Using the visual Editor: after working for like 2 hours changing the styles, I tried saving and apparently my current subscription doesn't allow me to do custom files using visual editor
I tried searching for other solutions: fell on this twigmo skin editing which basically tells me to create a custom css file called custom{theme-name}.css. I did but i still can't figure out what classes the twigmo for what. Does anyone know where i can find this? i am also posting a question on the forum to see if they can help me.
Thank-you in advance. hope my question is clear enough.
The free "Starter" Twigmo subscription plan doesn't provide an ability to customize CSS. You have to subscribe for any paid plan. In this case the visual editor will be available for you. Also you will be able to write your custom CSS code in the visual editor.
Regarding your second solution - it is for old version and doesn't work for the Twigmo 3.x.
Hovewer you can modify the design/themes/[your_theme]/templates/addons/twigmo/mobile_index.tpl file. You can add your CSS code there. It is not the most convenient way, but it is free.

What's the best way to go about stylizing a Sencha Touch app?

I'm a newbie, and I designed an App with jQuery Mobile, but those in power told me that I should redo it using Sencha Touch. I'm having a little difficulty understanding Sencha Touch. Should I just use my developer tools and change their large CSS file? Should I add html and classes to each .js page cls: 'whatev', and than add my css. Should I mess with the SCSS file?
I understand that my question is an amateurish one, but I would really appreciate any direction before I begin. Thanks.
There's a theming guide that covers a lot of the basics: http://docs.sencha.com/touch/2-1/#!/guide/theming
You may also want to refer this very informative post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

jQuery UI Autocomplete with FCBKcomplete/AutoSuggest/TokenInput styling

I am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....

Using CSS to style a Sencha Touch form - how do I find the elements?

I'm starting out with Sencha Touch, and I am getting a pretty decent handle on the Javascript elements of this powerful tool. But I've recently come to the CSS portion, and I'm afraid I can't figure out how to style it accurately.
I can guess at some of the elements, and I know some of the others because I created them. But I can't look at the generated source or examine the DOM, not even using FireMobileSimulator or some such plug-in. So when I, say, try to style my form elements and I find that I can't get the labels and input fields to float, for example, I have no way to diagnose exactly why it isn't working.
Does anybody know? Thanks!
SS
Hey StormShadow.
To edit the style of Sencha components you shuld learn SASS, in fact, Sencha Touch, exactlly like the new Ext 4 framework, uses SASS and COMPASS to create theyre themes and you can do the same creating your own. I know that at the beginning you could be "scared" about to use these new technologies, but I assure you that you will able to change the whole application by editing a simple variable.
However, if you want to miss this great opportunity, I suggest you to take a look at this file
"resources\themes\stylesheets\sencha-touch\default\widgets_form.scss" inside your Sencha Touch root, to have an idea on how the component are created and witch CSS classes are used for Form components. Then you can try to edit them by hacking the Sencha Touuch theme CSS.
But I warn you: This is not the Sencha way to do that.
if you want to be a great Sencha Touch developer, you have to learn SASS.
It's really easy and it really worths to be learned!
Hope this helps.
you can also use less, rather than compass to generate your css (after all it's just CSS!)
LESS can be implemented clientside or serverside so you don't have to go near Ruby.
Less Website

Resources