ASP.NET MVC4 + Bootstrap 3 How to apply a different theme? - asp.net-mvc

I am trying the new Visual Studio Version, which comes with the built-in Bootstrap Template. Since I wanted to use Bootstrap 3, I upgraded all files according to a helpful thread: ASP.NET MVC 5 and Bootstrap 3
This works fine, but I have trouble to apply a different Theme.
As far as I understand, I can simply replace the bootstrap.css with a different theme and the theme "should" work (I deduced this from http://bootswatch.com/) - but for me the Thema always stays at the ASP.NET default, which I doesn't like.
So: How can I change the damned theme? Ideally, I want to use: http://bootswatch.com/cerulean/
Thank you very much.

Bootstrap's css comes in 2 files: bootstrap.css and bootstrap-theme.css.
I didn't see how it is implemented in mvc5 template, but I'm pretty sure it is done using bundles. So, you got to check the bundles.cs file and replace bootstrap-theme.css there with theme of your choice.

Related

Angular 6 : is it okay to use existing cshtml markup of mvc in angular 6

I have a project to migrate an MVC application to Angular6. Now the designs are already existing in cshtml files i.e. views. So is it okay to use those designs as it is in angular.
NOTE : The designs consist of lot of images, css, js and charts.
I know the basics of Angular and aware about Form Templates and Reactive forms but styling them from scratch will take a much longer time.
So is it okay to use the existing markup of cshtml and perform the coding part in Angular TS components.
yes you can, the only time that takes is to splitting your views into reusable components.

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

Use Bootstrap 3 RC1 in the New MVC 5

Microsoft has used Bootstrap in their new ASP.Net MVC 5 template. It's really great. However it uses the version 2.3.1 of it and the Bootstrap guys are moving towards the 3 version already. I could just easily rewrite the entire views and the layouts based on the new version but I was wondering if somewhere, someone else has done it (maybe by a long shot the Microsoft folks?).
I know the rules (that I really appreciate) is to put code here instead of link for my blog post but it's just too many small corrections to put them here.
http://www.ghislainproulx.net/Blog/2013/09/using-bootstrap-3-with-visual-studio-2013-aspnet-mvc-template
I have created a NuGet package Bootstrap.MVC.EditorTemplates.Sample that contains a Bootstrap 3 based sample site, plus some additional bootstrap controls and culture-aware validation. This works with the VS 2013 RC MVC5 template.
It uses the Twitter.Bootstrap.Less package instead of the plain bootstrap package, it is best to "uninstall-package bootstrap" from the default MVC 5 site before installing it in the project.
The main idea of making Bootstrap 3 work on ASP.NET-MVC 5 project (or any other server side technology) is to put proper css and js files into the project and make Layout file use these.
This is very well covered in the blog by #Ghislain_Proulx.
Then all you have to do is follow the syntax rules of Bootstrap 3 in your Views.
One way to do it is use straight html markup. Another - use custom helpers. #Maarten has a cool open sourced EditorTemplates of these. However, I'd suggest using TwitterBootstrapMVC as it provides a high level of flexibility.
Disclaimer: I'm the author of TwitterBootstrapMVC and using it for Bootstrap 3 requires a license.
Now that Bootstrap 3 final release is out, and so is Visual Studio 2013 RC and ASP.NET MVC 5 RC, it's confirmed that the RTM of ASP.NET MVC 5 will come with Bootstrap 3 (even though it's not in ASP.NET MVC 5 RC yet).
Until ASP.NET MVC 5 RTM / Visual Studio 2013 RTM, the post referenced in the accepted answer would be the wya to go.

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...

How to add a skin engine to asp.net MVC system

I'm implementing a solution in ASP.NET MVC that later can be applied to couple of other fields. To do so it will require to re-brand the UI even though the underlying business logic wont need to change. I'd like to write the code in such a way that will allow other developers to only develop code that will only changes the UI. This is similar to the way that themes can be written against Wordpress Blog software.
Can any one suggest how to organize my project to make such feature work?
http://pietschsoft.com/post/2009/03/ASPNET-MVC-Implement-Theme-Folders-using-a-Custom-ViewEngine.aspx
I would not use bult in Themes (not actually sure if these still exist in MVC) But you could multiple sets of CSS (with related images) in a Themes folder with a separate path per theme eg: Themes\Default, Themes\Classic, etc where the only configuration is the Path element. This would split the styling from the core code and you would'nt need to use any Theme "Engines" etc.
In your MasterPages/Pages/Views you could just set the path to the stylesheets dynamically.
Have you tried using MasterPages?

Resources