I have an using ASP.NET MVC 4.5 that uses some css files.
The css refers to some images.
The css file Is located in this path:
WebSiteRoot\Content\css\services\File.CSS
The image is located in this path:
\WebSiteRoot\Content\img\servicesbubble\image.png
The css has this calling:
background:transparent url('../../img/servicesbubble/image.png') no-repeat 0px 0px;
When I run the app in the localhost it works. But when I upload to the hosting (Appharbor) It doesn't work.
Why? What is the best way to reffer to the root of an app?
In the server the http get is tried to this wrong URL
WebSite.com/img/servicesbubble/desktop.png
Update: I am using the .NET framework 4.5 feature called bundling for merge these CSS with another CSS.
Your problem is actually coming from the fact you're minifying the css to a different directory than the CSS originally existed in.
More specifically: http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1
So ../../ puts you at http://tulpepwebsite.apphb.com/Content
Urls in CSS files are always relative to location of the CSS file itself.
Your paths to the CSS files seems to change. The two CSS files I see related to your website are http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1 and http://tulpepwebsite.apphb.com/Content/GeneralCSS?v=9kvtUcooQua0D4nQT8wZ-4_Gm6OcRd-J5SkjMxwKiyQ1. (The other is from the google fonts service.) You need to figure out why that's happening.
Edit: Ok, I'm going to guess something. You're probably using the new ASP.NET 4.5 bundling feature. But it doesn't make sense to bundle CSS flies in different directories, if you're doing that.
Your CSS location is different than you think:
WebSiteRoot\Content\css\File.CSS
instead of
WebSiteRoot\Content\css\services\File.CSS
Related
hope you're doing fine.
I am currently stuck with my Web App project. This is the context: I would like to code a Web App using J2E. There's a free template that I liked and thus I decided to download it. When starting to use it I notice the CSS isn't applied.
Instead of having this, I have this:
However I do not see where the error is. The CSS & Bootstrap files should be visible in the JSP file and IntelliJ recognizes them. However I can't display these files (whether css or even pictures) that are referenced in "href".
Here's the project structure and code, maybe something's wrong there.
I'm used to HTML and to my understanding JSP isn't too different. Are the referencings different though?
Thanks in advance for any help you'll give,
Fares
YES.
Found the answer. Put resources in different folder than WEB-INF.
I believe that, your HTML file is inside the WEB-INF folder, for the to work either remove the WEB-INF path
<link href='style/stylesheet.css'>
or move your HTML one folder up.
Is there any problem if I reference .css and .js with "~/file.ext" for chrome? Because I get some layout errors when I do it this way. Does chrome want it like "../" instead of "~/"? I am developing with Asp.Net Core and I just drag and drop the files from the Solution to the Html to create the references.
Typically when using the standard HTML, CSS, JS if a file that you want to point/reference to is outside of the folder where you're typing in your code then yes, "../" is generally the way to do so.
Try pointing to images or make an external .css and try referencing to it to test it out.
I'm trying to get a custom theme working in my Primefaces project. I've created the theme using Themeroller and packed the jar as follows:
primefaces-spl.jar
WEB-INF
resources
primefaces-spl
theme.css
images
I then put this file into my WEB-INF/lib folder and specified the primefaces.THEME attribute to 'spl' in my web.xml.
The project can seemingly find and use the jar, but the page looks like this:
Thus, it looks like the resource images are not read properly. In theme.css, I have replaced all image tags as follows:
.ui-widget-overlay { background: #aaaaaa url("#{resource['primefaces-spl:images/ui-bg_flat_0_aaaaaa_40x100.png']}") 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
I have also tried adding the jar to the classpath as well as the alternative strategy mentioned here: http://www.mkyong.com/jsf2/primefaces/create-a-custom-theme-in-primefaces/ Did I miss something?
An online tool is also available to convert ThemeRoller zip files to Primefaces theme jars:
https://themeroller.osnode.com. ThemeRoller versions: 1.10.3 & 1.9.2 are supported.
Just drag your zip file over and download the converted jar files. Maven instructions are included.
Although this is not EXACTLY answering you question directly you would easily acquire the desired knowledge by inspecting the generated theme jar which would organize your files correctly.
Also your question might not be relevant when there i alternate way of achieving your goal without having to inspect file structures...
I created a blog with Wordpress on a temporary test domain. I put it in the main directory, not a folder. Now I want to move it to the correct website, in a folder. I can update all of the MySQL values for the site URL, and the relative path links work just fine.
The problem is that I can't seem to make my CSS path links work. I realize that my problem is that they are relative to the CSS file, in the WordPress theme, and not the page. But how can I fix this?
Here is an example:
#topNav {background:#3a93c3 url(wp-content/uploads/2011/07/blueNav.jpg) repeat-x;}
I have tried adding './', '../', and '../../' to the beginning, but it doesn't work at all.
Question
Why aren't relative paths working in CSS on my WordPress site?
you really shouldn't put theme images in the upload folder. you should really store your theme images inside your theme folder. like
wp-content/
themes/
mytheme/
images/
1.jpg
style.css
so in your css, you can just do
background:transparent url(images/1.jpg);
You can also use the / which is the root of your website. So something like url(/yourfolder/wp-content/...
If you want to use relative paths, you have to go to the right directory. With the ../ you used before. ../ 1 dir up, add another ../ 2 dir's up, and so on.
I just looked my companies corporate blog and I have a couple different ways, there was an old theme that was legacy, and new theme that I made.
First the original base theme used absolute paths:
#blogTour {
background: url('http://www.domain.com/wp-content/uploads/2010/09/signup.png');
}
This generally wasn't ideal since I had to regional-ize blogs, they would have a different URL and I didn't want to use a PHP variables ($SERVER['DOCUMENT_ROOT']), maybe you can though!
On the new theme that I made, I put the assets under the theme directory...are you able to put the images within the themes directory?
#blogFeed {
background: url('_images/icons/blog-feed.png');
}
Lastly try wrapping the contents of URL with either back-ticks url('content'), I remember reading somewhere that when pumping CSS through a preprocessor (Wordpress/PHP) it is generally good practice to wrap your strings with back-ticks.
You can use Server Side Scripting in CSS files, this will you to access the Global Variables of your web server and dynamically match any server you're deploying to.
Please see Server Side Scripting in CSS Files for steps on implementing this.
Old question, but I see it's not really answered.
As mentioned, it is not best practice to load theme related stuff from wp-content/uploads/.
But, if you really want to use something in wp-content/uploads you would use:
#topNav {background:#3a93c3 url("../../uploads/2011/07/blueNav.jpg") repeat-x;}
That path will work.
When calling a relative URL from theme php or css, the base url becomes wp-content/themes/{theme-name}/ so you need to backup two directory levels (../../) to wp-content/.
I'm assuming this is an easy question, but I'll be darned if I can find the answer.
I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css
At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.
If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx
In this case the / takes the path right back to http://localhost:2020
This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).
I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.
Any ideas??
Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.
I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.
Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.
If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.
In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.
The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%# Page ... directive on each page.
In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.
There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.
I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.
So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way
background: url(../image/..);
of course the code above sitting in the CSS file. It works for me all the time
not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:
1) click on the project in the solution explorer
2) it shows a "Virtual Path" property which is defaulted to "/projectname"
3) change it to "/" instead and it seems to do what is desired
let me know if this works for you!
it has been ages since I did anything in css, but maybe url(./images/image.jpg)
will work?
Edit:
Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.
I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.
I had set path css url image by
code { background:url(/images/xxx.jpg) no-repeat; }
and running file at IIS, so must to point default website to your project
how to running testing preview
type:
http://localhost/default.aspx
this is correct path same running on server
include file js or css can use "/" root path
cheers
Noboyband