CSS files loaded in Layout does not apply to Partial Views - asp.net

I am linking a generic css file from my _ReportLayout file for my whole project, but for some reason it does not apply to my partial views! The css styles load just fine for the rendered body, but not the partial views inside it. (Examples given in the context of a report/journal writing system.)
_ReportLayout:
<head>
...
<link href="~/Content/Report.css" rel="stylesheet" type="text/css" />
</head>
Rendered body:
#model JournalSystem.Models.Report
#{
ViewBag.Title = "Write Report";
Layout = "~/Views/Shared/_Report.cshtml";
}
#Html.Partial("~/Views/Journal/RapportSections/Title_Banner.cshtml", Model)
<h2>More report entries...</h2>
The partial view:
#model JournalSystem.Models.Report
<header>
<h1 class="title">
#Html.DisplayFor(r => r.SomeEntry.Name)
</h1>
<img class="logo" src="~/Images/Company_logo.png"/>
</header>
What really confuses me is that styles written written directly with scripts tags in the _ReportLayout file will apply to the partial views, it just won't work with external style sheets.
Can someone please help me on this one? I don't want to write the entire css inside script tags. :-)
Solved, see comments:
Reloading the entire project in Visual Studio seemed to be the solution - the CSS files edited in VS were not the ones uploaded to the page. Tips, update CSS files in the browser with CRTL+R (the files get cached). Thanks!

Related

Adobe AEM | Component is not being created in content folder

I'm trying to add a logo component inside a new component that I've created. The project was created using the eclipse aem plugin.
My component, that inherits from a native component.
My content component
<!DOCTYPE html>
<html>
<head>
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css # categories='paiva.all'}" data-sly-unwrap/>
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
<title>${currentPage.title || currentPage.name}</title>
</head>
<body>
<div class="page__logo" data-sly-resource="logo"></div>
</body>
</html>
My template
My template details
A page using the template
The error
Looking at the content folder I noticed that the component that I added in my component pagina.html does not exists at content folder. But when I add a component to the parsys, it does work.
If I add the component manually, it works.
Is that normal? If not, what should I do?
When you add a component using the UI, I suppose yo mean adding it to a paragraph system (parsys). When that happens a new resource of the appropriate resource type is added below the parsys resource.
In your case, you are statically including a resource which is missing. Sling then cannot render it.
The best solution is to add a 'logo' resource below the jcr:content resource in your template. That way the resource will be there when the page is initially created.
You could also force the resourceType of the resource when including it, then it would inject a synthetic resource. (but I would do the first option)

Play swf file on webpage

Hey guys I am trying to play a .swf file on my web page I have already tried to embed it using HTML and it works. But is there anyway of playing a .swf file after button click event in asp.net?
Before you get to carried away with using flash could I urge you to read this http://occupyflash.org/ and then invest a little of your time researching html5 (specifically canvas) :)... http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/ and this http://webdesign.about.com/od/html5tutorials/a/canvas-vs-svg-vs-flash.htm will give you a good start.
Edit
Without seeing your current code I can't give a precise answer but this should work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src='insert-route-to.swf' id='insert-id-here' controls>
Your browser does not support HTML5 videos please Upgrade.
</video>
<button onclick="document.getElementById('insert-id-here').play()">Play</button>
<button onclick="document.getElementById('insert-id-here').pause()">Pause</button>
</body>
</html>
on button click
Response.redirect("file path");
something like:
Response.redirect("Video/abc.swf");
where "Video" is folder name which is present in project folder and "abc" is file name.

My jsp page doesn't see css styling

I know that there are many similar issues in google, but I can't find one that help me..
When I include a css file in my JSP page it doesn't work:
<link rel="stylesheet" type="text/css" ../../css/car_rental.css">
If I try this:
<%# include file="../../css/style.css"%>
it throws exception
/WEB-INF/view/../../css/style.css" file not found
How can I get rid of WEB-INF/view/ prefix?
P.S. my jsp page is located at /WEB-INF/view/ folder, and my css file at /css/ folder
It looks like you are referencing your style sheet via a server side include. The <%# include file="../../css/style.css"%> tag will inject the contents of the named file into the JSP containing the tag, as if it were copied and pasted. It is unlikely your JSP code will need to modify the contents of your cascading style sheet.
Try replacing the <%# include file="../../css/style.css"%> tag with the HTML tag to include your stylesheet.
<LINK href="/css/style.css" rel="stylesheet" type="text/css">
<%# include file="XYZ" %> statically includes the content of your file as part of compiled servlet response.
So even if it successfully finds the CSS file, its content will be treated as normal text and will be flushed in response.
This means that your page will simply display the content of CSS and there wouldn't be any styling that would actually occur
You need to use the link tag in the head. It directs the browser to apply the style.
Also, relative paths do not work in include, as you can see from the error.
Use:
<link href="../../css/style.css" rel="stylesheet" type="text/css">

How would one get Google XML Pages to recognize and allow new HTML 5 elements?

Google XML Pages say they support "standard html as long as it's formatted as xml" but they seem to only support html 4.0. The namespace used for supporting html is http://www.w3.org/1999/xhtml and generating output from a gxp that contains elements like <header> <nav> or <footer> complains that the element is unknown in the http://www.w3.org/1999/xhtml namespace.
Is there some different namespace I should be using or do gxps really only support HTML 4?
Here's a reference example gxp file where removing the wrapping header tag works just fine:
<gxp:template
name='com.example.gxps.Test'
xmlns:gxp='http://google.com/2001/gxp'
xmlns='http://www.w3.org/1999/xhtml'>
<html>
<body>
<header>
<b>
<gxp:msg>Hello,</gxp:msg>
<br/>
<gxp:msg>World!</gxp:msg>
</b>
</header>
</body>
</html>
</gxp:template>
As is though, it'll output something like:
java/com/example/gxps/Test.gxp:7:5:7:5: Unknown element <header> (in http://www.w3.org/1999/xhtml namespace)
GXP must have an (old) version of the Namespace definitions, built into it.
It appears that HTML5 and HTML4 use the same namespace, so there's no different namespace you need to use in your GXP pages. This is just an issue of updating/ adding the internal GXP definitions.
Download the source code & find where the definitions are! Ideally you can post/commit the updates back to the GXP project.
(I and other people are interested in GXP myself, so.. this would be really good work to do.)
Let me know how you go!

ASP MVC import CSS

I am new to ASP.NET MVC and I am trying to include a CSS file into my view.
The view is strongly typed and has a List Scaffold Template, it is linked to a master page which itself is linked to a css file and works fine for the master slide but when trying to link the view to a seperate css file I cant as I cannot include tags.
Anybody know how I can resolve this?
<link href="#Url.Content("~/Content/YOURSTYLESHEET.css")" rel="stylesheet" type="text/css" />
You should add a new content place holder in your site.master page in the head tags, i always have one called "HeadContent" which i use for inclusion of scripts and css that i only want on individual pages.

Resources