I would like my default.aspx to use masterpage but have a different body than the rest of my webpages is this possible? Basically I want my default.aspx to have a background image for the entire page but still use the masterpage because I have menu and things I would like to use on that page as well. Is this possible?
You can define the styles and everything for a particular page in Content Page and not Master Page. In your case, if you want a separate styles and background for default.aspx, you can define those styles in default.aspx page.
inside of default.aspx do
<style>
BODY { background-image: url(....image here ....);}
</style>
I know it is not the nicest pattern but... cmon, masterpages
You can inline it on default.aspx
<style>
body{
/*Background stuff here */
}
</style>
or have an if on your master page
#if(currentpage == "home")
<div id="background">
</div>
#endif
or
#if(currentpage == "home")
<body style="background-stuff-here">
#else
<body>
#endif
Put these lines in you master page head section
<head>
<link type="text/css" rel="stylesheet" href="/styles/common1.css" />
<script type="text/javascript" src="/scripts/common1.js"></script>
<asp:contentplaceholder id="ExtraStylesAndScripts" runat="server" />
</head>
And these lines to you default page
<asp:content contentplaceholderid="ExtraStylesAndScripts" runat="server">
<link type="text/css" rel="stylesheet" href="/styles/extra1.css" />
<link type="text/css" rel="stylesheet" href="/styles/extra2.css" />
<script type="text/javascript" src="/scripts/extra1.js"></script>
<script type="text/javascript" src="/scripts/extra2.js"></script>
</asp:content>
Now you are free to set different page style for different content pages.
You can change background or other appearance in "styles/extra1.css" files.
A very simple solution would be a MultiView and pass in something like an enum object telling the master page what View to display. If you in the future need to add a different design for another page you can just add a View.
Related
Looking at some Razor views, I see a lot of times where a <style> tag is added directly in a view (CSHTML) file.
This seems to work fine, but in fact it adds the <style> tag inside the <body> tag, while it should generally be inside the <head> tag.
How would you some inline CSS to a single razor page so that it appears within the <head> tag? Is there a preferred way?
Like this:
Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
...
#RenderSection("HeadStyles", required: false)
</head>
<body>
...
</body>
</html>
Home/Index.cshtml or whatever other view you need to do this in
#section HeadStyles {
<style>
.custom-style { color: red; }
</style>
}
The reason why inclusion of <style> tags is not recommended inside <body> is because of causing FOUC.
But if your <style> tag applies to content that's after it in DOM, that risk is null.
No browser currently in use has any trouble parsing <style> tags placed in <body>.
Technically, when the browser meets a <style> tag in DOM it:
pauses rendering
reconstructs CSSOM to include the new declarations
rebuilds the already rendered DOM (this is where FOUC happens, if)
carries on with rendering
best variant is -
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- here is page content -->
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
in this case browser will load in this sequence
styles
content (which will be already styled)
scripts (which will not slow down page rendering in case if scipts are not so little)
I need some help figuring out the best way to go about adding jquery code to my aspx file. We have a big front end solution in VS2008 using a master page. In the master page we have a ContentPlaceHolder where you can add stuff to the <head>, but the location of the place holder is above the code which declares the local path to jquery. Would I need to move the ContentPlaceHolder to a location below the jquery? If so, couldn't doing that cause some potential issues? I tried adding an additional ContentPlaceHolder under the script declaration tags, but that caused ViewState errors (I think having to do with code behind I added for my page to allow CSS3 for IE).
Here is the relevant code from the master file:
<%# Master Language="C#" AutoEventWireup="True" CodeBehind="Class.Master.cs" Inherits="Company.Project.Masters.Class" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title><%# Page.Title %></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<asp:ContentPlaceHolder ID="cphHead" runat="server" >
</asp:ContentPlaceHolder>
<link href="~/inc/style.css" rel="stylesheet" type="text/css" />
<script src='<%# ResolveUrl("~/inc/utils.js") %>' type="text/javascript"></script>
<script type="text/javascript">
//some js stuff here
<style type="text/css">
// some css stuff here
</style>
<script language="javascript" type="text/javascript" src='local/path/to/jquery' ></script>
<script language="javascript" type="text/javascript" src='local/path/to/jquery-ui-1.10.3.custom.min.js") %>'></script>
<script type="text/javascript">
$(document).ready(function() {
//some jquery stuff here
})
});
</script>
</head>
Below is the code I have added to my page's .cs file to allow CSS3 elements to work in IE. This error looks like it is related to the ViewState error
protected void Page_Load(object sender, EventArgs e)
{
HtmlMeta xuac = new HtmlMeta();
xuac.HttpEquiv = "X-UA-Compatible";
xuac.Content = "IE=edge";
Header.Controls.AddAt(0, xuac);
}
When I add a new ContentPlaceHolder in the MasterPage I get the error:
Failed to load viewstate. The control tree into which viewstate is
being loaded must match the control tree that was used to save
viewstate during the previous request. For example, when adding
controls dynamically, the controls added during a post-back must match
the type and position of the controls added during the initial
request.
Coming to all your points one by one.
You can have multiple content place holders in master page and you can refer to them in other pages. You should add a contentplaceholder right after jQuery script. And add content to this placeholder from child pages, it should not create any kind of problem.
Please share the view-state error you are getting on adding extra contentplaceholder. You can explore browser console for more information on view state problems.
I have created a master page, which has the following css:
body { background-image:url(images/back.jpg); }
This image is the one I want to appear on my Index page. When a user clicks the "Next" button, I want to change the image to be a different one.
How can I do this?
you can over-ride the css of master page with new css on other page. The back-ground image for body loaded first will come on back ground the second one will be ignored.
You can use masterpage placeholders to the header
<head>
<link rel="stylesheet" type="text/css" href="master.css">
<asp:contentplaceholder id="Header" runat="server" />
</head>
Then add this code to your NewPage.aspx
<% # Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Header" Runat="Server">
<link rel="stylesheet" type="text/css" href="newpage.css" />
</asp:Content>
Now you can override the "CSS body" inside newpage.css
If you are loading Another page without page refresh then this will work:
HTML:
<button class="next">Next</button>
jQuery:
$(function() {
$('.next').click(function() {
$(body).css('background-image', 'url(images/back2.jpg)');
});
}):
And if navigating from one page to 2nd gets the page refreshed then
you can simply specify internal css.
I have a CSS stylesheet defined in the Master Page of my project. On one of the pages/views that inherits from the Master Page, I need to add another CSS stylesheet (I could also add it inline, though I'd rather not).
However, how to do this escapes me. Is this even possible?
In your master page, you can have
<!-- in Master Page -->
<head runat="server">
<link href="Style.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="header" runat="server">
</asp:ContentPlaceHolder>
</head>
In your view page, you can add more into the header,
<!-- in view Page -->
<asp:Content ID="viewContent" ContentPlaceHolderID="header" runat="server">
<link href="Style1.css" rel="stylesheet" type="text/css" />
</asp:Content>
The final page will be rendered as
<head runat="server">
<link href="Style.css" rel="stylesheet" type="text/css" />
<link href="Style1.css" rel="stylesheet" type="text/css" />
</head>
The header area of the master page can include a ContentPlaceHolder control. The child page can utilize this control to specify scripts or stylesheets to be consumed by the child. The contents of this place holder can obviously vary from child to child and is obviously not required to be used.
I have an APS.net app (C#) with several pages that use the same MasterPage. In that page, I have included a couple stylesheets like so:
<head runat="server">
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
</head>
These styles apply correctly to all content that is in the actual .master file (page), but are not applied to any pages that use the Master page (for instance default.aspx uses that master page and has a Content placeholder in it).
If I add these lines in each individual page:
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
Then the styles show up as expected... but it was my hope that I could include them in the master page so that I didn't need to include these references in each subsequent page too.
Because these files are not located physically in the same project (they are shared between several apps), i cannot just include them as an ASP.net theme that would be applied to all pages.
Update
In order to rule out the file locations problem, I used the absolute URL for these stylesheets...
<link href="https://myserver/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="https://myserver/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
That way, no matter where it is read from, the file can be located. This still exhibits the same behavior.
To me, it looks like the masterPage is rendered with the CSS styles (because they're in the same file) and then the child/calling page is rendered without the CSS styles (because they aren't in that file, they're in the masterPage) and then those two files are combined together (as opposed to combining them together first and THEN rendering the style elements for the combined pages). Adding to this belief was my previous example of adding the include for the CSS file in the calling page itself, which will cause it to display the CSS correctly.
You can view the source of this file, and in the head section, you can see the CSS styles linked correctly, but they aren't applied to any elements from the calling page while they are applied to all elements in the masterPage.
Is the content page in a different folder that the master? If so, you'll have to get the application relative path to the css files using ResolveUrl in the master page:
<link href='<%= ResolveUrl("~/apps/_lib/ui/styles1.css") %>' type="text/css" rel="stylesheet" />
Update: If this doesn't work, then you might have HTML or CSS errors like Lance suggested. Try using the HTML and CSS validators at w3schools.com. If it still doesn't work after fixing any errors, double check your CSS selectors with the rendered HTML as Steve suggested. ASP.Net's generated IDs have bitten me more than once.
What about this?
<link runat="server" href="~/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link runat="server" href="~/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
What jrummell posted is what I use on my sites to ensure that the links work if I were to move my pages around.
As far as rendering. The rendering is done on the client machine's browser. To the browser it has no idea the html is generated from multiple documents.
I would make sure your HTML and CSS are correct.
On a side note i have noticed the last week or so that VS2008 keeps messing my css stylesheets up, doing really random things like moving text around. However, I think this might just be something on my machine. Just something to check.
Here is some sample code I checked this just to make sure and this works.
Head of Master Page
<head runat="server">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
Content Place Holder
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="something">
Lance
</div>
</asp:Content>
Css in StyleSheet
.something{
color:Blue;
}
The result is "Lance" in Blue in the child page.
Maybe it might be your css selectors. When you add master pages, asp.net tacks on more prefixes to the ids.
I had a similar problem. As others have suggested, you should be able to use ResolveUrl to make sure the path is correct.
Unfortunately, this created a further problem for me. My head tag was runat server. My link tags were not.
The resolve url within my link tag would never execute. Instead, the C# code and response.write tags were being encoded and outputted to the page.
Bizarrely, the same technique in a script (non-runat server) tag would work as normal.
To solve the problem, I ended up writing the whole link tag within an ASP.Net Response.Write tag:
<%="<link href='" + ResolveUrl("~/apps/_lib/ui/styles.css") + "' rel='stylesheet' type='text/css' />"%>
That worked.
How strange. Somehow, it is all related to the head tag being runat sever.
It looks like you have done it correctly, so your error seems weird and sounds like maybe you've mady a typo in the master page. Try to look at the generated source (view source in the browser) of the two pages, one with the links in the master pages and one with the links in the web page, and compare the paths.
Something like this should work. You should be able to include the css in the header of the master. And then, include a ContentPlaceHolder in the header so if you need custom header stuff in your content pages you can do that. Does that not work?
<head>
<link href="/apps/_lib/ui/styles1.css" type="text/css" rel="stylesheet" />
<link href="/apps/_lib/ui/styles2.css" type="text/css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Ultimately you don't want a
<head></head>
tag in your content page, it's possible that is overriding your master page header.