We have a custom master page for our sites. If on the home page we wish to style it differntley to all the other pages (including the homepage of sub sites). Normaly to do something like this I would add an ID to the page and use CSS to target that ID differntley. Is it possible to add an ID to body tag in SharePoint 2010. How would you go about doing this?
2
-
2Why you need Id for body? Body tag is anyway unique on the page– Amit KumawatCommented Oct 20, 2011 at 9:50
-
For the main homepage we(well marketing) want to use specfic branding to the rest of the site. They want the home page to be fixed with and the rest of the site fluid.– JohnCommented Oct 20, 2011 at 9:57
Add a comment
|
2 Answers
You'd have to have some kind of identifier on the page itself to tell it what stylesheet to use if it is to only take effect on 1 specific page.
I'd create 2 seperate stylesheets and then use either jQuery or make inline server-code (in the masterpage of course) to search for an identifier to determine which of the 2 stylesheets to be used.
The identifier could be some hidden value on the page itself or some parameter in the url (example: http://myserver/pages/default.aspx?id=01).
Beware that it is kind of difficult aiming styling for 1 single page.
-
I suppose I could add a webart to the page with a unique ID. I could then check with jQuery to see if that ID exisits. If it does then add an ID to the body tag and let the CSS pick it up. Will see if that would work.– JohnCommented Oct 20, 2011 at 10:00
The approach I would take for this would be to create a custom page layout for your home page, that includes a separate style sheet to handle your fixed width. You shouldn't need jQuery to do any of this, and I wouldn't recommend that approach anyway since the user experience would potentially be pretty poor (everything loading as fluid for a split second then snapping in to fixed width).
Using a custom page layout would allow you to create page-level styling, and you could easily load in another style sheet after your custom branded one to override that specific page. This is the same way that pages within a blog site work (as an example).
Create a custom page layout, call it "Fixed Width Home Page" or something and deploy it with your branding solution. No need for any changes to the master page, and no need for script or code to handle detection or overrides.
