SharePoint Online: Como añadir CSSs personalizados a mi sitio público!

Como ya he comentado en alguna ocasión, de momento las prestaciones de SharePoint Online para modelar sitios públicos son un tanto limitadas y no tenemos muchas opciones de extensibilidad y de crear sitios web realmente potentes. Pero como es lo que hay, tenemos que adaptarnos y explotar al máximo lo que tenemos de serie. En este sentido, supongamos que tenemos nuestro sitio web público de SharePoint Online y que queremos aplicarle CSSs personalizados…¿cómo procedemos? Bueno, los pasos a realizar (las herramientas que uséis luego vosotr@s son cosa vuestra) son los siguientes:

• En primer lugar, accedemos a nuestro sitio público y a la biblioteca de páginas que contiene las páginas del mismo que son accesibles de forma anónima.
• Hacemos clic sobre una de las páginas de la biblioteca para proceder a editarla con el diseñador web.
• En la pestaña “Diseño” de la cinta pulsamos sobre la opción “Hoja de estilo”.
• A continuación se abre una ventana que nos permite en primer lugar descargarnos la hoja de estilos theme.css que está usando por defecto el sitio.

• Esta hoja de estilos la podemos editar con nuestro editor de CSSs preferido. En mi caso, con hacerlo con SharePoint Designer 2010 (SPD 2010) es suficiente. De esta forma, tendremos acceso a los estilos que casi seguro que podemos sobreescribir mediante la ventana anterior:

   1:  

   2:  

   3: .BG_Null

   4: {

   5: }

   6: .BG_Base

   7: {

   8:     background-color:#6699CC;

   9: }

  10: .BG_VeryLight

  11: {

  12:     background-color:#ffffff;

  13: }

  14: .BG_Light

  15: {

  16:     background-color:#CCCC99;

  17: }

  18: .BG_Mid

  19: {

  20:     background-color:#003366;

  21: }

  22: .BG_Dark

  23: {

  24:     background-color:#333333;

  25: }

  26: .BG_VeryDark

  27: {

  28:     background-color:#000000;

  29: }

  30:  

  31:  

  32:  

  33: .F_VeryLight

  34: {

  35:     color:#ffffff;

  36: }

  37: .F_Light

  38: {

  39:     color:#CCCC99;

  40: }

  41: .F_Mid

  42: {

  43:     color:#003366;

  44: }

  45: .F_Dark

  46: {

  47:     color:#333333;

  48: }

  49: .F_VeryDark

  50: {

  51:     color:#000000;

  52: }

  53:    

  54:  

  55: body

  56: {

  57:     text-align:Center;

  58:     background-color:#FFFFFF;

  59:   

  60:   background-image: url(/Resources/_backgroundImages/56012d07-3405-4871-ae16-c90396ff23a4.Jpeg);

  61:   background-position: left top;

  62:   background-repeat: repeat-x;

  63:   

  64:     font-family:Arial, Geneva, sans-serif;

  65:     font-size:10pt;

  66:     color:#000000;

  67: }

  68:  

  69:  

  70:  

  71:  

  72: .MS_MasterFrame

  73: {

  74:     margin-left:auto;

  75:     margin-right:auto;

  76: }

  77:  

  78:  

  79: td, th

  80: {

  81:   font-family:Arial, Geneva, sans-serif;

  82:   font-size:10pt;

  83: }

  84:  

  85:  

  86: .MS_MasterFrame

  87: {

  88:     width:980px;

  89: }

  90:    

  91: .MSC_SiteWidth,.MS_MasterHeader,.MS_MasterGlobalLinks,.MS_MasterPrimaryNav,.MS_MasterFooter,.MS_MasterTopAD,.MS_MasterBottomAD

  92: {

  93:     width:100%;

  94: }

  95:  

  96:  

  97:  

  98: .MSC_HeaderFrame

  99: {

 100:     background:#333333;

 101:     width:100%;

 102: }

 103:  

 104: .MSC_HeaderDescription

 105: {

 106:     font-size:12px;

 107:     margin:0px;

 108: }

 109:     

 110:  

 111:  

 112: .MSC_GlobalLinkSpace

 113: {

 114:     padding:10px;

 115:     font-size:10pt;

 116:     color:#ffffff;

 117: }

 118: .MSC_GlobalLink

 119: {

 120:     font-size:10pt;

 121:     color:#ffffff;

 122:     text-decoration:none;

 123:     font-weight:bold;

 124: }

 125: .MSC_GlobalLink:hover

 126: {

 127:     font-size:10pt;

 128:     color:#ffffff;

 129:     text-decoration:underline;

 130:     font-weight:bold;

 131: }

 132: .MSC_GlobalLink:visited

 133: {

 134:     font-size:10pt;

 135:     color:#ffffff;

 136:     text-decoration:none;

 137:     font-weight:bold;

 138: }

 139: .MSC_GlobalLinkSpace

 140: {

 141:     font-size:10pt;

 142: }

 143:  

 144:  

 145:     

 146: .MSC_PrimaryNavFrame

 147: {

 148:     background:#003366;

 149:     width:100%;

 150:     margin:1px 0px 5px 0px;

 151:     text-align:left;

 152: }

 153:  

 154: .rtl .MSC_PrimaryNavFrame

 155: {

 156:     text-align:right;

 157: }

 158:  

 159: .MSC_PrimaryNavLink

 160: {

 161:     color:#ffffff;

 162:     font-size:12px;

 163:     text-decoration:none;

 164: }

 165: .MSC_PrimaryNavLink:hover

 166: {

 167:     color:#ffffff;

 168:     font-size:12px;

 169: }

 170: .MSC_PrimaryNavLink:visited

 171: {

 172:     color:#ffffff;

 173:     font-size:12px;

 174:     text-decoration:none;

 175: }

 176: .MSC_PrimaryNavLinkFrame-On

 177: {

 178:     background:#E3FAE7;

 179:     white-space:nowrap;

 180:     padding:5px 10px 5px 10px;

 181: }

 182: .MSC_PrimaryNavLink-On

 183: {

 184:     color:#325884;

 185:     font-size:12px;

 186:     text-decoration:none;

 187:     font-weight:bold;

 188: }

 189: .MSC_PrimaryNavLink-On:hover

 190: {

 191:     color:#325884;

 192:     font-size:12px;

 193:     font-weight:bold;

 194: }

 195: .MSC_PrimaryNavLink-On:visited

 196: {

 197:     color:#325884;

 198:     font-size:12px;

 199:     text-decoration:none;

 200:     font-weight:bold;

 201: }

 202: .MSC_PrimaryNavLeftSpace

 203: {

 204:     width:1px;

 205:     white-space:nowrap;

 206:     background:#000000;

 207:     font-size:1px;

 208: }

 209: .MSC_PrimaryNavRightSpace

 210: {

 211:     width:1px;

 212:     background:#CCCC99;

 213:     white-space:nowrap;

 214:     font-size:1px;

 215: }

 216: .MSC_PrimaryNavTopSpace

 217: {

 218:     height:1px;

 219:     background:#000000;

 220: }

 221: .MSC_PrimaryNavBottomSpace

 222: {

 223:     height:1px;

 224:     background:#CCCC99;

 225: }

 226:  

 227:  

 228:  

 229: .MS_MasterLeftNav

 230: {

 231:     background:#CCCC99;

 232: }

 233: .MSC_TextStyle

 234: {

 235:   text-align:left;

 236: }

 237: .rtl .MSC_TextStyle

 238: {

 239:   text-align:right;

 240: }

 241:  

 242: .MSC_SecondaryNavFrame

 243: {

 244:     background:#E3FAE7;

 245:     width:100%;

 246:     text-align:left;

 247: }

 248: .rtl .MSC_SecondaryNavFrame

 249: {

 250:     text-align:right;

 251: }

 252: .MSC_SecondaryNavLink

 253: {

 254:     color:#325884;

 255:     font-size:10pt;

 256:     text-decoration:none;

 257: }

 258: .MSC_SecondaryNavLink:hover

 259: {

 260:     color:#325884;

 261:     font-size:10pt;

 262: }

 263: .MSC_SecondaryNavLink:visited

 264: {

 265:     color:#325884;

 266:     font-size:10pt;

 267:     text-decoration:none;

 268: }

 269: .MSC_SecondaryNavLeftSpace

 270: {

 271:     font-size:1px;

 272:     background:#003366;

 273:     width:1px;

 274:     white-space:nowrap;

 275: }

 276: .MSC_SecondaryNavRightSpace

 277: {

 278:     font-size:1px;

 279:     background:#ffffff;

 280:     width:1px;

 281:     white-space:nowrap;

 282: }

 283: .MSC_SecondaryNavTopSpace

 284: {

 285:     background:#003366;

 286:     height:1px;

 287: }

 288: .MSC_SecondaryNavBottomSpace

 289: {

 290:     background:#ffffff;

 291:     height:1px;

 292: }

 293: .MSC_SecondaryNavLeftFrame-On

 294: {

 295:     padding:5px;

 296:     background:#ffffff;

 297: }

 298: .MSC_SecondaryNavLinkFrame-On

 299: {

 300:     white-space:nowrap;

 301:     padding:5px;

 302:     background:#ffffff;

 303: }

 304: .MSC_SecondaryNavLink-On

 305: {

 306:     padding:5px;

 307:     font-size:10pt;

 308:     font-weight:bold;

 309:     color:#325884;

 310:     text-decoration:none;

 311: }

 312: .MSC_SecondaryNavLink-On:hover

 313: {

 314:     padding:5px;

 315:     font-size:10pt;

 316:     font-weight:bold;

 317:     color:#325884;

 318: }

 319: .MSC_SecondaryNavLink-On:visited

 320: {

 321:     padding:5px;

 322:     font-size:10pt;

 323:     font-weight:bold;

 324:     color:#325884;

 325:     text-decoration:none;

 326: }

 327:    

 328:  

 329:  

 330: .MS_MasterBody

 331: {

 332:     background:#ffffff;

 333: }

 334: .MSC_Body

 335: {

 336:     padding:10px;

 337:     text-align:left;

 338:     background:#ffffff;

 339:     height:100%;

 340: }

 341: .rtl .MSC_Body

 342: {

 343:     text-align:right;

 344: }

 345:  

 346:  

 347: .MSC_FooterFrame

 348: {

 349:     background:#333333;

 350:     padding:5px;

 351:     text-align:center;

 352: }

 353: .MSC_FooterLink

 354: {

 355:     color:#ffffff;

 356:     font-size:10pt;

 357:     text-decoration:none;

 358: }

 359: .MSC_FooterLink:hover

 360: {

 361:     color:#ffffff;

 362:     font-size:10pt;

 363:     text-decoration:underline;

 364: }

 365: .MSC_FooterLink:visited

 366: {

 367:     color:#ffffff;

 368:     font-size:10pt;

 369:     text-decoration:none;

 370: }

 371: .MSC_FooterLinkSpacer

 372: {

 373:     color:#ffffff;

 374:     font-size:10pt;

 375: }

 376: .MSC_FooterText

 377: {

 378:     color:#ffffff;

 379:     font-size:10pt;

 380: }

 381:  

 382:  

 383:  

 384: .MSC_CollectDataTable,.MSC_CollectDataTable

 385: {

 386:     font-size:10pt;

 387: }

 388:  

 389:  

 390:     

 391: .MSC_ECBorder

 392: {

 393:   border-color:  #003366;

 394: }

• Lo siguiente que tendremos que hacer es identificar dónde están siendo usados los estilos en la página que estamos personalizando. Esto lo podemos conseguir mediante el uso de las herramientas de desarrollo del navegador que estemos usando. En mi caso, he ido a lo fácil, es decir, me he quedado con las herramientas que más rápidamente me han dado la información necesaria: en este caso las de Firefox.
• De esta forma, he identificado que el estilo que se usa en el cuerpo de una página es .MSC_Body.
• Como ya se el estilo a modificar, me he ido al archivo theme.css descargado, he localizado .MSC_Body y lo he personalizado cambiando el valor de la propiedad background de #ffffff a #25884.
• Este estilo modificado lo he copiado y pegado a la ventana de inserción de CSS anterior (Nota: Para poder añadir nuestro CSS, hay que marcar el check “Aplicar código CSS personalizado al sitio web”.
• Tras pulsar Aceptar, podremos comprobar que el look & feel ha cambiado. Si guardamos los cambios de la página, estos serán visibles a los usuarios que accedan a partir de ese momento. Y estos cambios, al tratarse de un estilo usado en todas las páginas, serán globales para este caso en todo el sitio.