Hello I have an MVC application where a page is converted into a PDF using iTextSharp. I have a separate PDF style sheet called pdfStyleSheet.css that links to _PDFLayout. When linking the CSS page to my page layout the styles aren't being passed. My link is below. However if I put an inner style in _PDFLayout it works fine. Any ideas what I'm doing wrong?
The code below does not work
_PDFLayout Link
<link rel="stylesheet" type="text/css" href="~/Content/pdfStyleSheet.css" />
pdfStyleSheet.css
.test {
font-weight:bold;
color:red;
}
HTML
<div class="test">
#Html.DisplayNameFor(model => model.Requestor)
</div>
Controller
public ActionResult getPDF(int id)
{
MEOmodel model = _repository.GetMEOById(id);
return new PdfActionResult(model);
}
Related
I added a theme in my HTML page by:
<link rel="alternate stylesheet" href="css/dark.css" title="dark">
this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?
You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:
HTML
<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>
JavaScript
document.getElementById('switch').onclick = function() {
if (document.getElementById('theme').href == "dark.css") {
document.getElementById('theme').href = "light.css";
} else {
document.getElementById('theme').href = "dark.css";
}
};
Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:
dark.css
body{
background: #000;
}
light.css
body{
background: #fff;
}
this is very simple you need to bind the click to function and call it:
Replacing css file on the fly (and apply the new style to the page)
I'm making a website with spring-boot & spring-security which prefers to supply freemarker as view. I don't know ftl much, and now I need use adminLTE's CSS and JS files in my ftl, but how?
<html lang="en">
<#assign basePath=request.contextPath>
<#macro head>
...
<script src="${basePath}WEB-INF/AdminLTE/dist/js/adminlte.min.js"></script>
<link src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/line/line.css" rel="stylesheet"></link>
<script src="${basePath}WEB-INF/AdminLTE/plugins/iCheck/icheck.js"></script>
...
<#macro>
you can include css file by using <#include > tag,
place the stylesheet in the directory and use the
<#include "/{path to style sheet}/Styles.css">
and make sure your style sheet is inside the styles element:
<style type="text/css">
...
</style>
Example of this approach is
Test Template
<html>
<head>
<#include "css/test.css">
</head>
<body>
.......................
</body>
</html>
test.css
<style type="text/css">
body{background-color:#C5C5C0;}
*{font-family:Tahoma, Verdana, Helvetica, sans-serif;}
</style>
you can declare some param in code and use it to fill full path to css
// in java
params.put("htmlIncludePath", "classpath:/templates/pdfTemplates/include/");
...
// in ftl
<link href="${htmlIncludePath}manrope.css" rel="stylesheet">
physically files should be located in src/main/resources/templates/pdfTemplates/include
I use this simple solution.
I created a dedicated Get method for css-s.
#GetMapping(value="/css/{cssFile}")
public #ResponseBody byte[] getFile(#PathVariable("cssFile") String cssFile) throws IOException {
InputStream in = getClass()
.getResourceAsStream("/css/" + cssFile);
try {
return in.readAllBytes();
} catch (Exception e){
var error = new String("ERROR: css file (/css/" + cssFile + ") not found");
return error.getBytes();
}
}
Now I can reference the css file in the usual html way right in .ftlh file. Just need to put my file under resources/css/ directory.
<html>
<head>
<link href="css/general.css" rel="stylesheet">
</head>
<body>
...
Please also note that the suggested method (see other responses) with include statement, will produce a html file with full content of the corresponding css file not a link to css. So if you have heavy css files expect that their content will be literally included into html files received by clients.
I am using 3 stylesheets (style1, style2, style3) for many pages.
style1 for my web header,
style2 for my contents and
style3 for footer
Now I want to apply a new stylesheet on my home page and disable style2 for only home page.
I added new classes for different elements but at some places it is still detecting my previous stylesheets. How can I disable CSS on a specific page?
Since you did not include the code to see how you doing it, and considering you are having the header as an include file:
USE PHP:
In your Home page before including header:
<?php $homepage = 1; ?>
//include your header//
In your header where you are referencing CSS:
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/style3.css" rel="stylesheet" type="text/css" />
<link href="<?php if($homepage == 1){ echo "css/Home-style.css";}else{ echo "css/style2.css";}?>" rel="stylesheet" type="text/css" />
Your files should be in PHP for this to work.
change "Home-style.css" to your new CSS file for home page.
Check for page then grab the dom stylesheets array object and disable anything you want .
if(window.location.href.indexOf("<name in page url >") > -1) {
//Next line will disable the 2nd stylsheet in the document .
document.styleSheets[1].disabled = true;
}
Also fyi you can view all style sheets in the dom with:
console.log(document.styleSheets)
This should give you the appropriate index of whatever stylesheet you want to remove.
You have to use jQuery to disable a stylesheet like :
<script>
$(function () {
if (location.pathname.indexOf('/pagename') >= 0) {
$('link[href*="/media/css/csspagename.css"]').prop('disable', true);
}
});
</script>
Or, if that's impossible for some reason, a simpler question: how can I get the physical directory of the current file from a layout page?
this.VirtualPath will refer to the virtual path of the layout file itself, and this.NormalizePath(".") will only get the virtual path of the directory containing the layout file.
I just want to be able to have a site that doesn't have the possibility of relative links suddenly not working just because some guy typed http://example.com/index/some/other/junk for no reason.
EDIT to show you what I mean:
TestLayout.cshtml
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div style="background: grey">
#Request.RawUrl<br />
#Request.Url.AbsolutePath<br />
#Request.Url.AbsoluteUri<br />
#Request.Url.LocalPath<br />
#Request.CurrentExecutionFilePath<br />
#Request.FilePath<br />
#Request.Path<br />
#VirtualPath<br />
</div>
<div style="background: red">
#RenderBody()
</div>
</body>
</html>
Test.cshtml
#{
Layout = "TestLayout.cshtml";
}
#Request.RawUrl<br />
#Request.Url.AbsolutePath<br />
#Request.Url.AbsoluteUri<br />
#Request.Url.LocalPath<br />
#Request.CurrentExecutionFilePath<br />
#Request.FilePath<br />
#Request.Path<br />
#VirtualPath<br />
If you go to http://example.com/Test/random/junk/at/the/end, you'll find that the only lines that correctly trim all the cruft are the two #VirtualPath lines - however, the VirtualPath property of the layout page is TestLayout.cshtml. How do I access Test.cshtml's VirtualPath property from within TestLayout.cshtml?
So, after many, many hours, I've figured it out.
No, you cannot disable the automatic URL routing of ASP.Net WebPages - it's baked in to the WebPageRoute class. The only way to disable it is to disable WebPages entirely.
There are two ways that you can access the VirtualPath of the parent .cshtml file from a child layout.
You can manually parse the URL. This is fairly involved, although all the work has been done already in the WebPageRoute.cs file, so you can just nick it with a few tweaks. The problem is that you can only get the VirtualPath of the topmost parent page.
You can extend the WebPage class, overriding the ConfigurePage method, and store the argument for later use. Example code follows:
CustomWebPage.cs
using System.Web;
using System.Web.WebPages;
public abstract class CustomWebPage : WebPage
{
private WebPageBase _parentPage;
public WebPageBase ParentPage { get; private set; }
protected override void ConfigurePage(WebPageBase parentPage)
{
ParentPage = parentPage;
}
}
TestLayout.cshtml
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div style="background: grey">
Inside the layout page!<br/>
VirtualPath is: #VirtualPath<br />
Parent's VirtualPath is: #ParentPage.VirtualPath
</div>
<div style="background: red">
#RenderBody()
</div>
</body>
</html>
Test.cshtml
#{
Layout = "TestLayout.cshtml";
}
Inside the main test page!<br />
VirtualPath is #VirtualPath
Output:
Inside the layout page!
VirtualPath is: ~/TestLayout.cshtml
Parent's VirtualPath is: ~/Test.cshtml
Inside the main test page!
VirtualPath is ~/Test.cshtml
I am successfully using the Nancy Razor engine. I have a _Master.cshtml Layout which defines a razor #section for my javascript and others for my #Html.Partial() and CSS files.
This all works fine.
Edit 1
See here for more useful info including a neat extension method that fixes the problem:
Populate a Razor Section From a Partial
_Master Layout
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
<!DOCTYPE html>
<html lang="en">
<head>
//Head stuff
#RenderSection("CSS", required: false)
</head>
<body>
//Body Stuff
#RenderBody()
#RenderSection("Partial", required: false)
#RenderSection("JS", required: false)
</body>
</html>
A Example View
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
#{
Layout = "_Master.cshtml";
}
// View HTML
#section Partial{
#Html.Partial("Modal/FindWizard")
}
#section JS{
<script src="/Scripts/Coffee/example.view.min.js"> </script>
}
You can see from the Example View above that I have included a Partial called FindWizard. I would like this file to also take advantage of the razor sections defined in the _Master Layout.
Something like this:
FindWizard Partial with #sections
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
<div>
//.. Wizard HTML
</div>
#section CSS{
<link href="/Content/css/bootstrap-wizard.css" rel="stylesheet" />
}
#section JS{
<script src="/Scripts/min/bootstrap-wizard.min.js"></script>
}
I have tried this but I cannot get the razor #sections from the Partial file to render into the final response.
Is this technique possible? Maybe its a plain bad idea as it may lead to duplicate js files being included if a Partial is re-used in the same view?
Thanks