views:

205

answers:

4

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

+1  A: 

I like to always use this post as a starting point for SP branding: http://erikswenson.blogspot.com/2008/10/functional-sharepoint-branding-style.html

zincorp
Thanks zincorp, this looks interesting, gives me a good idea of what is actually possible. Wondering if you have any resources for the in-between steps - how do I actually apply an alternate stylesheet? I can't seem to find it as an option anywhere!
MalphasWats
+1  A: 

It depends on whether you're talking about a WSS 3.0 site or a MOSS site. WSS 3.0 sites can be customized using themes. Customizing MOSS sites is a little trickier, although you can add a SINGLE custom CSS style sheet via Central Admin - in this case, your custom files, images, etc., would be deployed as a Feature.

The best explanation of how this works that I have come across is the six part series on the cleverworkarounds.com site.

IrishChieftain
Thanks for this, it looks great, I'll start working my way through it! Not sure what the difference between WSS and MOSS is, and at the moment, I just want to change the look of a single site, rather than the whole sharepoint thing. hopefully this will get me started.
MalphasWats
One thing: use SharePoint Designer 2007 to work with the CSS but don't use it to save your changes; copy your work to VS and deploy as a "Feature". Best of luck!
IrishChieftain
urg, this is *so* not like crafting nice CSS files and uploading them via FTP! VS = visual studio? I did download sharepoint designer but haven't installed it yet. Was foolishly hoping I could knock a CSS file together in dreamweaver and squirt it at the server somehow! Thanks for the help IrishChieftain
MalphasWats
No prob - customization of SP is a PITA! SD2007 pushes changes to the file directory which is susceptible to being overwritten by Windows Updates. Using Visual Studio to wrap the customization as a Feature (which can be activated via Central Admin) is the recommended practice - this is then deployed as a solution package. Definitely a bit of a learning curve involved - as a developer/designer, I had to learn an uncomfortable amount of admin stuff because I had to do this on my own. Don't give up! ;-)
IrishChieftain
+1  A: 

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:

http://stackoverflow.com/questions/1744187/sharepoint-how-to-remove-default-core-css-reference/1744402#1744402

F.Aquino
This is really great, thanks F.Aquino. I don't have access to the sharepoint server, but I shall attempt to negotiate for it. I like the idea of being able to work on it on my local machine whilst I learn. I shall have a go.
MalphasWats
A: 

I have created a theme folder and changes all the css files test1011-65001.css and theme.css and core.css but when i going to create a sub site and select my theme its not working properly on subsite. please helo me its urgent.

Thanks Rony

Rony