Is there a ready-made CSS I can download to style my forms in Symfony? - symfony1

I just defined some forms in /lib/form/doctrine/ But the form elements currently don't have any CSS formatting.
Is there a default stylesheet that I can quickly copy/paste to style the forms, error messages, etc.?

It's not out of the box for Symfony but Blueprint CSS is a nice CSS framework, and when I used symfony 1.4, it used to color automatically the errors (I don't know if they changed the class names and stuff).
It's a bit heavy, but it ensures a solid structure if you use it for your development.

I just used Symfony's CSS from the admin. It was exactly what I was looking for - good results with minimal effort. Thanks for the suggestion cuhuak.

Related

Orbeon - How can I prevent a component's CSS from being rewritten by the Server Side Embedding API?

I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.

challenges in upgrading Bootstrap Themed ASP MVC site, how to upgrade bootstrap + keep previous CSS / #Helper / Transpiler

I've built an ASP MVC site and used bootstrap, Jquery, knockout and signalR, and inherited a mix of 3rd party MVC code integrated with controls like syncfusion. (I don't have a choice in this matter, company decision)
After coding the HTML helpers in the views,
I manually applied all the bootstrap styles took sometime and got it
to work. Now, with upgrade/changes to bootstrap (RC 3.1) I am finding
myself back to square one, hunting through the code and replacing it manually, lots of
changes. Can you please share a better way to transpile/emit/bind the
bootstrap CSS classes into the helpers (i.e. in an independent way of the
technology helper, whether its ASP HTML MVC helper, Syncfusion HTML
MVC helper, Rad or FluentBootStrap)
Please provide a solution/recommendation to apply bootstrap CSS to ASP MVC pages
That's easy to separate and maintain and CSS upgrade's Programmtically
or globally configurable/settable/applicable
I've been thinking extension classes might be a good option, but not sure how I can achieve this, if you've can show me how to get the custom bootstrap CSS bound so I can programatically apply it or globally,
Is there a transpiler or Razor Declaritve Helper (I know about the nuget package, I tried applying it, and it turned out to be more of a template, than declarative extension binding, and I couldnt use it with other libraries Syncfusion or DevExpress)
or some other way, I would greatly appreciate it.
Here is an example of what I do currently, with the Syncfusion library
#Html.Syncfusion().Menu("myMenu").AutoFormat((Skins)ViewData["Themes"]) - performance hog
or better option 2 below
http://mvc.syncfusion.com/demos/ui/tools/Menu/Appearance
#(Html.Syncfusion().Button("btnNormal")
.Text("Save")
.Width(100)
.Height(50)
.ContentType(ContentTypes.TextAndImage)
.ImageUrl(Url.Content("~/Content/Images/Button/icon_save.png"))
.CustomCSS("CustomCss_Button") )
-> I changed/upgraded manually to BootStrap RC 3.1, I changed this last part to the bootstrap
.CustomCSS("btn-default dropdown-toggle btn-primary"))
Not sure this would be helpful to you, but check out TwitterBootstrapMVC. Right now it supports v2.* of TwitterBootstrap, but the support for v3.* is being built.
Our answer is from the experience we are going through. Here is what we found,
currently, The twitter bootstrap MVC is your best option IMHO, we are moving everything to it and its free! Its probably better the broiler plate option.
The 3.0 upgrade is a big question for us as well, so this is
something Dmitry can clarify.
Also, auto creating type safe bootstrap HTML views/sections for models is another question.
In addition you will face challenges with custom controls, we have a OLAP BI client, which looks / or doesn't not have the same consistent look. Dmitry can you answer how to resolve this with twitterbootmvc
Dmitry, will the twitterbootstrap upgrade, auto upgrade to the 3.0 bootstrap or do we have do anything manually?
I just discovered that in visual studio you can for the precompile of RAZOR into HTML.
Can you add that as an option to fluent

What is the use of jquery.mobile.structure-1.0.css in jquery mobile

I have a question. When i am creating an application in rhomobile jquery.mobile.structure-1.0.css present inside /public/jqmobile. My question
1) What is the use of jquery.mobile.structure-1.0.css
2) jquery.mobile.structure-1.0.css was not included anywhere (in layout.erb) the application. Then why jquery.mobile.structure-1.0.css is present. I try to find the use of jquery.mobile.structure-1.0.css but not getting good result. Any one can explain?
The structure CSS is used to make a completely custom theme, where you do not want to rely on any of the default themes that come with jQuery Mobile. It's a very basic bare bones stylesheet. You can use it in place of the main jQuery Mobile stylesheet, then you create your own stylesheet to override and customize.
Personally I seperate the structure css out so I can make changes to my themes without causing any major issues to the new theme.css architecture. Makes it a bit easier to make upgrades as new versions come out. Though it is a little tricky to verify that there are no new additions to the themes. I wouldn't use overrides on the base themes a,b,c,d, - I find it's better to build your own themes using those as bases, e,f,g, etc...

ASP.NET MVC View/Site Design

This stems from my question that i started at MVC Beginner Question
Im now confident in developing a MVC website from the MVC side of things.
My fatal floor now is the UI level designing. i.e. designing views and master pages including css styling.
Just wanting to get any advice on where i should start? Im currently about to look at the expression studio to see if that will help.
I need to get up and running in this quickly so that it doesnt hold back the development of the website.
Thanks in advance
I would look at a CSS grid-framework like 960 Grid System or Blueprint.
There is often controversy from CSS/Markup purists as to whether the use of such frameworks is valid, but they often overlook that not everyone is a CSS expert. I have found that the use of these frameworks has saved me hours of productivity since my CSS skills (as a programmer) are not that great.
As far as using Expression, I tend to use this as a "test-bed" with simple HTML files. The Designer and CSS Style support seem to be more interactive than that which Visual Studio supports, so for quick mock-ups -- Expression, then move that HTML/CSS over to VS as soon as possible.
One other priceless tool to use while designing is the add-on "Firebug" for Firefox ... it allows you to inspect single elements on your page, the CSS properties affecting that element - it even allows you to change CSS attributes "on-the-fly" to immediately see the ramificatiions. This tool has saved me HOURS!
Consider finding a suitable theme in a free open source template.
Consider something that suits at http://www.freecsstemplates.org/.

Asp.Net MVC Themes, how to?

I have a ASP.Net 2.0 site and want to translate it into MVC paradigm (I'm new to this), but starting from Zero.
I have some themes in my old site, but reading here and there, it seems like Themes doesn't fit well into MVC paradigm.
The question is:
What is the best practice in MVC for building a Themed user customizable site?
Can you give a little example, if applicable?
Note: I'm aware of this but they don't talk about best practices or how to start with.
Here's my code that I've been using for implementing "Themes" in ASP.NET MVC:
ASP.NET MVC: Implement Theme Folders using a Custom ViewEngine
It's nice when you're able to just swap out CSS files to change the theme, but this really isn't very practical in a ton of cases. Especially when each theme needs to have a completely different layout. In which case, you need to change the CSS and HTML that gets rendered, and this is why I wrote the code found at the above link.
A clean, semantically correct HTML with a good CSS is the way to theme any web app, whether it's ASP.NET, RoR, PHP, etc.
The best example of the power of CSS is CSS Zen Garden.
w3schools has a nice introduction/tutorial to CSS.
Each of your users could have an associated stylesheet which would get selected whenever applicable, i.e.:
<link rel="stylesheet" type="text/css" href="<%= Model.SelectedStyleSheet %>"/>
As themes were intended to style up tags you can use CSS to create a similar approach. I would probably recommend that you start with copying your default themes over to css definitions e.g.
html: <input type="button" />
css: input { color : light-blue }
Then for anything that had your non-default theme you can just apply classes to them. It takes a while to re-write all your themes as CSS, but once done it's worth the effort.
jQuery-ui themes are nice, and not too hard to implement.
Just link to the js and css file and don't forget the icons. And make sure to use Url.Content() in those links. Otherwise it might not be linked to the correct path, once you deploy it on a production server (i fell into that trap once).

Resources