StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSharepoint MasterPages/Templates customization
text
Body
copied!<p>I am pretty new to Sharepoint.</p> <p>I need to customize some Sharepoint Masterpages (the background color, the font type and a few other css requeriments). </p> <p>Considering I have available the following files: v4.master, default.master and two more pages which are content pages of default.master, plus the COREv4.css file.</p> <p>I know I should create a copy of one of those master pages (I am not sure which tho) and customize it changing the CSS linked to it). The following questions come in regards of this:</p> <p>1) The custom CSS file should be a modified copy of the COREv4.CSS or just another CSS file with the desired styles?</p> <p>2) How do I create/link the customized CSS file for the modified page via Site Settings?. How/Where should I save the new file?.</p> <p>3) As for the copy of v4.master, How do I load it to "replace" the original one for the site?.</p> <p>4) The system is built upon Sharepoint 2010. That ensures that the page to have the modified CSS would be a v4.master copy only?.</p> <p>Thank you for the insight as always.</p> <p><em><strong></em>**Update*<em>*</em></strong></p> <p>Hi,</p> <p>I managed to solve the problem getting a general idea with the pdf manual provided, your suggestions and some extra steps I will describe briefly:</p> <p>1) To place my custom css file I put it in the folder: <code>C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\3082\STYLES</code></p> <p>2) I opened the site to be customized with Sharepoint Designer 2010.</p> <p>3) I clicked on the option Main Pages/Master Pages, and selected the page to be v4.master page, copied and pasted it. Then I renamed it right clicking on it, selecting "Rename" and typed the new name, after doing that I right clicked one more and selected "Set page as main default page".</p> <p>4) To edit the contents of the page I right clicked once more and selected the option "Edit content in advanced mode", right before the head tag ended I copied and pasted:</p> <pre><code><SharePoint:CssRegistration name="customname.css" runat="server" After="core4.css"/> </code></pre> <p>Note that <code>"customname.css"</code> is my css file. Then I clicked on the floppy disk icon on the upper left side of the screen to save.</p> <p>5) After doing that I used Chrome HTML/CSS Analyzer, inspecting the original (and now copied) master page to browse on the zones that needed customization in order to identify the class names/ids/element types that managed the styles to be changed. Once identified I only added to them the properties that required change, EG:</p> <blockquote> <p>//Webparts Alternate Highlighted Rows</p> <p>div#ctl00_MSO_ContentDiv table.ms-viewlsts tbody tr.ms-alternatingstrong{ background-color:#F7FAF4 }</p> <p>table.ms-listviewtable.ms-basictable tbody tr.ms-alternatingstrong.ms-itmhover{ background-color:#F7FAF4 }</p> </blockquote> <p>I mostly did this by myself by trial and error with Chrome Analyzer but I also helped the task using the Chart found here (<a href="http://sharepointexperience.com/csschart/csschart.html" rel="nofollow">http://sharepointexperience.com/csschart/csschart.html</a>), tho at some point going thru it turned a bit tricky and I decided to do it by myself as I mentioned. In the process I repeatedly added more styles to the custom file and then overwrote it on the server location to refresh the page/pages to see how it was looking, this till the end of the process.</p> <p>Thanks for your help, I hope this serves as a guide for anyone that needs it. If you have questions let me know.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload