……Marco Valli's Blog……

Internet, Tecnologia e SharePoint!!!

SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes


Studiando la customizzazione di SharePoint non si può tralasciare un argomento importante come i CSS… tra una prova e l’altra e test vari ho avuto qualche problema nell’utilizzare CSS "preconfezionati"… questo provvidenziale post mi ha aiutato a superare brillantemente l’ostacolo…

Come dice il mio buon collega Alessandro: "Verso l’infinito.. e oltre!!!" 😉

One of the major drawbacks of SharePoint themes is you have to reapply the theme to any site that uses your custom theme in order to see any new changes that you have made.  This happens because when you apply a theme to a SharePoint site, a copy of the theme is added for the site in the content database. 

Try it out, open a test site in SharePoint Designer and look at the folder structure in the Folder List task pane.  If you have already applied a theme to this site, you will see a _theme folder. If you have not applied a theme to this site, then this folder will not appear.  Expand the folder and you will see a single sub folder named the same as your theme.  Now go and change the theme the site uses through a browser.  Return to SharePoint Designer and hit F5 to refresh the Folder List.   The _theme folder will appear if you didn’t have a theme applied the first time, and the sub folder under this directory will change to reflect the theme you just applied.

When you make a change to the theme files on the web server, it does not update any copies of the theme that live in the content database.  When you apply a new theme in the browser, it replaces the copy in the content database with a new theme.  That is why you have to physically reapply a theme when you make changes, you have to replace the theme copy in the content database.

From a development perspective, the theme copy in the content database is rather handy.  If you update any of the files in the content database (by changing the CSS files in SharePoint Designer and importing in new images), the changes automatically appear in the browser. Woo-hoo! This just made life easier when it comes to developing themes.

But after you finish up development, you are stuck back with the problem of how to update your theme in the future, especially if it is applied to several sites.  This is where this trick comes in.

Import CSS to Create Editable Themes

Create a copy of the final theme.css file and store it in another location on the web server, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\YOURCUSTOMFOLDERHERE
You can even rename the file, it no longer needs to be named theme.css.

Open the original theme.css file in the custom theme folder, delete out all of the contents, and add an import rule for your new CSS file:
@import "/_layouts/1033/styles/YOURCUSTOMFOLDERHERE/theme.css";

Save the file and deploy your theme (add text to SPTHEMES.xml and reset IIS).   Apply your new theme to the site.  Now go to the new CSS file in the Styles folder and make a change.   Refresh your browser.  Your change will appear.  That is cool.

By moving around your files and using the import rule  you can create a theme that you can update without reapplying the theme to every site that uses it.  Be sure to update your image paths in your CSS styles to a location where you can edit the images as well, such as:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES\YOURCUSTOMFOLDERHERE

Below are a couple of screen shots for the end result of this method.

View of the file structure on the web server

 

View of the theme folder and the theme.css file that is still in the theme folder

Image showing custom theme folder and custom theme.css file

 

Ringrazio vivamente Heater Solomon che ha pubblicato questa guida molto esaustiva e dettagliata!!

Il post originale lo trovate QUI

In QUESTA pagina invece trovate in maniera spettacolare tutti i CSS utilizzati in sharepoint con una comodissima funzione di "copia al volo"!!!! 🙂

Enjoy!!

Annunci

Una risposta a “SharePoint 2007 Design Tip: Import your CSS for SharePoint Themes

  1. lesbian 16 maggio 2013 alle 03:20

    What’s Taking place i am new to this, I stumbled upon this I have discovered It absolutely helpful and it has aided me out loads. I am hoping to contribute & aid other customers like its aided me. Great job.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: