I am working on a project that already has begun being developed. ON some page, there is some textarea and a text-editor using gwt, from which I know nothing. The fact is that the style of the toolbar is very austere. Does anybody knows some way to make this toolbatr nicer, is there any doc somewhere ?
Best,
Newben
Here's a comprehensive guide on styling GWT.
Related
I want to add a custom css style and set my component to having this style but then I can't make it work. I tried to copy how the Jcr browser app do the custom CSS style by having a css in folder VAADIN but that one doesnt work. I also tried the App Theme but also doesn't work. I don't know what configuration I am missing. I can't seem to find a clear documentation on how to have a custom CSS for my APP.
What I just want to do is to customize my main app to display a text with a style that I can configure in a css file.
Anyone can help me with this? Thanks!
[UPDATE]
I still can't make this work. But I can see that there's "app-orange" appeared in my div just like what the docs said. I just really don't know what I'm missing here, how come the CSS still doesn't work. :(
Hope someone can help me with this. Thanks!!!!
This was asked in our community forums and answered in depth as well.
https://forums.magnolia-cms.com/forum/thread.html?threadId=4d78fdd4-ad02-4b55-b1f2-ef947a888fcb
I believe that answer should be sufficient in this case.
Cheers,
I'm able to make this work by adding #StyleSheet({"vaadin://themes/orange/styles.css"}) in my java code. By adding this, the styles.css is being recognized by Magnolia and all the styles there is reflected in my app. :)
Is there a sort of css framework which i can add to a gwt project, and this will completely set a new UI to my gwt application. Sort of changing the look and feel.
I love GWT, but others like Vaadin are so good styled, if there were a complete set of css librarys that would make my app a lot nicer would we great.
I think we can be great developers but not so good designers.
Thanks!
I would recommend starting with http://gwtbootstrap.github.io/
As well as: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss
I would then dive deeper into the GWT docs to get a good handle on creating your custom themes. At some point any styling theme/framework will fail your needs and you will need to have some fundamentals for styling yourself.
Personally, I highly recommend using UiBinder and ClientBundle:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder
http://granitode.wordpress.com/2012/04/19/gwt-uibinder-using-a-clientbundle-with-cssresources/
#fguespe, I'm not aware of something such for example twitter bootstrap that you 'just' plug.
Eventually the 'web designer' needs to know about specific gwt CSS classes that impact the look and feel. If importing the GWT 'non plain' themes, you'll need to write customizations.
Yes indeed Vaadin and GXT provide a default nicer look and feel... Let's just fire all Google devs for a lack of focus :-)
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
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....
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