I am relatively new to using ASP.NET MVC5. It is nice that Bootstrap is built in but it seems to be very abrasive to altering the CSS based on the Site.css file.
My style sheet (Site.css) is in the Content folder in my solution.
Similar questions are out there but those are the answers I have tries (show below and obviously having the file AFTER the bootstrap...)
I have had some success using just the inline CSS and jQuery but I want to be able to use my style sheet.
It seemed that switching from relying on the bundle to this line...
#Styles.Render("~/Content/css")
for the reference was better fit... but it STILL doesn't consistently update to my styling.
so then after some digging through old questions I found this...
<link href="#Url.Content("/~Content/Site.css")" rel="stylesheet" type="text/css" />
and it seems like one in a while it works but NOT consistently...
I thought at first it had to do with the strongly types bootstrap file with the elements getting more specific styling points, but even when experimenting with the strongest id/elementname/nesting combinations I could it STILL wouldn't work. (i want to do hovers and such, but even easy things like changing the text color don't work)
Is there some giant flaw in this strategy?
Is there something I'm missing?
To the best of my knowledge this shouldn't be a huge problem, I would appreciate it greatly for someone to help me out or at least tell me why I'm sooooo wrong.
Thanks.
Although the solution provided by EdSF is good it is still not very understandable for someone who has just started with mvc5. So I will try to explain it a little bit more.
Go to
/App_Start/BundleConfig.cs
this is the file where all your stylesheets are bundled.
bundles.Add(new StyleBundle("~/bundles/css").Include(
//"~/Content/css/bootstrap.min.css",
"~/Content/css/Site.css",
"~/Content/css/jquery-ui-1.10.4.min.css"));
comment out the line of bootstrap if you don't want to use it and add you css just like the above. But remember It will remove bootstrap completely and unless you have written you own bootstrap-ish stylesheet for responsive webpage design, you should keep it.
When your view page is rendered in the browser inspect the element that's design is not according to your stylesheet and check the class name on that element and override that class with your own stylesheet class and add !important tag on the style attribute so that it will not be overidden by anything else.
Try these steps. Good luck.
Just to make sure: there's nothing about ASP.Net/MVC etc that imposes anything about styles.
You can use Bootstrap or not, or any other styling framework
Bootstrap isn't "built in", it's just the default when an MVC application is scaffolded for you
That out of the way, you don't have to use Bootstrap if you don't want to.
/App_Start/BundleConfig.cs - this is where you define what CSS and javascript frameworks, files you want to be bundled with your application. Modify (add/remove/etc) it to your needs.
Other than that, overriding CSS classes is pretty much the same as it is anywhere (nothing is imposed by the ASP.net framework).
Hth
RESOLVED: what seemed to be the main issue was not clearing my cache between tests. Although this seems a little tedious, I was finally able to get some Styling in.
but there were 2 more things I tried (from other question on Stack-Overflow) which seemed to all combine to getting it working better. (though it would still be nice if changes consistently reloaded on refresh without restarting the app! (I run parallels so it takes quite a long time!)
ANYWAYS! The (3) changes I made that were most effective
Clearing the cache (so the browser is forced to re-render the script
Changing the name in the "Bundle_Config" from "site/css" to match "Site/css" (not positive why it is like this in the scaffold.. or if it matters...but it seemed to make communication with the file more consistent.
Adding another reference (THIS HELPED THE MOST) adding an additional stylesheet reference to the relative path aside from the built in "renderStyles" from the budleconfig that takes place in the _Layout.cshtml.
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
granted I still need to clear the cache once in a while and restart the app to see changes, I am at least able to change the styling...
thanks for the help everyone!
Related
I am using bootstrap in my .NET MVC 4 project ,I imported bootstrap my project by using NuGet, I have a layout page and i include bootstrap tags in this page, my index page is using layout page and if i call project localhost:portnumber my index page and my bootstrap icons are look good, but i inkove my page like localhost:portnumber/home/index, and my bootstrap icons doesnt look good, it look like a i didnt import bootsrap resources is page and also my images doesnt seen, i cannot find any solution for this problem, if someone help me, thanks
Can you be a bit more specific? Doesn't look good is an awful description.
From the sounds of it, you need to specify exactly where the bootstrap resources are, for example: specify the exact location that will be reachable from all pages such as "~/CSS/Bootstrap/", instead of just "CSS/Bootstrap/". You need to ensure that the location is going to the route of your program.
Wondering if anyone knows how to add a custom css stylesheet to the admin backend section, without altering the original masterpages/umbraco.aspx.
I have a custom section implemented, so it has it's own section tray icon, and I can add the css to the 'umbracoGui.css', but I'd like to just 'inject' my own css file for any further styles too, knowing that all of the original files are intact.
In summary, say I have customStyle.css, with all of my css in. To add it to the head of the whole of the admin section.
There seems to be a few mentions of skinning, but it seems a bit overkill to me.
Is there a way of creating a class or something, that can register the stylesheet, or something like that?
Thanks for any help!
Cheers,
Bav
In case anyone is still looking for an answer to this, Umbraco 7 (at least, I'm not sure if this applies to earlier versions) has the ability to inject a stylesheet into pages using the App_Plugins folder. Add a new sub-folder, create a JSON package.manifest file in the new folder that looks something like e.g.
{
css: [ '~/App_Plugins/YourFolder/customStyle.css' ]
}
Then obviously create the custom stylesheet at the specified location in the App_Plugins folder and the stylesheet markup should appear in pages being served.
This may not be much help, but the first thought that comes to mind is some sort of HTTP handler which could inject the CSS file into the markup. I don't have a lot of experience with it, but I know it's a common approach for analytics tracking and the like.
I am facing a pesky problem at the moment on a large website with multiple languages. On arrival at the website, it detects what country you are from and prompts you to confirm this. On confirmation, it swaps out the pages languages from the DB and displays the relevant language. This is done using jQuery. Now the problem is that Arabic reads rtl, so I need to either:
-- swap out the stylesheets for "rtl" version
or
-- change the HTML tag and include a "dir='rtl'" arrtribute
Now, I have tried both of these, with failures on both. When I view the page source, it still shows the old Css file or HTML tag without the "dir" attribute. Correct me if I'm wrong but I believe this to be due to the DOM not registering the new changes, as they have happened asynchronously via jQuery after the DOM has been instantiated.
After all that blah blah and tldr;
Is there not an easier way to swap out the text direction dynamically? If this is a DOM issue, how can I reload the DOM after the asynchronous callback?
I have been at this issue for hours now and have had very little luck on the interwebz.
Any and all help is welcome and greatly appreciated.
Kind Regards,
William Francis
EDIT:
After much investigation I found that the only way to truly work the Arabic way is with a post-back. Once the language has been selected you do a postback, then its just a simple process of changing the Stylesheet HREF attribute from code behind. There doesn't seem to be any form of JavaScript or jQuery that can change it without a post-back and still reflect the new Stylesheet. NOTE: you need to set the Stylesheet HREF on each post-back, i.e. through a master page. The Stylsheet changes do not persist across pages.
Here's a website that helped greatly and explains a whole lot on Stylesheet changes using JavaScript. sadly, it didn't work for me.
http://www.alistapart.com/articles/alternate/
There could be several things going on. I found this page to be very helpful when I was dealing with a similar thing, so I highly recommend it:
http://www.w3.org/International/tutorials/bidi-xhtml/
Also, if you aren't already doing so, use a tool like Firebug to examine the generated DOM after your AJAX has run to be sure you are seeing the altered state of the DOM and not the initial source of the page. It is possible to change the dir dynamically--you can use Firebug to add a new attribute to the HTML tag of this very page (set dir="rtl") to see it change dynamically. It could be some other element is overriding the direction, it could be that the AJAX changes aren't loading correctly, or other things. If you can post more of your code it would be helpful to give a better answer, but I hope this will help.
I am a ASP.NET 3.5 web developer using VS 2008. I just started at a new company and there are alot of Web Designers here (never worked with Web Designers before). They all use Dreamweaver CS3 and PhotoShop (something i know nothing about).
What I would like to know is the following:
Would they have problems opening my ASP.NET pages in Dreamweaver? ( I heard they might not be able to ).
What about when i use MasterPages? Will they be able to open my pages when i use MasterPages, or must i stay away from MasterPages?
Thanks in advance!
They will be able to work with the markup in your aspx pages, as long as you aern't using complex server controls. Keep the markup fairly simple and you'll be OK. With master pages, they should be able to handle the layout stuff they need, and leave you to worry about the content areas. If you have the opportunity, try to go down a MVC route, this way you are encouraged to keep the code and the markup separate, and the designers will have an easy time seeing your aspx and ascx markup. Designers aren't evil, just different :)
I'm working on a site where the images and other resources will be located on a separate domain from the main content of the site. We will use something like 'www.example.com' for the main site, and then 'images.example.com' for all extra resources for styles, etc.
When developing the site I will keep all of these resources on local dev. machines. The challenge here is keeping CSS references consistent between the production server and development environments.
What I was thinking of doing was creating a web.config key that would store the URL of the images server. Then, when switching from development to production I could just change the web.config value and everything would be done.
Is there any way to add a value to a CSS file, dynamically or otherwise, from some place in a config or C# class? Or am I going about this the wrong way?
Also, I'm limited to using .NET 2.0 if that makes a difference.
UPDATE
To expand on this a little more, I know I can use a web.config setting for server controls' URLs. Those are already generated dynamically. What I'm more interested in is what options I have for modifying (or doing "something") to static CSS files that will allow me to change URLs for things such as background image resources that would be referenced in CSS. Is there anything I can do besides find/replacing the values using my IDE? Perhaps something that can be done automatically with a deployment script?
Is keeping the CSS file on the image server an option? If that it possible, you could make all the image references relative, and then you just need to update the link to the css file.
<link rel="stylesheet" href="<%= ConfigurationManager.AppSettings("css-server") %>style.css" />
If you still want to send or generate a css file dynamically:
css files don't have to end in css. aspx is fine. You could do this:
<link rel="stylesheet" href="style.aspx" />
and then in your style.aspx page:
protected void page_load(){
Response.ContentType = "text/css";
if (ConfigurationManager.AppSettings("css-server") == "local") {
Server.Transfer("css/local.css");
} else {
Server.Transfer("css/production.css");
}
}
If you still want to dynamically generate a css file, I'd use an HttpHandler, set the contenttype to "text/css", then generate the css with Response.Write. If you insist on having the page end in css, you could always register css to go to asp.net in IIS, then on incoming requests in global.asax application_Begin request, if the file ends in .css, use httpcontext.current.rewritepath to your handler.
This will have a net effect of style.css being dynamically generated at runtime.
What about putting a place holder on the web page and then selecting which CSS file to utilize (PROD, TEST, etc.) at run time and add it to the place hodler?
I think that Update had the right idea...
<link rel="stylesheet" href="<%= ConfigurationManager.AppSettings("css-server") %>style.css" />
Sounds like a job for a NAnt [link] script to me. They're pretty easy to work with and well documented.
That way your code has isn't changing your css links, they're being updated at deploy time. This isn't a code issue, it's a deployment issue, so addressing it as such feels more "right" to me. That way you know if it loads correctly (with the right images) the first time it will load every time. NAnt scripts are a good thing to have in your toolbox.
The other solutions will work, but that code will be running every time the page loads for a change that should have happened once -- when the app was deployed.
You duped your own question:
https://stackoverflow.com/questions/449236/dynamically-setting-css-values-using-asp-net
This is a common problem. What we do is have seperate web.config files for each environment. There is a appSettings key in the web.config and any config values go there like this.
<appSettings>
<add key="ImagePath" value="d:\websites\www.site.com\www\images\" />
<appSettings>
When setting the image control in the code behind, use the following:
myImage.ImageUrl = + _
System.Configuration.ConfigurationSettings.AppSettings("ImagePath") + "image1234567890.jpg"
Just change your ImagePath key to correspond with the path on the production or qa servers. Also, you could make the test server have the same path, but in my experience this solution works.
I would create a server control for my CSS that registered the css script block on page load. You could very easily change all paths at that point programmatically.
Perhaps you can do something with the hosts file on your dev server(s)? That way you won't have to actually change any code.
It IS possible to send files with the .css extension through the asp.net engine, though. You could also have .ashx handlers that return valid css and reference those handlers in the tags. Seems like kind of a waste of processor for stuff that is 90% static text though.