Hi im using the sprite framework http://aspnet.codeplex.com/releases/view/50140
I have it working so that i can do things like:
#Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")
but how can i use the images within css files?
eg
#wrapper {
width: 980px;
margin: 0 auto;
background: url(/App_Sprites/images/img01.gif) repeat-y left top;
}
If the image you are referencing in the CSS file exists, then it should work. The CSS path is relative to the CSS file. O you have the path correct? You can check with firebug.
This will require you to create CSS file on the fly, at runtime and fix up the paths in your classes and IDs.
The whole idea of the image framework is that it generates the CSS files dynamically. So let's suppose that you have placed your images inside the ~/App_Sprites folder: img1.png, img2.png, img3.png. Now you simply register the HTTP module in your web.config:
<httpModules>
<add type="Microsoft.Samples.Web.ImageOptimizationModule"
name="Microsoft.Samples.Web.ImageOptimizationModule" />
</httpModules>
and then inside the head section of your page you include the dynamically generated CSS:
#ImageSprite.ImportStylesheet("~/App_Sprites/")
which will render the following:
<link href="App_Sprites/highCompat.css" media="all" rel="stylesheet" type="text/css" />
Now all that is left is to use the rules contained inside this CSS:
<div class="img1-png"></div>
Or if you wanted to directly include the image inside your markup:
#ImageSprite.Image("~/App_Sprites/img1.png")
So the idea is that you use directly the dynamic CSS generated by the framework, you cannot use those rules in your CSS files.
Also make sure you read the documentation for the different modes and the settings.xml file which allows you to customize those modes.
Related
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?
The IFRAME solution works like this:
In your main HTML file, you'll have your DIV:
<div id="myspecialdiv">
<iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>
Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:
<html>
<head>
<link rel="stylesheet" href="path/to/external/stylesheet.css" />
</head>
<body>
<!-- The contents of your DIV -->
</body>
</html>
If you can work with HTML5, you could try using scoped styles. You could include the CSS inside the div, having it affect only its parent:
<div>
<style scoped>
// Styles here
</style>
</div>
This will helps you a lot:
http://css-tricks.com/saving-the-day-with-scoped-css/
Applies only style to a certain delimited escope. Good luck!
IMHO better than the iframe solution..
related: Limit scope of external css to only a specific element?
If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:
p { font-size: 12px; }
You'd modify that to:
.mydiv p { font-size: 12px; }
And format your DIV as
<div class="mydiv">...</div>
You would then load the script as a stylesheet, rather than the external stylesheet directly.
<link rel="stylesheet" href="path/to/internal/script.php" />
I suggest you can leave the external style sheet as it is and create an internal style sheet with the classes that you want from the external stylesheet to affect your single div and just rename it and apply those renamed classes to the div. The renaming is because the attributes of those classes may affect elements already existing on the page from external stylesheets.
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
Hope this helps.
I assume that the style specifications inside the external file are not contained in classes or IDs, but are they blanket adjustments to tags like <p> (and thus it cannot be included in your page headers). Include your div in a <style scoped> tag and import the .css file there. See: http://css-tricks.com/saving-the-day-with-scoped-css/
You could assign a CSS prefix to target the section of your document you want to style.
scoped is a good idea, but has browser compatible issue.
I solve this problem by adding pre-class before all selector in css file:
https://github.com/ericf/grunt-css-selectors
Before updating my css, I had the following in Login.css:
body
{
background-image: url('./pictures/fond.png');
background-repeat: repeat-x;
}
Here was my structure:
Now I have the following css:
body
{
background-image: url('../pictures/fond.png');
background-repeat: repeat-x;
}
Please note the double point in the url.
Here is my new structure:
My problem: when publishing on my IIS test server, I cannot see my pictures!? On local dev machine (VS2012) I can see my pictures.
BUT If I update my Login.css located in my IIS test server and replace my double points with a single point it works again. It is not logic because (after my update) the Login.css is now located under the css folder.
Any idea?
Thanks.
UPDATE ----------------
Here is the way I refererence my css:
bundles.Add(new StyleBundle("~/Content/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
I created a bundle and then:
#Styles.Render("~/Content/bundleLogin")
I bet you have hardcoded the path to your CSS file in the view, like that:
<link href="Content/css/Login.css" rel="stylesheet" type="text/css" />
instead of doing it the correct waywhich of course is to use an url helper:
<link href="#Url.Content("~/Content/css/Login.css")" rel="stylesheet" type="text/css" />
As far as your CSS file is concerned, all urls that you are referencing there (such as images) are always relative to the current location of the CSS file. So if you properly reference your CSS file you will not have any problems. Using url('../pictures/fond.png'); is the correct relative location.
UPDATE:
Oh, I see the problem. You are using bundles. Well, the problem with bundles is that the way you declared the name of your bundle, you do not have the same level of folder nesting as the physical structure. So modify your bundle like this:
bundles.Add(new StyleBundle("~/Content/css/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
and then:
#Styles.Render("~/Content/css/bundleLogin")
I created this code in oder to use it to place image and text side by side in a HTML page.
.mydiv {
width:646px;
height: auto;
}
.myimage {
float:left;
width:378px;
height:291px;
margin:5px;
}
The proble I am having is that I want to use the code multiple times in different files and with different image values and I don't want to be creating css file for all of them. So how can I write all the code for the with different values for all the files in one css file?
First, you can put your CSS in a CSS file, then include this file in all your html page by using this in the
<LINK href="special.css" rel="stylesheet" type="text/css">
(See W3C)
For the values that can't be reuse between your html files (the SRC of your image, for instance), you will have to right it manually in each file. You can do this directly in your HTML (if you use ) or by declaring in your header.
Create a .css file with the above code. You would need to specify the height of the .myimage class too. In all the files where you want the above file import the file using
<LINK href="example.css" rel="stylesheet" type="text/css">.
Now for the div holding the image give the class as .myimage and the src attribute is independent of the file
Edit- Suppose you have 3 html files in your site and you want the above css classes to be implemented in all the files, then open a new notepad file, paste the css classes in the file and save as somestyle.css. Now in each html file you use the above link tag to import the css and use the classes as you would do normally.
I'm trying to put some inline server tags on a page so I can get the right path for an image, using Visual Studio 2012.
I'm doing it like this:
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
The problem is that once this is written, the whole style section loses the color formatting withing the VS2012 editor. Is tyhere a different way to do this (or an option in VS2012), so that I won't lose the colors and the indentation?
The reason that visual studio is losing its formating is that you are mixing css and server-side code as below.
<style type="text/css">
.someclass
{
background-image: url(<%=Url.Content("~/Content/Images/messageIcon.gif")%>);
}
</style>
You should separate your css from your code.
Image paths are relative to the location of the css file, so css like below is correct, therefore you do not need use a application path worked out by Url.Content(~)
.someclass
{
background-image: url(../Images/messageIcon.gif);
}
That is a Visual Studio Highlight issue or feature for css styles. Try to use server relative URLs, that are known.
If you need to insert a server-side code into css styles, you can use style attribute in html-markup. For example:
<div class="beautiful-button" style="background-image: url('<%=Url.Content("~/Content/Images/messageIcon.gif")%>')">
...
</div>
If you don't like this code or you need to use it more than one time in different places, the best way would be to create your own server-side control with a public property URL (for example). Finally it will be looked like this:
<asp:MyOwnControl runat="server" class="beautiful-button" URL="~/Content/Images/messageIcon.gif" />