Css – customising sharepoint site design

csssharepoint

My work has recently deployed Sharepoint and I'm currently trying to get to grips with it.

I'd like to be able to completely customise the way my blog looks but I have no idea where to start. I had a look through Microsoft's developer site and it does look like they have a lot of stuff there but it all seems to be pitched at a much higher level than I'm at.

I'd consider myself pretty experienced with CSS and web development, does any of this translate into sharepoint? Can I make a new CSS file and upload a bunch of images into a store and change the look of my 'site' that way, or is it a lot more complicated?

I realise this is a little vague, but I'd really appreciate some pointers to a "getting started with making sharepoint not look sucky" guide or an example of the sort of thing I can actually hope to achieve. Hopefully my question isn't too high-level.

Thanks

Best Answer

Use SharePoint Themes, their installation is tricky at first but once you get a good development environment you'll be able to test modifications in the traditional "save css file, press F5".

Themes have these pros:

Do not need sharepoint designer

  • Do not need to change masterpages and deal with (un)ghosting (the sum of all fears)
  • Can be applied to one subsite and have other subsites with different themes (see gl-applytheme in google for mass application of themes thru many subsites)

and these cons:

  • You have no access to HTML changes, for that you need masterpage love (I dont think thats a con, its a limitation that usually exists in different scenarios and also makes you improve your css skills so much in the css-zen-garden way)
  • Themes once applied, go to the server memory -- meaning that if you change your theme folder you need to recycle the application pool, apply a different theme and apply your theme back to see that one pixel border you forgot to put in the footer. But for that specific problem I have a solution below:

After you do your "theme setup" you'll be able to only work with CSS and images and be free to overwrite any class in SharePoint using your favorite Developer Toolbar/Firebug addon to find what you want to change.

  • In the folder c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES create a folder named THEMEDEV
  • Inside the new folder, create a file called theme.css and another called THEMEDEV.INF
  • Inside the .INF file, paste this:

    [info]
    title=THEMEDEV
    codepage=65001
    version=3.00
    format=3.00
    readonly=true
    refcount=0

    [titles]
    1033=THEMEDEV
  • now open the c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033 folder (1033 is your language code, thats the default for english installations)
  • edit the SPTHEMES.XML file
  • below <SPThemes ...> insert:

    <Templates>
            <TemplateID>THEMEDEV</TemplateID>
            <DisplayName>Development Theme</DisplayName>
            <Description>Development Theme.</Description>
            <Thumbnail>images/thnone.gif</Thumbnail>
            <Preview>images/thnone.gif</Preview>
        </Templates>

  • now edit your theme.css file, add an import to your favorite CSS development folder:

    @import url('file:///C:/SharepointThemes/Theme1/theme.css');

  • Save everything, open your sharepoint: Site Actions => Site Settings => Look and Feel => Site theme => choose your Development Theme and hit Apply

  • If everything worked, you can now edit your C:\SharepointThemes\Theme1\theme.css in your favorite editor, save it with something like

    * { color: red !important }

and see the changes on your site.

Something also important when developing themes: do not create folders to store, say, your images, use everything in the same folder and in the code itself use a relative fashion, like background: url('image.png')

ps1: Only you can see changes you are making to your sharepoint site due to the file://c:/ folder, if you need more people to see the changes during development, setup a network path that they all have access, the rest is the same.

ps2: Keep in mind this is a development environment, to make your theme a live theme you need to create another one to store all the content used to change your site's visuals.

The process is similar to the one creating the THEMEDEV one, just put a pretty and consistent name across all configurations (Folder name, .INF name, .INF contents, SPThemes.xml node contents), paste all your images in the Theme's folder and replace the theme.css file with your content.

Edit1: Reading your comment above, now you have a "editing + uploading to FTP" type of setup :) this works for MOSS and WSS by the way (even if you don't know the difference). For more info on customizing sharepoint, I made a post yesterday about more options:

Sharepoint: How to remove default core.css reference?

Related Topic