One of the web application I developed uses Primefaces 2.2. I'm delaying the migration to 3.X because I think the users are more comfortable with the 'old' look and feel of some components.
In the calendar I liked the 2.2 icon on the popup button and I would like to go on with it. Unfortunately it seems the easy way to achieve this goal, the attribute popupIcon, is no more supported, despite it is still present in the guide for 3.X
FileUpload was completely rewritten and its look is radically changed: now in the auto mode the browse (choose file) button is inside a rounded box with a background image and color set. I preferred the 2.X look, where there is no rounded box. Besides making some tests with Internet Explorer 9 I noticed the UploadedFile.getFileName() gives now the full path of the file, while I have functioning code expecting only the file name without path. The migration guide tells nothing about this change which is completely undocumented.
I believe the original look and feel can be restored with some css override, but I have already tried without success reading also this
Primefaces: how to change the default icon on the button of the calendar field?
and I would like to receive some advices.
My major concern is that css modifications can affect other components, so it is necessary to be very specific.
Thanks
Filippo
I don't think there is a quick fix, in fact I think it will be a lot of work. As you said yourself, the look and feel for some elements has changed a lot. However PrimeFaces is highly customizable when it comes to styling.
I suggest you download the manual from the PrimeFaces site (PDF) and get to work using CSS as your weapon of choice. Maybe you can re-use the CSS of PrimeFaces 2.x as a reference.
Related
I'm baffled! I built ckeditor 4.13 using the online builder, and included the codesnippet plugin. Now when I chose the plugin within the editor from the toolbar it allows me to add the code under which ever language I choose, but the syntax highlighting doesn't work for all languages. For example CSS is not highlighted. The background of the chosen theme is there, but no highlighting. SQL queries are fine as are some others, but not CSS or PHP it would seem!
Also, I'm editing in one place and then viewing the article on another place (pulling the article from a database). The styling is completely missing altogether when it's the article is viewed. I tried to find a CSS file which may contain the classes that had been attached to the snippets (such as language-php) but couldn't. I thought if I just linked to the CSS file in my header it would attach the styling...I was wrong!
Any ideas how I can tackle this issue please? Google has brought nothing so far.
For anyone interested, I've found the best way to deal with the syntax highlighting issue is to download prism. This will work with the classes produced by ckeditors codesnippet plugin and colour code the syntax according the theme you chose from Prism. Look at prismjs.com.
I am Java developer before but now i am starting to work only on UI. I have little experience with UI. So I need a tool for Html 5.0, css 3.0, & angular Js.
Taking the comment above into account it is right for me to say the following answer is based on assumption but here we go:
I'm not quite sure what you mean by tools but if you mean a program to create your code in I would personally recommend Sublime text or Atom.
If you mean tools that are easily available to you to test and play around with your code then there are a number that are available to you, JSFiddle, Codepen and Liveweave are just a few.
I personally use Codepen as it has a nice and easy to use interface and I like the community around it, the homepage features a "picked" section which showcases user created content, it does however seem to have a heavy focus on "pretty" projects rather than functional ones. The editor it offers allows users to use a number of HTML, CSS and Javascript processors as well as use libraries such as Angular and JQuery. I created multiple angular projects using Codepen so I know it is capable of that and it is also really easy to implement it into a pen/project.
I hope this has answered the question but please remember that this is all my opinion each one of these things has their own strengths and weaknesses and overall the choice should be yours.
I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.
I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.
But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.
Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.
SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!
MY WEBSITE:
http://solitairethahalo.com/
You should look deeper into the inability to use Javascript. Which host are you using?
If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.
Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.
Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)
$('#myModal').modal(options)
You can find the bootstrap documentation here http://twitter.github.com/bootstrap
hope it helps!
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE
Does anybody know of any pre-canned gadget/widget management framework (along the lines of iGoogle etc) that I would be able to use on an ASP.NET MVC site (presumably loading divs via jQuery etc)?
In particular, I'd rather not write all the selection / location code if there is something decent already available. (I would expect to write the actual widgets / content etc myself...)
I was waiting to see if you got an answer on this one as it's something I'm interested in too. As you haven't, I'll tell you what I know (it's probably not so useful but it might get you started...)
I've used something based on the ExtJS portal demo in a previous project - there are some license costs involved depending on the deployment scenario though, and besides, it turned out to be quite slow and cumbersome, and rather tricky to customise - the default for the ext toolset is for the ui to be built entirely from javascript, not from markup, and while it was possible to coerce it into working on top of existing markup, it seemed more difficult than it needed to be. That aside, it worked well in the end, and with the paid version the support is very good.
I've also implemented a widget / portal screen based on jquery-ui sortable which worked really well - the basic implementation was very quick and easy but writing the code to save and load portal settings took more time than I would have liked.
If I were doing a similar project now, I think I'd evaluate this instead - it looks ok from a cursory glance and it's open source - it's built with jquery-ui sortable, so the core should be solid enough, and the slightly uneven animations on the demo version should be easy to sort out assuming it uses the standard jquery-ui sortable options. It has functionality to load/save portal settings too by the looks of it, so it should mean less hand coding that side of things.
I have used Telerik RadDock in the past and found it to be pretty good. It renders in divs and is relatively easy to style.
It doesn't cost too much if you are using it commercially.
http://demos.telerik.com/aspnet-ajax/dock/examples/overview/defaultcs.aspx
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
This guy put together a great tutorial on implementing a iGoogle like drag/drop widget interface. Even links to a working example.