Archive for the ‘CSS Style Sheets’ Category

Yesterday we needed to have full screen background on our SharePoint sites and their pages. After lots of searching and testing different approaches, I found the following solution which is based on jQuery, the most suitable one for us. We couldn’t use the CSS 3 techniques since in my opinion using CSS3 in SharePoint 2010 is not recommended and has a lot of side effects. especially for internal use like Intranet and portal which main objectives are collaboration. I have previously published a post here about CSS3 and SharePoint 2010 which usually case some parts like ribbon or etc start function correctly.

I found my solution here but I changed it a little. Instead of using “$(window).load” , I used “$(document).ready” , so it will help that the image to be re-sized much sooner. According to this blog, if you want to hookup your events for certain elements before the window loads, then $(document).ready is the right place.

Here is the summary of my solution:

  • Needed styles to be attached to the master page:

#bg {
position: fixed;
top: 45px; /* image to start after ribbon */
left: 0;
z-index:-9999
}
.bgwidth {
width: 100%;
}
.bgheight{
height: 100%;
}
  • Needed jQuery (Don’t forget to link to a proper jQuery library!):

$(document).ready(function() {

var theWindow = $(window),
    $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio )
   {
    $bg
    .removeClass()
    .addClass('bgheight');
   }
   else
   {
    $bg
    .removeClass()
    .addClass('bgwidth');
   }
}
theWindow.resize(resizeBg).trigger("resize");
});

  • Also this tag should be added right after “<div id=”s4-bodyContainer”>” tag in the master page

<img src="../PublishingImages/Background.jpg" id="bg" alt="">

src” is the relative address of the background file for each site. so you can place your background file there.

Good luck ! 🙂

Actually I came up with a request to disable the scroll bar for the site welcome page which was using the custom master page and had a full screen slider. but there were no need to scroll bars on the first page.

Just to mention, I had created the page using SharePoint designer (Right click on master page > new from master page) because it had it’s own scripts and not specific SharePoint content ( you know it was a Welcome page 😉 ) for example the page had the ribbon because it was created by a master page. after I put the scripts I found that the SharePoint fake scroll bars is visible however the page didn’t need to scroll at all and scrollbars make the page obscene.

So here I found the solution written by Stephan and in my case to customize and summarize it:

  1. In your master page and body tag, remove scroll=”No”
  2. add the following CSS styles to the page. Either using a CSS file or add styles inside the page.
body #s4-workspace{
    overflow: inherit !important;
}

During these 2-3 weeks I was designing an Intranet site based on SharePoint 2010. Although it was an Internal site but the design and look of the site was important for the managers and in some cases we needed to use CSS3 techniques. The users were using IE 9.

To do this you know that the META tag in master pages should be changed as most of the designers know.

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

I found that changing this tag has some side effects and finally we come come up to not to use CSS3 in SharePoint 2010 if it’s not really necessary. In other words if the functionality is more important than the look and feel, ask the company to meet you in halfway in terms of look and feel.

Some sections that are affected in IE 9 by changing META  tag content property.

  • InfoPath forms services ( In our cases, the customized list forms, the submit button stopped working in IE )
  • Ribbon look and feel ( in our case, it lost her background and became transparent)

You know that themes and css style sheets have a great effect on the design of  your website and how it look. In a sharpoint site, themes and theirrelative style sheets have a same effect on design of your site.

But it’s important to know that every theme in sharepoint have it’s own css style sheets. ( you may have noticed that, when you applied a new them to your site and wonder that why the parent css styles have not applied to the current site )

The directory that contains themes is located on your server at this address : C:\program files\common files\microsoft shared\web server extensions\12\template\themes\

In this address you see the folders of each theme. if you are using WSS 3.0 you see only one css file named “theme.css”. in MOSS 2007 you see two css files named : “theme.css” & “mossExtension.css” . theme.css contains the majority of the style rules, and mossExtension.css contains a smaller set of additional rules
and also there are some pictures that uses in background and icons…

when you apply a theme to a site what happens is the mossExtension.css is appended to the bottom of your theme.css and a new file is formed “1011-65001.css” which is then applied to your site. So you can change this file if you want to customize it.

You can make changes to the theme.css file directly, but those changes typically won’t be picked up until an IISreset occurs. The temporary file, ending with “1011-650001.css” is actually used by the server as the “live” CSSfile for the theme. As mentioned this file is built from the combination of theme.css and mossExtension.css after an IISreset or the restart of appropriate SharePoint services.

If you are using SharePoint Designer to edit the theme, the temporary file is actually available for editing. In Designer’s Folder List, you’ll find sub-directories named “_themes/“and, within there, a list of the files found at the previous path we specified, but now including the temporary file. The beginning of the filename comes from the name of the theme; Updating the temporary file with your changes will make them available immediately upon refreshing the page, no IIS reset required.

However, after you have made significant changes to the temporary file, copy the contents back into theme.css and mossExtension.css. Sometimes you’ll notice changes you’ve made missing from the version you’re reviewing in the browser; that’s an indication the server has rebuilt the temporary file from the old information in the existing files. Regardless of how you’re editing the files, it’s always a good idea to keep a backup of your latest changes to the theme files somewhere outside the MOSS directories so they won’t get overwritten.

In the CSS files among SharePoint’s included themes, the majority of the styles are referenced only by class. Almost every element or container has a class assigned. Heather Solomon’s CSSReference Chart for SharePoint 2007provides a guide to all the standard SharePoint page elements and their respective classes.

This post was an elite and summery of some great and useful posts. You can find more here :
1 – http://404uxd.com/2007/09/18/sharepoint-bound#discuss
2 – http://www.graphicalwonder.com/?p=567