0

Im trying to apply a fixed layout to sharepoint 2013 foundation and a sharepoint 2013 standard. I followed this sample here fixed layout 2013

But I cant get it to work correctly on both instances. With the sharepoint 2013 standard I have made sure I have published the files I changed. What would be the ideal way to do this in the sharepoint 2013 foundation?

I can only see something happening when I add a script editor and paste the CSS.

Thanks in Advance

/* This is the CSS im currently using below */

#s4-workspace{
    /* background-color of the workspace */
    background-color: silver;
}
#contentBox{
    min-width: auto !important;
}

#s4-bodyContainer{
    /* defines 960px by using 80em = 80 * 16px (Default Font Size) */
    width: 960px;
    width: 60rem;
    margin:auto;
    /* background color of the content */
    background-color: white;
}
/*** Fix for the dialogs ***/
.ms-dialog #s4-workspace{
    background-color: white;
}
.ms-dialog #s4-bodyContainer{
    margin: 0px;
    width: auto;
}
.ms-dlgContent #s4-bodyContainer{
    width: auto;
}
/*** clear fix ***/
.clearfix{
    clear: both;
}
Improve this question
1
  • It shouldn't have any effect based on what version of SharePoint you are using.. Can you make sure your CSS files are in place and referenced correctly..?
    – Arsalan Adam Khatri
    Apr 9, 2014 at 7:51

1 Answer 1

Reset to default
2

It means that the css changes are not taking effect.

1) create a custom css file.

2) save the css file within the site collection style library:

http://mysite:20034/style library

you can add a folder within the library or have it directly there!

3) open your masterpage that the site is using by downloading a copy.

4) add the custom css to the downloaded masterpage:

You must register the CSS file with a master page before the CSS file can be used by the theming engine. This directs the master page to the CSS file when you apply a theme to a site. To register a CSS file, you add a element to the element of the master page. The following shows the format of the element.

<head>
…
<SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/~language/Themable/MyCustomFile.css%>" runat="server" />
</head>

http://msdn.microsoft.com/en-us/library/office/dn266906(v=office.15).aspx

WARNING** dont just download the default mastepage and overwrite it! if you are then rename the file to somthing else and set that new masterpage as the site collection masterpage!

ok, so now you have your custom css file and saved within the style library. You have a masterpage (custom) saved within the masterpage gallery that contains the new CssRegistration to you css file in the style library.

5) You now need to approve the masterpage and set it as major version (this is within /_catalogs/masterpage/Forms/AllItems.aspx where you add the masterpage and set it to major version)

......

now if you want to make some modifications to the css file just update it in the style library... to know what elements to ammend use F12 developer or firebug to inspect the elements on the page to see its id or class :)

EDIT

we know the css works as it does in ie but in firefox we now need to know what part is not working? im presuming all? if its all than you need to check firebug to see if the css is loaded into firefox browser? if it is than css is not applied and you need to add !important.

use this only if css file is added into firefox browser (check in firebug!), under css you should see Styles/fixedwidth.css, if it is then do:

#s4-workspace
{
    background-color: silver !important;
}
#contentBox{
    min-width: auto !important;
}

#s4-bodyContainer
{
    width: 960px !important;
    width: 60rem !important;
    margin:auto !important;
    background-color: white !important;
}

.ms-dialog #s4-workspace
{
    background-color: white !important;
}

.ms-dialog #s4-bodyContainer
{
    margin: 0px !important;
    width: auto !important;
}
.ms-dlgContent #s4-bodyContainer
{
    width: auto !important;
}

.clearfix
{
    clear: both !important;
}
Improve this answer
9
  • Thanks Ali where does this go as I'm amending seattle.html <!--SPM:<SharePoint:CssRegistration name="xxx/sites/dev/Style%20Library/Styles/fixedwidth.css" runat="server" after="Themable/corev15.css" />--> Cheers
    – naijacoder
    Apr 10, 2014 at 1:11
  • I think I figured it out
    – naijacoder
    Apr 10, 2014 at 5:37
  • no probs! did you manage to get it all working?
    – Ali Jafer
    Apr 10, 2014 at 7:27
  • Yes but it doesn't work in firefox? Any ideas
    – naijacoder
    Apr 10, 2014 at 7:37
  • when you say it didnt work in firefox do you mean no css is applied? or only selected css?
    – Ali Jafer
    Apr 10, 2014 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.