……Marco Valli's Blog……

Internet, Tecnologia e SharePoint!!!

Creare temi personalizzati per Sharepoint 2010/Foundation 2010


SharePoint Server 2007/SharePoint Services 3.0 non permettevano da interfaccia alcuna modifica ai temi standard e la creazione di nuovi temi era particolarmente complessa (per chi vuole cimentarsi può trovare qualche informazione qui…).

SharePoint 2010 (sia nella versione Foundation che in quella Standard/Enterprise) permette di personalizzare colori e caratteri del tema corrente semplificando le esigenze di branding che non richiedano pesanti modifiche a masterpage e css..

I metodi di personalizzazione sono differenti a seconda della versione di SharePoint ma convergono in una gestione ed una denominazione delle zone pressoché identica.

In SharePoint 2010 (sia versione con CAL Standard che Enterprise) è possibile accedere ad un pannello con un’interfaccia che consente direttamente di modificare tutti i colori del tema:

image

E’ possibile direttamente da interfaccia effettuare una preview con i colori applicati senza applicare effettivamente la modifica sul sito vero e proprio.

SharePoint Foundation non possiede questa interfaccia ma solo la selezione dei temi (come SharePoint Server 2007/SharePoint Services 3.0) ma è possibile creare in maniera molto semplice dei temi da importare ed applicare poi al sito (la tecnica è utilizzabile comunque anche con le versioni Standard ed Enterprise di SharePoint..).

Lo strumento da utilizzare è quantomeno anomalo infatti, non è il fidato SharePoint Designer o il potente Visual Studio ma bensì il versatile PowerPoint.. La procedura seguente mostrerà come creare ed importare il tema in un sito di SharePoint, l’associazione dei colori alle varie zone potrà anche essere utilizzata per effettuare le modifiche direttamente dall’interfaccia messa a disposizione dalle versioni a pagamento di SharePoint.

Creazione ed importazione del tema

Aprire PowerPoint e accedere alla scheda Progettazione, quindi selezionare in alto a destra l’opzione Crea nuovi colori tema

image

La scheda che appare ha una struttura del tutto simile all’interfaccia di personalizzazione del tema di SharePoint 2010 Standard/Enterprise:

image

Dopo aver personalizzato i colori secondo le proprie esigenze fare click su Salva

image

Espandendo la dropdown di selezione dei temi a questo punto sarà possibile visualizzare e fare click sull’opzione Salva tema corrente che ci permetterà di esportare le impostazioni scelte in un file con estensione thmx.

Ora non ci resta che importare il file appena creato in SharePoint, per fare questo bisogna accedere al sito principale (site collection) che ospita il sito in cui vogliamo applicare il tema, accedere tramite il menù Azioni Sito (Site Actions) e l’opzione Impostazioni Sito (Site Settings), una volta entrati nella schermata delle impostazioni fare click su Temi (Themes) nella sezione Gallerie (Galleries)

image     image
 
nella schermata che segue è sufficiente caricare il file thmx precedentemente creato per avere il tema disponibile per la selezione.

Associazione dei colori e delle zone

L’associazione tra i colori e le zone effettivamente coinvolte non è sempre semplice, negli screenshot seguenti ho cercato di riportare i principali elementi coinvolti dalla modifiche effettuate.

I colori che hanno dei risvolti diretti in SharePoint sono:

  •  
    • Scuro 1 (Dark 1)
    • Chiaro 1 (Light 1)
    • Scuro 2 (Dark 2)
    • Chiaro 2 (Light 2)
    • Colore 1 (Accent 1)
    • Collegamento ipertestuale (Hyperlink)
    • Collegamento ipertestuale visitato (Followed Hyperlink)

Le pagine in cui ho verificato l’impatto delle modifiche sono:

  • Pagina Iniziale (Homepage)
  • Impostazioni Sito (Site Settings)
  • Visualizza tutto il contenuto del sito (View all site content)
  • Tutti gli elementi di una raccolta documenti standard (AllItems.aspx)

Se la zona indicata riporta un cerchietto, vuol dire che l’elemento coinvolto è un testo od una zona delimitata, se invece riporta un pallino vuol dire che tutto lo sfondo di quella zona è coinvolto nel cambio del colore…

image

image

image

image

In definitiva, con questi nuovi strumenti è possibile avere qualche strumento in più per personalizzare l’aspetto di un sito, ciò non significa assolutamente che si può fare a meno di strumenti come SharePoint Designer o Visual Studio che consentono un controllo pressoché completo dell’aspetto del sito ma sono senz’altro un plus per chi non vuole saperne di masterpage e di css ma ha l’esigenza di personalizzare i colori di un sito in maniera rapida e semplice…

Enjoy!! 😀

Annunci

7 risposte a “Creare temi personalizzati per Sharepoint 2010/Foundation 2010

  1. Gianstefano Gaia 5 ottobre 2011 alle 13:04

    Ciao Marco. ti chiedo 2 favori:
    1. ho modificato agilmente il mio sito secondo le tue chiare indicazioni. Ma rimangono le righe (o tutti i caratteri in modifica visualizzazione), di un orribile azzurrino. Ho il sospetto che tramite PPT non posso modificare. Dovrò andare sui CSS, o sbaglio?
    2. Se togli i miei post precedenti sarò meno in imbarazzo nei confronti dei miei posteri.
    Grazie

    • Marco Valli 6 ottobre 2011 alle 01:44

      I post precedenti sono sistemati 😉
      Ma non ho capito esattamente quali parti non vengono cambiate con i temi… magari mandami uno screenshot così capisco meglio e appen ho un attimo controllo la classe css se ha indicazioni relative al tema o se invece ha un colore “fisso”

      Ciao
      Marco

  2. Gianstefano Gaia 6 ottobre 2011 alle 14:19

    Temo di essere un po’ sprovveduto: non so come allegarti le immagini.
    Se mi mandi un indirizzo mail ti spedisco gli screenshot.
    Grazie mille. Ciao
    Stefano

    P.S.: altro indizio: l’azzurrino di cui sopra colora il font dei pulsanti di opzione nel pannello “crea colonna” di una lista.

    • Marco Valli 7 ottobre 2011 alle 00:39

      Puoi utilizzare un qualsiasii sito di hosting per le immagini come imageshack per caricare la tua immagine.. Anche con il suggerimento vorrei vedere proprio la parte di pagina a cui ti riferisci…

      Ciao!
      Marco

  3. Gianstefano Gaia 7 ottobre 2011 alle 11:27

    Ecco gli screenshot: http://imageshack.us/homepage/?user=gaiastefano
    Grazie e buona giornata

    Stefano

    • Marco Valli 11 ottobre 2011 alle 11:59

      Ciao, a quanto pare quegli elementi non sono gestiti dai temi standard di sharepoint che si possono modificare con PowerPoint, l’unico modo che ho trovato per sostituirli infatti è aggiungere un css che a cascada vada a sovrascrivere il css originale (referenziandolo nella masterpage, inserendo il codice direttamente nella pagina o in una CEWP..):


      body
      {
      color:red;
      }
      .ms-WPHeader td,.ms-fakewptitle{
      border-bottom:1px solid red;
      border-collapse:collapse;
      }

      Questa è la situazione prima e questa dopo

      Naturalmente al posto di “red” devi inserire il codice esadecimale (o il nome del colore nel caso del set di colori web standard) del colore che intendi usare..

  4. Gianstefano Gaia 17 ottobre 2011 alle 16:05

    Grazie davvero per la soluzione e per il tempo che vi hai dedicato. In questo momento sono su un altro progetto e non riesco a testarla. Appena lo faccio ti posto un commento nel merito.
    Ciao
    Gianstefano

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: