I have this bundling configuration:
bundles.Add(new StyleBundle("~/styles/style1").Include("~/Content/library/styles/style1.css")
Then I added this code to render the bundled CSS:
#Styles.Render("~/styles/style1")
My CSS has this content:
.style1 {
background-image: url("../img/image.png");
}
Due to bundling, the path of background image is misdirected to ~/Content/library/img/image.png instead of ~/img/image.png. I don't want to edit the CSS file path because many other pages are using it. Do you know of any solution to it or am I missing a configuration in bundling?
You're gonna need to apply the CssRewriteUrlTransform to fix this:
bundles.Add(new StyleBundle("~/styles/style1")
.Include("~/Content/styles/style1", new CssRewriteUrlTransform())
Alternatively, you can also use absolute paths in your stylesheets.
P.S: As stated in the comments, you have to add the Web Optimization Package to your project through Codeplex or NuGet to be able to use the CssRewriteUrlTransform class
Related
In my _Layout page I have these scripts:
#Scripts.Render("~/Scripts/Scripts.js")
#Scripts.Render("~/Scripts/moment-with-locales.js")
#Scripts.Render("~/Scripts/moment.js")
#Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
#Scripts.Render("~/Scripts/DayPilot/daypilot-all.min.js")
So instead of writing all of those out, I want to create a bundle:
bundles.Add(new ScriptBundle("~/bundles/otherScripts").Include(
"~/Scripts/Scripts.js",
"~/Scripts/moment-with-locales.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/DayPilot/daypilot-all.min.js",
"~/Scripts/DayPilot/daypilot-common.src.js"));
So now in my _Layout page I have this:
#Scripts.Render("~/bundles/otherScripts")
Now in my bootstrap-datetimepicker.js I have edited 1 line.. and the change shows visually when I test this app locally.. but when I publish.. that line that I changed does not work..
The only way it works is if I exclude the bootstrap-datetimepicker.jsfile from the bundle and reference it in the _Layout page specifically.
How do I just combine all of those scripts into the bundle and it work properly when published?
I'm trying to use the Gentelella theme with MVC but I can't get it to work right, and I feel like I'm defining the bundles incorrectly. I copied the HTML code exactly as it was in the sample and I get this:
Bad layout
There shouldn't be any margins - I want it to appear how it does on the GitHub page. I define the bundle like so (admin being what I renamed the build files as):
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/admin.js"));
bundles.Add(new StyleBundle("~/Content/admin").Include(
"~/Content/bootstrap.css",
"~/Content/admin.css",
"~/Content/font-awesome.css"));
I have very strange problem in MVC BundleConfig file. Before publishing my site I set BundleTable.EnableOptimizations to true, and was waiting that my css file would be minimized after publishing. But one file from ScriptBundle is minified, and another one from same ScriptBundle isn't. Here is what I mean:
my BundleConfig code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
and in _Layout I have:
#Styles.Render("~/Content/css")
So result of this code is that, when I check sources of site in browser, there is one css file, where my bootstrap.css and Site.css files are combined, but bootstrap.css is minified, and Site.css isn't. I just can't figure out why system doesn't minifies my Site.css file.
It's the weirdest problem I had ever had, so if you know what's going on, please help me.
you should try the following code
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
}
using IgnoreList you can bypass any already minified css that is not including in bundle ,because its already minified and mvc bundle will ignore it.
If this doesnt work you need to validate your css, you can use web essentials to validate your css.
Hope this helps.
He, I'm currently restyling a site that I'm working on. It's a VS2013 project and I'm still getting the hang of using Visual Studio for web dev.
Currently the project has quite a lot of <asp:HyperLink></asp:HyperLink> tags
I know that I can use <asp:HyperLink CssClass="testingCss"></asp:HyperLink> to change the css of these HyperLinks in css using classes but there are so many links that I'd have to edit to fix this. Is there any quicker way of dealing with this? Like making a default text color property in my site's css file?
For example, the css used in p tags:
p {
color:red;
}
I'm sure there has to be a way to do what I want to do like this p tag example I gave. Would appreciate any help I can get here as it should save a lot of time and maintenance.
Thank you in advance!
It will be a <asp:HyperLink> in your markup but when the page is rendered, this will be output as a regular HTML anchor - <a>
For this reason you can target it the same way you would any other anchor:
a { color:red }
Just Add this code to your css
a{color:#ff0000}
Turns out my problem was the bootstrap css conflicting with my other css file. I just changed the css in the bootstrap file to get what I wanted. You guys were right to say that you just need to change the a tag for HyperLinks in asp.net projects. Thanks for the help.
I have a CSS file that is embedded in my assembly. I need to set a background image for certain elements using this CSS file, and the image needs to be an embedded resource also. Is this possible? Is there any way I can reliably do this?
I ran into the problem when putting an existing stylesheet into this dll then realized images weren't showing up. I don't know of any way to make it work though because I would need to know the URL to the embedded image.
Has anyone done anything like this?
<% = WebResource("image1.jpg") %>
You can use above statement inside your CSS file, and while you register your CSS with
WebResourceAttribute, you can set "PerformSubstitution" to true
Default.css
body{
background: <%=WebResource("xyz.jpg")%>
}
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
[assembly, WebResource("xyz.jpg","image/jpg")]
Just follow the following steps to refer a web resource as background Image in CSS
Refer Image URL as "background: url('<%=WebResource("xyz.jpg")%>');" in following manner.
Default.css
body{
background: url('<%=WebResource("xyz.jpg")%>');
}
In AssemblyInfo.cs file register the CSS file with "PerformSubstitution=true" attribute in following manner
[assembly, WebResource("Default.css","text/css", PerformSubstitution=true)]
Now again in AssemblyInfo.cs file register the image file as
[assembly, WebResource("xyz.jpg","image/jpg")]
Right Click the Image File (xyz.jpg) and CSS File (Default.css) and click on Properties now select "Build Resource" option as "Embedded Resource".
and its done.
Happy Coding !!!
Mine is a slight variation on the other suggestions but it works for my inline CSS within my ASP.NET page
Add the following entry to the AssemblyInfo.cs file - [assembly: WebResource("MyImageFile.png", "image/png")]
add the following code within the CSS to reference the embedded resource - background-image: url('<%= Page.ClientScript.GetWebResourceUrl(typeof(MyUserControl), "MyImageFile.png") %>')
What about exposing the resources through a Web service?
Such as in the CSS file, set background: url( getImage.aspx?image=newyork.jpg )?