none
Using a custom style sheet in a specific page

    Question

  • I'm a new user of SharePoint, and I don't have time to learn it from the beginning before this problem has to be solved. I hope someone can point me in the right direction.

    I've got a page which contains some fixed text and some placeholders. A user is supposed to make a copy of the page, fill in the placeholders, and link it into the part of the site that they are responsible for.

    The problem is that the page requires some custom styles. I need a good way to incorporate them.

    Modifying the site's default style sheet (I'm not sure what SharePoint calls it) is not a good approach because only this page and its clones need these styles. I've found instructions for using the cascading property of CSS to introduce new styles without touching the default style sheet itself, but all of them seem to affect the entire site, which is still not a good approach.

    The solution I'm using is to put an inline style sheet in the page's body with the "scoped" keyword. That's also not a good approach because each clone of the page gets its own instance of the style sheet. I want to store the styles in a file and have each clone of the page inherit a reference to it.

    Does SharePoint provide a way to accomplish this?
    Thursday, July 18, 2013 4:31 PM

All replies

  • Hi,

    You can create your own page layout. This will enable you to control the layout of the page and also the css for that particular page so that all pages created from that page layout will have a consistent look and feel.

    Few good links for creating a page layout -

    http://blog.beckybertram.com/Lists/Posts/Post.aspx?ID=71

    http://www.dotnetcurry.com/ShowArticle.aspx?ID=638

    http://msdn.microsoft.com/en-us/library/jj822368.aspx

    Hope it helps :-)

    Narahari

    Thursday, July 18, 2013 4:50 PM
  • Thank you for the suggestions, Narahari. Unfortunately they're a little beyond my level of experience with SharePoint. Perhaps I'm asking for someone to solve my problem by waving a magic wand, and I need to start learning SharePoint with the basics no matter how much it inconveniences my project, but before I do that I'd like to make one more effort at getting clarity.

    The first link you gave assumed I use Visual Studio as a design tool. I doubt that my organization has a copy of Visual Studio (we're mostly a Java/Linux shop), so I skipped that one. I skipped the second link because I couldn't load the page, apparently due to a server problem.

    The third link assumes that I use Design Manager. I don't know what that is. When I tried to find information on the Web I found articles about SharePoint Designer, and I'm not sure if that's the same thing. In any case the instructions for starting SharePoint Designer didn't work; they show how to start it from an entry in the Site Actions menu, but on my site the entry isn't there.

    Can you help straighten this out for me? I'll be very grateful if so.

    Thursday, July 18, 2013 6:05 PM
  • http://office.microsoft.com/en-us/sharepoint-designer-help/managing-sharepoint-designer-2010-HA101838275.aspx

    SharePoint Designer is free tool that you can download on your desktop to work with SharePoint. It is easy to learn and you will find loads of tutorial online for working with something very specific. The community is rich of ideas.

    You can define custom style sheet for a page and store it in a txt file. On your particular page, just reference that through a content editor web part.  http://techtrainingnotes.blogspot.com/2012/05/adding-javascript-and-css-to-sharepoint.html


    Regards, Kapil ***Please mark answer as Helpful or Answered after consideration***

    Thursday, July 18, 2013 6:55 PM
  • Thank you, Kapil. I'm closer to understanding this now, but I'm not quite there.

    You said I should store the style sheet in "a txt file." That's puzzling, because a style sheet normally goes in a css file. Are the rules different in SharePoint, or are you using "txt" to mean a text file, as opposed to a binary file?

    Where do I store the style sheet? Shared Documents is the only relevant location I see. But if I'm storing it from SharePoint Designer instead of SharePoint's built-in editor, perhaps it will give me other options.

    Where do I reference the style sheet? The blog you mentioned says to insert a link to it with SharePoint Designer "just before the ending content tag for PlaceHolderMain." I guess I'll find out where that is when I use the tool, but shouldn't the reference go in the header section, like it would in any other HTML page?

    You said I should reference the style sheet file "through a content editor web part." It's not clear how that relates to the blog's instructions. I've tried to learn what a web part is, but it seems to be for reusable content, so I have trouble understanding how it can be used to include a style sheet.

    What URL should I use to reference the style sheet? I don't know how SharePoint Designer will represent the file's location, so I don't know where in the document space it will end up.

    Finally: I installed SharePoint Designer, but when I started it, it wanted me to open my SharePoint site through an Open File dialog. I assumed that it would access my pages through the same channels as SharePoint, subject to my SharePoint privileges; but if it did that, it would know where the site is, and apparently it doesn't. How am I to deal with this? I doubt that the sysadmin will want to grant me access to the company's SharePoint web site through the file system. I know that if I were the sysadmin, I wouldn't want to do that!


    • Edited by orthoducks Thursday, July 18, 2013 9:28 PM typo correction
    Thursday, July 18, 2013 9:19 PM
  • Hi,

    For reusing styles and layout, Page layout is the most elegant option. But it requires little coding.

    The easiest option (though not very clean) will be to use a content editor webpart and reference a css file through it.

    Follow the steps below to do this -

    1. Create your CSS file with all the required styles. You are correct - The extension is ".css" and not ".txt ". Make sure to use the tag <style> at the beginning and the tag </style> at the end of the css file.

    2. Upload this CSS file to a document library. Normally we use the libraries "Style Library" or "Site Assets" to store this file. If you cannot find it, you can upload it to any library even "Shared Documents" also. (not recommended though as people use this library for uploading other documents too)

    3. (Optional) -  Make sure to check-in and publish this file if that is enabled in your library where you are uploading.

    4. Right click on the uploaded file and click "Properties" to fetch the complete url to the file. Store this as we need it later.

    To add a content editor webpart to the page, follow the steps 1-7 as mentioned in the link below -

    http://www.ucdenver.edu/about/departments/WebServices/sharepoint/onlineTraining/more/webparts/Pages/Contenteditorwebpart.aspx

    8. After step 7, click on the black triangle shown in the top right corner of the webpart to launch a dropdown menu. In the menu, click "Edit Web Part". This will refresh the page and you will get a webpart properties box with a title "Content Editor" on the right side of your page (you may need to scroll your page to the right to see it.)

    9. In the webpart properties box, there will be a textbox shown under content link. Simply paste the css file url (stored earlier) here and click "Ok". SharePoint will automatically convert the absolute url to your css file into a relative path :-)

    10. Now go to the Page tab on the ribbon and click "Stop Editing" to save the page.

    You should see your changes now.

    If you are able to see the changes but not others, follow step 3.

    Hope it helps....

    Narahari

    ***Please mark answer as Helpful or Answered after consideration***

    Friday, July 19, 2013 3:54 AM
  • Hi ,

           Here we have a lot of solutions .I just want to say if you want to customize your layout just create a file with extension .css  and store it in sharepoint site style library or any other folder.Give reference of his sheet to your site master page.

    Now whatever class you want to apply of yopur css file on your page you can apply to your pages.

    Hope this helps.:)


    Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

    Friday, July 19, 2013 10:12 AM
  • Thank you, Narahari and MeShare.

    I've made a discovery which sets me back a bit. Throughout this adventure I've been puzzled and impeded because the instructions I receive have continually failed to match what SharePoint does. I finally realized why: I was told that my shop runs SharePoint 2010, when in fact it runs SharePoint 2007.

    I got stuck in the ucdenver instructions because the editing page is nothing like the one described, and I can't figure out how to use it to get the desired result.

    I'm going to post my question in the legacy forum, but I'll keep checking this one, in case anyone would like to continue assisting me.

    Friday, July 19, 2013 4:16 PM
  • Hi,

    The ucdenver site in my post above is based on SP 2010 interface.The interface in SP 2010 and 2007 are completely different. Since you have SP 2007, instead of following the steps 1-7 from ucdenver (which is based on SP 2010), follow the steps 1-7 from the link below which is based on SP 2007. 

    http://www.fpweb.net/support/microsoft-sharepoint/tutorials/sharepoint-2007/web-parts/content-editor/#

    All the rest of my steps and their order will be exactly same.

    Hope it helps :-)

    Narahari
    Friday, July 19, 2013 4:41 PM
  • OK... the UI of the content editor web part looked rather different from that described on the fpweb.net page -- I don't know why -- but it was similar enough that I was able to figure out what to do.

    When I finished following your original instructions, though, I found no joy. The entire content of the page disappeared from the display (except for the content editor web part).

    When I removed the URL of the CSS file from the "Content Link" box, all of the content reappeared. The same thing happened when I entered a URL that didn't point to a file.

    I compared the page source generated in the two cases (with a valid URL and no displayed content, and with an invalid URL and displayed content). I found that when the content wasn't being displayed, it actually disappeared from the source. There were a few other differences that I didn't understand, but they looked incidental.

    In each case I found nothing in the source that seemed related to the URL in the Content Link box.

    Perhaps I made a mistake in following the procedure, but I've looked for one and I don't see it.

    Friday, July 19, 2013 11:01 PM
  • Please try this -

    Follow all the steps from fpweb.net site except for step 9. In step 9, instead of adding HTML to the builder area, add all your css styles (make sure to enclose them withing <style></style> tags) into the Builder Text Area and click Save.

    If this works, we will be sure that css reference is an issue in your case.

    Narahari 


    Saturday, July 20, 2013 4:40 AM
  • Thank you for sticking with me Narahari.

    At this point I think the discrepancies between the fpweb.net instructions and SharePoint's actual behavior become an important issue rather than an incidental puzzle. If I have to solve my problem by tweaking the instructions, any discrepancy could be the source of the problem I had, or a clue to it.

    Here are the instructions, followed by my comments where SharPoint's behavior does not match them:

    1. In the far right corner, click SilolActions.

    (There is no such label. I assume the instructions refer to the dropdown labeled "Site Actions.")

    2. From the drop down menu, select Edit Page.

    3. On the next page, click Add a Web Part.

    4. When the Add a Web Part - Webpage Dialogue opens up, scroll down to the Content Editor Web Part.

    5. Select the Content editor Web Part by checking the box to the left.

    6. Click Add on the bottom right.

    7. On the next window, under Content Editor Web Part, select Open the Tool Pane.

    (There is nothing under "Content Editor Web Part" except the page's content. There is nothing that looks like a pane, and nothing labeled "Open the Tool" or anything similar. At this point I clicked the down-arrow to the right of the "Content Editor Web Part" label, which opened a pane in the right sidebar labeled "Content Editor Web Part ...")

    8. To enter your HTML source code, click Source Editor from Content Editor Web Part box on the left.

    (Again, there is nothing under or around the Content Editor Web Part that is labeled "Source Editor." There is nothing that looks like a control of any sort, except for the down-arrow that I mentioned under step 7, and the close box immediately to its right.

    (I assume that "on the left" means "in the central part of the page" (to the left of the right sidebar). There is nothing on the left except SharePoint's standard left sidebar, which lets me select among the available Documents, Lists, Discussions, etc.

    (There's a "Modify Web Part" link in the RIGHT sidebar. When I click it, it displays a group of controls headed "Content Editor." The first control in this group is a tiny box with the instruction "To add content, type the HTML into the text box.")

    9. Insert your HTML code into the Builder Text Area and click Save.

    (I originally entered the page's content by pasting it in the "Content Editor" text box. If I were defining the page from scratch I'd HAVE to perform this step if I wanted to have content at all. Since the content is already there, I simply left it there.

    (Regarding your alternative instructions: if I understand them correctly, you're saying that instead of pasting content in the "Content Editor" box, I should put the style definitions, enclosed in <style>...</style> tags, in the Builder Text Area. I've got a couple of difficulties with that.

    (The first difficulty is that the instructions don't make sense to me. If I interpret "instead of adding HTML..." literally, it describes exactly what I did before I reported "no joy," and you responded with this suggestion. I didn't perform step 9 then because I didn't have to; I did that when I first created the page, so there was no point in doing it again. If I interpret "instead of adding HTML..." to mean "the Content Editor box should be empty," it will inevitably produce the same result I got last time: the page could not possibly display content, because there would BE no content.

    (The second difficulty is that the "Content Editor Web Part" pane has no control labeled "Builder Text Area." It has only:

    * The "To add content..." text box.
    * A text box labeled "Content Link," where I tried paste the style sheet's pathname last time around.
    * Three expandable lists named "Appearance," "Layout," and "Advanced." (I expanded all of these, but "Builder Text Area" does not appear in any of them.)
    * Three buttons named "OK," "Cancel," and "Apply."

    (I suspect this is not the pane I'm supposed to be using, and I displayed the wrong pane due to one of the problems I encountered in the earlier steps.)

    10. Next, click Expand Appearance from the Content Editor Web Part menu on the right.

    (There is no "Expand Appearance" control in the menu, although this PROBABLY refers to the expandable list labeled "Appearance." The title and position on the page are right.)

    11. Enter the new title and click OK.

    12. Select Exit Edit Mode from the far right corner.

    13. The Home page will now appear with your Web Part showing.


    Finally: could someone explain exactly what the "Content Link" text box is for? If my previous try had worked, I could deduce that it refers to a file whose content is inserted in the page's header. That's so simple and logical that I think someone would have explained it by now if it were so; thus I suspect the box really is supposed to do something much more complicated and obscure. Understanding what it does might help me figure out how to use it.

    Monday, July 22, 2013 6:26 PM
  • Content link property is used to link the file that contains HTML code
    Monday, July 22, 2013 6:37 PM