I'm creating a web project that and i got confused when i saw this in my head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
The last two lines are making imports into my app, but I've no files named ccs inside Content directory, and it comes worst when I have no directory named bundles, but incredibly it works!
Someone could to explain it to me?
PS.:
Directories structure:
CSS
|
|->bootstrap.css
|->bootstrap.min.css
|->Site.css
and I found a file named Modernizr inside Scripts directory.
To my knowledge, in some versions of .NET MVC (using Visual Studio), you (or someone else) can setup a BundleConfig.csfile in your project. When you open the file ((mine is located in App_Start > BundleConfig.cs), you'll see bundle registrations. This is a .NET bundler that includes various groups of files.
Depending on your app, it can be useful to create groups or bundles of files that are dependent upon one another, but can easily be included or omitted from a _Layout file for optimization.
Here's an example of one of our bundles for our company editor (which by it's name, is all the scripts we need for our company editor, and nothing else):
bundles.Add(
CreateScriptBundle("~/bundles/crm/companyeditor")
.Include("~/Scripts/app/CRM/CompanyEditor/commonEvents.min.js")
.IncludeDirectory("~/Scripts/app/CRM/CompanyEditor", "*.min.js", false)
.Include("~/Scripts/app/RFQOffering/RFQs.min.js")
.Include("~/Scripts/app/RFQOffering/editSubscriptions.min.js")
.Include("~/Scripts/app/Quotes/sentQuotesEditorView.min.js")
);
So instead of including a <script src=""></script> for each of those files, we created a bundle and just use the #Scripts.Render("~/bundles/crm/companyeditor") in our _Layout file for the company editor (in our case).
It's calling the files included in that particular bundle which is declared inside the BundleConfig class in the App_Start folder.
In that particular case The call to #Styles.Render("~/Content/css") is calling "~/Content/site.css"
You can read this document for more understanding about #Styles.Render() and #Scripts.Render() methods.
Related
So, I've spent like last hour trying to solve it, but I just can't get custom .css file to get linked with html files in Spring 5. I'm using Thymeleaf, Bootstrap & jQuery for frontend works. I'm using Intellij Community Edition.
My files hierarchy looks like this:
java
project_files
resources
static
css
main.css
templates
main.html
I have a line in main.html:
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}" href="../../css/main.css"/>
that should link my styles with the .html file. What can be wrong?
Try changing a little bit your folder structure, create a folder under resources called static, and a folder called css under static and place the css files there, something like:
🗁 resources
└─── 🗁 static
└─── 🗁 css
└─── main.css
Then you should be able to access it by using:
<link rel="stylesheet" type="text/css" th:href="#{/css/main.css}"/>
I have config in project .properties
file.pages =dashboard/**/*.html
in dashboard/index.html i have
<!-- //-beg- concat_js -->
<script src="../js/plugins.js"></script>
<script src="../js/base64.js"></script>
<script src="../js/toastr.js"></script>
<script src="../js/jquery.h5validate.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="js/script.js"></script>
<!-- //-end- concat_js -->
But I am getting the build output as
<script src="js/c1212c4.js"></script>
but file is generated in
../js/c1212c4.js
You've got two separate script directories that don't have a child/parent relationship (js/vendor, for example). You can configure it to work that way by editing the build.xml, but we didn't design it to do so out of the box. It's basically because the regular expression that does the replace captures the directory based on the path to script.js in the source but other operations can be based on dir.js (which is what I'm assuming is happening here) or other operations (the concatenation, for example, just follows file system links to pull in the files to concatenate.) Basing the build script on a default h5bp install (one js directory with children), we're covered, but with this configuration it's not straightforward.
To solve your problem, pick one directory or edit the build.xml to point to your output directory.
I have no problem implementing a solution in my pom.xml using the samaxes plugin to minify and generate my required example.min.css file, is there script, how can I keep the development environment utilizing the CSS files on the fly without greatly changing the CSS source files?
I have the following code in my xhtml doc:
.
.
<link type="text/css" rel="stylesheet"
href="/assets/css/forms.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/content.css"/>
<link type="text/css" rel="stylesheet"
href="/assets/css/images.css"/>
.
.
My pom creates an example.min.css and saves it in the same location using samaxes beautifully. I want to use this in my page but only in production...I want to be able to keep up with development on the fly on these various files but when I do the maven compile, it generates the example.min.css file from this and I intend on using this instead in production. There's tons of great answers saying which plugins to use to optimize and minify my css and js, I just need to know if there's a best-practice out there to point to them without bringing in another plugin like wr04J or is there some js I can implement that can build a conditional stylesheet statement on the fly if I use a param or something?
Originally I was using the concept of applying a rendered attribute to a ui:fragment tag that would render one way or another depending on a bean property that checked for the existence of the Maven debug property but this generated way too much overhead and just seemed like a bad hack just to get it to work. I need a better, simpler idea.
With the current version of Minify Maven Plugin you have to do something like this:
if productionEnvironment
<script src="js/bundle.min.js"/>
else
<script src="js/bundle.js"/>
end
It remains easy enough to debug and you only have to define your source files once (in the pom).
This will, however, be fixed in a future version of the plugin. Source Maps might soon become a reality and I'm planning to add support for it very soon.
I'm doing my first zend application, following the official user's guide, I set up a standard zend application (with zend studio 9 and ZF 1.11) and I want to add images and CSS stylesheets to my .phtml pages. When I put the css files in "myApplicationName/public/css" everything works fine, but when I try to put them in another directory such as "myApplicationName/application/layouts/css", they don't get considered,
what kind of paths should i use to link them to phtml pages?
I've tried relative paths, things like :
<link rel="stylesheet" type="text/css" media="screen" href="../../css/layout_look_like.css" />
and also :
<link rel="stylesheet" type="text/css" media="screen" href="/application/layouts/css/layout_look_like.css" />
but it doesn't seem to work,
I've also tried paths with $this->baseUrl(), but <?php echo $this->baseUrl();?> returns nothing.
thanks for help.
CSS, Images, and JS and any other publicly accessible static assets must live under the public folder as this is your web server DOCUMENT_ROOT (ie. http://yourdomain/). Beyond that you can use whatever structure you like.
Your CSS files should be inside the public directory. There should be no need to place them in your application directory. If you really need to do it, you could make a symbolic link to the public directory.
To include a CSS file (stored in the public directory) to your view/layout, use:
<?php echo $this->headLink()->appendStylesheet($this->baseUrl('/styles/basic.css')); ?>
You have to write like below mentioned code for your layout_look_like.css file
echo $this->headLink()->appendStylesheet($this->baseUrl('/css/layout_look_like.css'));
In Eclipse, I created a Dynamic Web Project and a JSP file under WebContent folder. I also created a CSS file under the WebContent folder. Then I use <link rel="stylesheet" type="text/css" href="XXX.css"> in the JSP to link to the CSS file but when I run on web server (Tomcat) the CSS didn't apply. Can someone tell me why?
You must put your web project name before the address path of your css file
Example:
<link rel="stylesheet" href="/YourProjectName/XXX.css" type="text/css">
or in more dynamic way:
<link rel="stylesheet" href="${pageContext.request.contextPath}/XXX.css" />
Have fun :)
You can use: With style.css file in WEB-INF/jsp folder
<style type="text/css">
<%#include file="css/style.css" %>
</style>
NOTE
This however copies the entire source of the CSS file into the HTML
output of the JSP page. In other words, this is a server-side include,
not a client-side resource reference. So you effectively miss the
advantage that the browser can cache static resources and this way you
end up with a bandwidth waste because the very same CSS file is
embedded in every single page. In other words, a bad idea in terms of
performance and efficiency.
as #BalusC described in comment! you want to test your style.css file anyway, this is a solution.
you can use
<link rel="stylesheet" type="text/css" href="path/css">
You should restart eclipse so that it maps all css and javascript files again.
I worked for me.