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.
Related
I am trying to add custom css to my razor view. The route is working as i can see the html that is in the file, but when i try to add custom css it does not work.
I already tried the following code inside my Overview.cshtml, which is a view of my custom feature in sitecore:
<head>
<meta name="viewport" content="width=device-width" />
<title>Overview Rules</title>
<link href="~/Style/ExternalProfiling.css" rel="stylesheet" />
#RenderAssetsService.Current.RenderStyles()
</head>
Both are options inside the habitat solution, but both seem not to work. My file structure is as following:
The actual result is that there is no stylesheet linked to the cshtml file because i think it is overridden. I would like to know where i should place my css or maybe sass to make styling on my custom created view in the feature model to work.
I have a problem with my webmatrix in using an external style sheet,the page still loading and nothing appear,but when I put the css I used in a style tag inside the head tag the problem is solved , but i need to put them in an external file ... how ?
why I faced that problem ?
There isn't anything you do differently in WebMatrix for this (except that you may want to prepend the path to your file with a tilde (~) which has the effect of telling the server-side code to make an absolute path out of a relative one in ASP.Net Web-Pages [not sure about Web-Forms or MVC]).
You just do this:
In your HTML Page (in the <head> section):
<link href="~/someDirectory/someCSSFile.css" rel="Stylesheet" type="text/css" />
Then just make sure the css path and file name are correct, and you're good to go.
For many days I have been trying to figure out a work around to loading javascript and style sheets in my content pages.
How do I link all the resource files like .css and .js in the markup for the master page and then use these directly in the content pages without adding them to each of said content pages?
I found that we can link .css files by using themes and initializing a theme in the master page; But what about .js files and images?
How can they be linked in a master page and then accessed in the content pages?
Please point me in the right direction.
On a master page anything you put in the head will be present for all content pages that use that master.
That is to say if in your master page you have:
<head runat="server">
<script type="text/javascript" src="/js/pages/jquery.min.js"></script>
<script type="text/javascript" src="/js/pages/jquery.jscrollpane.min.js"></script>
</head>
then every content page will contain the same thing in the head.
If you had scripts that were used by some pages and not others then on a master page you can define an <asp:content> tag that is in the <head> of the master page.
Then in your content pages you can place links to your javascript files right into the content place holder for the content tag in the page head.
If you wanted to link pictures, I would suggest doing this through javascript. If you created a <script> block in your master page head with something like the following:
var ReusableImageVariable = new Image();
ReusableImageVariable.src = '\A\Path\To\Your\image.jgp';
Then on any content page you could place a script block that would use that ReusableImageVariable and copy it onto the document in a specified place:
<script type='text/javascript'>
document.getElementById('PlaceHolderForImage').appendChild(ReusableImageVariable);
</script>
Where PlaceHolderforImage is the id of a <div> or other containing element. This would help with browser load times as well because you are loading the images the same time you are loading the style sheets and scripts.
Finally if you wanted to use just ASP, I would define the images as properties of the master page. Then any content page can just access them in code behind and load them where ever you need them.
I assume we are talking web forms, not MVC? You can put scripts in the <asp:ScriptManager> control's <Scripts> collection, or <CompositeScript> list. You can get a reference to the ScriptManager via ScriptManager.GetCurrent(PageReference);
Images there isn't anything specifically like this that's built for images; however, it can be built.
I have a landing page created as a single html file with an external css file and a bunch of jpeg images. It looks fine and everything is good with it. I need to insert this page as an article in Joomla so that it looked the same way as it does now, without broken styles and missing images. It should show all header, footer and sidebar content from Joomla and the landing page as a regular page. What is the right way to do that?
Create a blank template for joomla and paste the whole body of your landing page to a joomla article.
Alternately, if you are using a totally different stylesheet, you may have better luck if you turn it into a custom template. Joomla's templating model is tremendously simple and abnormally flexible!
Try this
place the css,scripts,images in the root folder of your website.
path could be
/css/style.css or for localhost /joomla/css/style.css
/scripts/script.js or for localhost /joomla/scripts/script.js
/images/image.jpg or for localhost /joomla/images/image.jpg
copy and paste your html code including the file paths in article editor.
this could be
<link href="/css/style.css" rel="stylesheet" type="text/css" media="screen" />//for css
<script type="text/javascript" src="/scripts/scripts.js"></script>//for javascript
<img src="/images/image.jpg" />//for images
use absolute paths for locating your files.
this is irrespective of templates
I working on a project and I would like to have a printer friendly version of the Views I have. Is there anybody who already did this and have some tips how to accomplish this? (what kind Routing is used, etc.)
I was thinking of making a PrintController. In the ActionResult of a method in the PrintController to return a View with a specific masterpage.
public ActionResult Index(string printView)
{
return View(#"~/Views/Product/Index", "PrinterFriendly_MasterPage");
}
Stephan Walter doesn't advice to use this kind of redirecting (tip #24) because it is not the way MVC was meant to be.
On the View there will be a link to print the page, e.g.:
- normal link: www.example.com/product;
- print link: www.example.com/print/product;
I don't want to use javascript or AJAX. Just show the same View the user is watching, only with a different masterpage (which will have specific print stylesheets).
Thanks for the quick reply, but I it is not exactly the way I want it. I already have specific css files for printing.
Take a look at the following Dutch website for example Normal View and Print View.
I want to have a link which displays the same View but with another masterpage. In the other masterpage I include the css files for printing.
So, the user gets a View which is almost the same as "Print preview" from the browsers menu.
The advantage of doing it this way is, it will comply to the WCAG standard.
What about just creating a print css which will hide navigation and whatever else you don't want showing on a print.
see http://meyerweb.com/eric/articles/webrev/200001.html and http://www.alistapart.com/articles/goingtoprint/ for more info.
Don't create separate views. Just create a print specific CSS file using media=print in the link, and the browser should automatically use this CSS when printing.
Why not just specify the "media" attribute in your css link?
<link href="normal.css" rel="stylesheet" media="screen" type="text/css" />
<link href="print.css" rel="stylesheet" media="print" type="text/css" />
That way you can use 1 masterpage but have both screen view and print view differently.