none
Changes in Sharepoint Designer 2010 not showing in Sharepoint Server 2010 page?

    Question

  • Hello Community

        In Sharepoint 2010 the web pages have a default ribbon background color which  may be described as dark
    blue. 

        To change that background color to a different color using Sharepoint Designer 2010 you are supposed
    to be able to open the v4.master and change the style but after I changed the background color I got a message
    stating that:

    "Saving your changes will customize this page so that it is no longer based on the site definition.
     Do you want to continue? 

        I clicked yes.
      
        Next a prompt comes up asking:

    "Save embedded file 'corev4.css?'. "

        I clicked yes again, but that produces an error message stating:

    "Server error:There is no file with the url 'http://<server name>/sites/<filename>/styles/corv4.css'
     in this web."

        So I clicked the "Set Action" button which produces a message box with 3 options from
    which I select:

    "Save this file.  This will only affect the current page"

        I click "Ok" twice.

        The result is that in Sharepoint 2010 the ribbons background color is changed but when I type the
    url for the web application in the Sharepoint Server 2010 browser the background color of the ribbon has not
    changed in the web application page there.

        I am wondering why am I getting the error message and how can I get the background color that is changed to the
    ribbon in Sharepoint Designer 2010 to be applied to the background color in the web page when I type the url for the web
    application in the address bar in the Sharepoint Server 2010 browser?

        Thank you
        Shabeaut

    Monday, May 07, 2012 3:10 PM

Answers

  • To put it into the master page, follow these steps:

    1. Download SharePoint Designer, install and run it
    2. Open your site: File > sites > Open site
    3. Open the master page (probably v4.master) from the Master Pages in the Site Objects on the left.
    4. Ctrl-F to find <SharePoint:Theme runat="server"/>
    5. Insert the CSS:
    <style type="text/css">
      BODY #s4-ribbonrow {
        background-color: #800000;
        background-image:none;
      }
    </style>

    Alternatively, a better way that usually takes more effort is to create your own CSS file:

    1. Open your site in SPD
    2. Navigate to the Style Library in All Files
    3. In the New section of the SPD ribbon, click File > CSS.
    4. Name it something useful.  For this sample, I'll use Site.css
    5. Edit the file
    6. Insert just the CSS (see below)
    7. Open the master page and reference the line just below the <SharePoint:Theme runat="server"/> line:
      <link rel="stylesheet" type="text/css" href="/style%20library/Site.css" />
    8. Save all and test

    CSS:

      BODY #s4-ribbonrow {
        background-color: #800000;
        background-image:none;
      }

    I tested site.css and discovered a missing 0 in the background color:
    background-color: #80000;
    should be
    background-color: #800000;


    AndyGett Blog | @AndyGett Twitter

    • Marked as answer by Shabeaut Monday, May 14, 2012 9:14 PM
    Thursday, May 10, 2012 6:57 PM

All replies

  • One way to change the backround is to override the
    BODY #s4-ribbonrow
    style which uses #21374c for the dark blue color.  You should be able to put your own style into the master page using the Code view in SharePoint Designer.  This should change it to a dark red (untested) :

    <style type="text/css">
    BODY #s4-ribbonrow {
     background-color: #4c2137
    }
    </style>

    There are better ways of overriding and introducing new styles than inline styles such as creating your own CSS file.


    AndyGett Blog | @AndyGett Twitter

    Tuesday, May 08, 2012 3:18 AM
  • You cannot change COREv4.css from SharePoint Designer as Designer cannot change server files. The best practice is to leave COREv4 alone and add your CSS to the master page just after where CORE is loaded.

    Find these two lines in your master page and add your CSS just after them.

        <Sharepoint:CssLink runat="server"/> 
        <SharePoint:Theme runat="server"/>

        <style>
             your CSS here
        </style>


    Mike Smith TechTrainingNotes.blogspot.com

    Tuesday, May 08, 2012 3:22 AM
  • Hi Shabeaut.

    A combo of Andy and Mike's suggestions is what I'm suggesting :-)

    Create your own css with styling for the background without touching the default V4.master or the corev4.css. It is never a good idea to edit them anyway, if you feel the urge, make a copy of them and edit that (I think that v4.master and corev4.css will be replaced if you update SharePoint for instance).
    Anyway, after creating your own css and placing it in(anywhere really where all users have read access) the site collection root/style library you can reference it using the gui. With the publishing features(site collection and site features) enabled, you get to select the masterpage under site settings, look and feel. In here you can also select a custom style sheet. Specify a CSS file by browsing to your custom CSS.

    All you really need in the css is this:

    BODY #s4-ribbonrow
    {
      background-color: #4c2137
    }
     

    Done.

    (Or...you can use a COntent Editor Web Part on any page and in HTML edit mode, add Andy's code with the style tag, that will also replace the background but only on that particular page.)

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blog.blksthl.com
    Download the SharePoint Branding Project here

    Tuesday, May 08, 2012 5:02 AM
  • Hello Andy Gett

        The color on the page in Sharepoint 2010 still does not change for ribbonrow/ribboncont.

        In the default.master I changed the background color of body #s4-ribbonrow and
    #s4-ribboncont which is top of the page that contains the words "Site Action, folder icon and
    "Browse".

        I click Master Pages in the right hand pane of Sharepoint Designer 2010, default.master and
    the "Edit File" link in the left pane and then in code view I inserted the style> below the two
    tags below:

     <SharePoint:CssLink runat="server"/>
     <SharePoint:Theme runat="server"/>

     <style type="text/css">
      BODY #s4-ribbonrow {
      background-color: #80000;
     }
      
      BODY #s4-ribboncont{
       background-color: #80000;
      }

     </style>

        When the <styles> are highlighted in CSS properties the color displays the changed
    background-color so you would think it works.

        The problem is from there when you click "Site Pages" and then "Home.aspx" the
    ribbon at the top of the page still has the same default color of #21374c.

        That is the page that shows when you type in the url.

        How come the color of the ribbon in the home page not changed?

        How can I make the color of the ribbon at the top of the Home.aspx page change?

        Thank you
        Shabeaut

    Tuesday, May 08, 2012 9:00 PM
  • Hello Mike Smith

        The color on the page in Sharepoint 2010 still does not change for ribbonrow/ribboncont.

        In the default.master I changed the background color of body #s4-ribbonrow and
    #s4-ribboncont which is top of the page that contains the words "Site Action, folder icon and
    "Browse".

        I click Master Pages in the right hand pane of Sharepoint Designer 2010, default.master and
    the "Edit File" link in the left pane and then in code view I inserted the style> below the two
    tags below:

     <SharePoint:CssLink runat="server"/>
     <SharePoint:Theme runat="server"/>

     <style type="text/css">
      BODY #s4-ribbonrow {
      background-color: #80000;
     }
      
      BODY #s4-ribboncont{
       background-color: #80000;
      }

     </style>

        When the <styles> are highlighted in CSS properties the color displays the changed
    background-color so you would think it works.

        The problem is from there when you click "Site Pages" and then "Home.aspx" the
    ribbon at the top of the page still has the same default color of #21374c.

        That is the page that shows when you type in the url.

        How come the color of the ribbon in the home page not changed?

        How can I make the color of the ribbon at the top of the Home.aspx page change?

        Thank you
        Shabeaut

    Tuesday, May 08, 2012 9:01 PM
  • Hello Thomas Balkestahl

        The color on the page in Sharepoint 2010 still does not change for ribbonrow/ribboncont.

        In the default.master I changed the background color of body #s4-ribbonrow and
    #s4-ribboncont which is top of the page that contains the words "Site Action, folder icon and
    "Browse".

        I click Master Pages in the right hand pane of Sharepoint Designer 2010, default.master and
    the "Edit File" link in the left pane and then in code view I inserted the style> below the two
    tags below:

     <SharePoint:CssLink runat="server"/>
     <SharePoint:Theme runat="server"/>

     <style type="text/css">
      BODY #s4-ribbonrow {
      background-color: #80000;
     }
      
      BODY #s4-ribboncont{
       background-color: #80000;
      }

     </style>

        When the <styles> are highlighted in CSS properties the color displays the changed
    background-color so you would think it works.

        The problem is from there when you click "Site Pages" and then "Home.aspx" the
    ribbon at the top of the page still has the same default color of #21374c.

        That is the page that shows when you type in the url.

        How come the color of the ribbon in the home page not changed?

        How can I make the color of the ribbon at the top of the Home.aspx page change?

        Thank you
        Shabeaut

    Tuesday, May 08, 2012 9:02 PM
  • Hi,

    The ribbon area has a background image that supplies the color. You will either need to replace the image or remove it. (background-image:none)

    This article should have what you need:

    http://styledpoint.com/blog/ribbon-customization-changing-placement-look-and-behavior/

    also take a look at:

    http://sharepointexperience.com/csschart/csschart.html


    Mike Smith TechTrainingNotes.blogspot.com

    Tuesday, May 08, 2012 9:38 PM
  • So in theory, the whole answer is after this line in the master page
    <SharePoint:Theme runat="server"/>
    put

    <style type="text/css"> BODY #s4-ribbonrow {
    background-color: #800000;
    background-image:none;
    }
    </style>




    AndyGett Blog | @AndyGett Twitter


    • Marked as answer by Shabeaut Thursday, May 10, 2012 3:22 PM
    • Unmarked as answer by Shabeaut Thursday, May 10, 2012 5:58 PM
    • Edited by AndyGett Thursday, May 10, 2012 6:58 PM added missing 0 to background-color
    Thursday, May 10, 2012 10:30 AM
  • Hello Andy Gett

        Yes, the parameters you state will change the color,

    but,  only when inserted into the corev4.css, I am trying to

    leave the corev4.css in its default state and still change those colors.

        How can I use the parameters you recommend to

    override the colors in corev4.css?

        Thank you
        Shabeaut

       


    • Edited by Shabeaut Thursday, May 10, 2012 5:59 PM
    Thursday, May 10, 2012 5:57 PM
  • To put it into the master page, follow these steps:

    1. Download SharePoint Designer, install and run it
    2. Open your site: File > sites > Open site
    3. Open the master page (probably v4.master) from the Master Pages in the Site Objects on the left.
    4. Ctrl-F to find <SharePoint:Theme runat="server"/>
    5. Insert the CSS:
    <style type="text/css">
      BODY #s4-ribbonrow {
        background-color: #800000;
        background-image:none;
      }
    </style>

    Alternatively, a better way that usually takes more effort is to create your own CSS file:

    1. Open your site in SPD
    2. Navigate to the Style Library in All Files
    3. In the New section of the SPD ribbon, click File > CSS.
    4. Name it something useful.  For this sample, I'll use Site.css
    5. Edit the file
    6. Insert just the CSS (see below)
    7. Open the master page and reference the line just below the <SharePoint:Theme runat="server"/> line:
      <link rel="stylesheet" type="text/css" href="/style%20library/Site.css" />
    8. Save all and test

    CSS:

      BODY #s4-ribbonrow {
        background-color: #800000;
        background-image:none;
      }

    I tested site.css and discovered a missing 0 in the background color:
    background-color: #80000;
    should be
    background-color: #800000;


    AndyGett Blog | @AndyGett Twitter

    • Marked as answer by Shabeaut Monday, May 14, 2012 9:14 PM
    Thursday, May 10, 2012 6:57 PM