Diseño Gráfico en SharePoint Foundation 2010

1<SharePoint:CssRegistration name="/sites/TUSITIO/Internal/Intranet.css" After="corev4.css" runat="server"/>
2

1<div id="intranet_footer">LA EMPRESA - RECURSOS HUMANOS - PROYECTOS - NOTICIAS</div>
2

1/* -------------------------------------------------
2

1 Ocultamiento de secciones
2

1 ------------------------------------------------- */
2

1/* Oculto Acciones del Sitio */
2

1.ms-siteactionsmenu { display: none; }
2

1/* Ocultar Icono de navegación hacia arriba */
2

1.s4-breadcrumb-anchor { display: none; }
2

1/* -------------------------------------------------
2

1 Ajustes estéticos
2

1 ------------------------------------------------- */
2

1/* Seteo el color de fondo */
2

1body { background-color: #828282; }
2

1/* Aplico un ancho fijo, no 100% */
2

1#s4-ribbonrow, #s4-workspace
2

1{
2

1 max-width: 1100px;
2

1 margin: 0 auto;
2

1 padding: 0px;
2

1 background-color: white;
2

1}
2

1/* -------------------------------------------------
2

1 Imagen de cabecera
2

1 ------------------------------------------------- */
2

1/* Agrando la Ribbon porque la imagen es más alta */
2

1#s4-ribbonrow { padding-top:37px; min-height: 133px !important; }
2

1/* Oculto la fila de título y navegación */
2

1#s4-titlerow { margin-top: -88px; }
2

1/* Subo las solapas de la Ribbon para que no molesten a la imagen, especialmente si hay un logo a la izquierda */
2

1.ms-cui-topBar2 { margin-top: -37px; }
2

1.ms-cui-tabContainer { border-top: #B8BABD 1px solid; background-color: white; padding-top: 20px; }
2

1.ms-cui-tabBody { padding-bottom: 17px; background-image: none; }
2

1/* Elimino el fondo del título y del top navigator */
2

1.s4-title { background: none; }
2

1/* Seteo mi imagen de cabecera en la ribbon row */
2

1#s4-ribbonrow { background-image: url('/sites/TUSITIO/Internal/header.png'); }
2

1/* Saco el fondo de la ribbon que molesta a la imagen */
2

1#s4-ribboncont { background: none !important; }
2

1/* Posiciono en forma fija al top navigation */
2

1.menu-horizontal { position: fixed !important; top: 134px !important; }
2

1/* Subo el menú de usuario */
2

1#RibbonContainer-TabRowRight { margin-top: -10px; }
2

1/* Elimino el borde superior de la ribbon */
2

1.ms-cui-topBar2 { border: 0px; }
2

1/* Ajustes de algunos bordes */
2

1#s4-topheader2 { border-top: 0px !important; background: white !important; }
2

1/* Borde derecho a la izquierda de la scrollbar molesta */
2

1#s4-titlerow { border-right: 0px; }
2

1/* -------------------------------------------------
2

1 Estilos en barra superior
2

1 ------------------------------------------------- */
2

1/* Menú de bienvenida*/
2

1.ms-welcomeMenu A:link {
2

1 color: #8F8F8F;
2

1 font-size: 11px;
2

1 font-family: Arial, Helvetica, sans-serif;
2

1}
2

1/* Colores de solapas de la ribbon, tratando de que no sean tan visibles */
2

1.ms-cui-tt-a, .ms-cui-cg-t { color: #B8BABD !important; }
2

1.ms-cui-cg-t, .ms-cui-ct-ul { background: none !important; }
2

1.ms-cui-ct-ul, .ms-cui-cg-i, .ms-cui-cg, .ms-cui-tt-a {border-color: #F4F3F9 !important; }
2

1.ms-cui-cg-i {border-color: transparent !important; }
2

1.ms-cui-cg {border-color: transparent !important; }
2

1/* -------------------------------------------------
2

1 Estilos en Top Navigation
2

1 ------------------------------------------------- */
2

1/* Efecto de margen izquierdo */
2

1.s4-tn .menu-horizontal {
2

1 margin-left: 200px;
2

1}
2

1/* Estilo de los links */
2

1.s4-tn .menu-item-text {
2

1 color: #FCFCFC;
2

1 font-size: 11px;
2

1 border-right: #FCFCFC solid 1px;
2

1 padding-right: 25px;
2

1 font-size: 11px;
2

1 font-family: Arial, Helvetica, sans-serif;
2

1}
2

1/* Estilo del link seleccionado */
2

1.s4-tn .selected {
2

1 font-weight: bold;
2

1}
2

1.s4-tn .selected .menu-item {
2

1 background: none !important;
2

1 border: none !important;
2

1}
2

1/* Estilo del link hover */
2

1.s4-tn .menu-item:hover {
2

1 text-decoration: none !important;
2

1}
2

1/* -------------------------------------------------
2

1 Footer
2

1 ------------------------------------------------- */
2

1#intranet_footer {
2

1 background-color: #ACACAD;
2

1 margin-top: 15px;
2

1 font-family: Arial, Helvetica, sans-serif;
2

1 font-size: 9px;
2

1 color: white;
2

1 text-align: center;
2

1 padding: 4px;
2

1 clear: both;
2

1 border-top: white solid 40px;
2

1}
2

1$('#zz15_Menu span').prepend('Bienvenido ');
2

1$('#zz15_Menu span').append(' > > > ');
2

1ExecuteOrDelayUntilScriptLoaded(cargar_efemeride, "sp.js");
2

1$('.ms-cui-ribbonTopBars').append($('#efemeride'));
2

1document.getElementById("efemeride").innerHTML = strHtml;
2

1<div id="efemeride"></div> 
2

1<table id="subsitio_contenedor">
2

1<tr>
2

1<td width="990px"></td>
2

1<td width="100px">
2

1<a id="subsitio" href="/sites/blablabla.aspx">Subsitio</a>
2

1</td>
2

1</tr>
2

1</table>
2

1<table id="super_contenedor">
2

1<tr>
2

1<td>
2

1<table class="cumples-tabla">
2

1<thead>
2

1<tr>
2

1<th>Para compartir</th>
2

1</tr>
2

1</thead>
2

1<tbody>
2

1<tr>
2

1<td><div id="cumples"></div></td>
2

1</tr>
2

1</tbody>
2

1</table> 
2

1 </td>
2

1<td><strong>Zona reservada para noticias</strong>: Lorem ipsum ad ... </td>
2

1</tr>
2

1<tr>
2

1<td><strong>Zona reservada para anuncios</strong>: Lorem ipsum ad ... </td>
2

1<td><strong>Zona reservada para noticias en las sedes</strong>: Lorem ipsum ad his scripta blandit partiendo... </td>
2

1</tr>
2

1</table>
2

1$('#ctl00_MSO_ContentDiv table table td:first').width("100%"); 
2

1 
2

1<style>
2

1/* -------------------------------------------------
2

1Ajustes generales
2

1------------------------------------------------- */
2

1/* Ocultar Inicio Rápido */
2

1#s4-leftpanel { display: none; }
2

1.s4-ca { margin-left: 0px; }
2

1/* Ocultar solapas de Ribbon*/
2

1.ms-cui-tts { display: none; }
2

1/* Y el borde de la top navigation */
2

1#s4-topheader2 { border-bottom: 0px !important; }
2

1/* Nombre de usuario a la izquierda */
2

1#RibbonContainer-TabRowRight { float: left; }
2

1/* Efeméride a la derehca */
2

1#efemeride {
2

1color: #03935F;
2

1font-weight: bold;
2

1text-transform: uppercase;
2

1font-size: 11px;
2

1font-family: Arial, Helvetica, sans-serif;
2

1float: right;
2

1margin-top: -39px;
2

1margin-right: 10px;
2

1}
2

1/* Fecha actual a la derecha*/
2

1#fecha {
2

1font-size: 11px;
2

1font-family: Arial, Helvetica, sans-serif;
2

1color: #8F8F8F;
2

1font-weight: normal;
2

1text-transform: none;
2

1}
2

1/* Botón de llamada a un subsitio */
2

1#subsitio {
2

1font-size: 18px;
2

1font-family: Arial, Helvetica, sans-serif;
2

1color: white;
2

1background-color: #F9B10F;
2

1border: solid 4px white;
2

1border-right: none;
2

1padding: 5px 10px;
2

1text-align: center;
2

1}
2

1#subsitio_contenedor {
2

1position: fixed;
2

1top: 91px;
2

1}
2

1/* -------------------------------------------------
2

1Contenedor de partes
2

1------------------------------------------------- */
2

1/* Estilo de la Tabla que contiene cada una de las partes (contenido) */
2

1#super_contenedor {
2

1width: 100%;
2

1}
2

1#super_contenedor td {
2

1padding: 10px;
2

1vertical-align: top;
2

1}
2

1/* -------------------------------------------------
2

1Para compartir (estilos para mostrar cumpleaños)
2

1------------------------------------------------- */
2

1.cumples-tabla th {
2

1background-color: #288BCE;
2

1color: white;
2

1font-family: Arial, Helvetica, sans-serif;
2

1font-size: 13px;
2

1font-weight: bold;
2

1}
2

1.cumples-tabla td {
2

1background-color: #CBE9F6;
2

1}
2

1</style>
2