Problemas Generales

Modificar plantilla en el Header y el Footer

 
 
Imagen de Susana Vergara
Modificar plantilla en el Header y el Footer
 
Estimados: tengo una consulta a ver si alguien me puede orientar respecto a como puedo modificar un theme... que por mas que leo y leo el codigo no logro identificar donde debo modificarlo... La base de mi plantilla es el Theme Computer-scientist... que a su vez proviene de uno standar.. lo que quiero hacer es poder remover el titulo que aparece en la esquina superior izquierda en el header y a su vez reemplazar por texto los logos que aparecen el en footer (para hacer las menciones respectivas) y agregar otros logotipos institucionales... Espero que me puedan orientar... les adjunto una imagen para que puedan observar las modificaciones que quiero hacer. Saludos!

 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
los archivos header.html y footer.html contienen el código HTML de los elementos de la cabecera y el pie de la página. Las propiedades de la cabecera y el pie, así como todos aquellos contenidos dentro, suelen especificarse en archivos CSS que están en la misma carpeta del tema de apariencia. Suelen llamarse style_colors, style_layout o similar.

Ademas de eliminar o modificar los ya existentes, puedes añadir nuevos elementos como se hace habitualmente en HTML(capas, enlaces, textos, etc..)
 
Promedio de calificaciones: -
karOliina kOrtez
Re: Modificar plantilla en el Header y el Footer
 

¿Donde encuentro los archivos header.html y footer.html ?? 

no los ubico,.,., es que casi todos  los archivos son .php

 
Promedio de calificaciones: -
Imagen de sebastian fernandez
Re: Modificar plantilla en el Header y el Footer
 

hola karolina hay una forma muy rapida de encontrar tus archivos

si  usas vista o windows 7...

1.presiona el boton de inicio te saldra el menu pero omite eso

2. veras una cajita de texto ahi teclea el archivo que estas buscando con todo y extension.

3. dale clic derecho abrir la ubicacion del archivo y vuala!! ya tienes tu archivo ubicado.

espero te sea util

 
Promedio de calificaciones: -
Imagen de Maximiliano Saucedo
Re: Modificar plantilla en el Header y el Footer
 
Hola Susana, para modificar el header y el footer primero tenes que buscar el archivo header.html busca la siguiente linea:

<div id="banner"><h1 class="headermain"> <?php echo $heading ?></h1> </div>

donde dice <?php echo $heading ?></h1> es el texto que vos queres sacar lo podes borrar o si queres comentalo de la siguiente manera:
<!-- <?php echo $heading ?></h1> -->


para modificar el footer abri el archivo footer.html

busca las lineas:
echo $GLOBALS['loggedinas'];
echo $GLOBALS['homelink'];

esas son las imagenes, si queres borralas o comentalas agregandole //de la siguiente manera:

// echo $GLOBALS['loggedinas'];
// echo $GLOBALS['homelink'];


Saludos. Maximiliano.

 
Promedio de calificaciones: -
Imagen de Jose Luis Martin Jimenez
Re: Modificar plantilla en el Header y el Footer
 
Las respuestas de los compañeros anteriores ya te han dirigido a los puntos concretos que buscabas, pero si vas a seguir trabajando la realización de temas "a medida", creo que te sería útil dedicar un tiempo a revisar la documentación oficial, tal vez empezando por los Conceptos Básicos.

Saludos.
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Al igual que la autora del post, yo tambien quiero cambiar la cabecera para añadir unos logos.
Vale, entonces he intentado modificar el header.html, añadiendo unos div en la zona que llaman "headermain" o "headermenu", añadiendo el estilo en el style.css pero supongo que por mi excaso conocimiento de css+php no he conseguido lo que buscaba.
¿Algunalma caritativa puede indicar con codigo la forma de añadir dos imagenes en la cabecera de todas las paginas de moodle? Creo que eso es lo que busca la mayoria y seria genial que algun crack de esto pusiera como hacerlo.
Yo he intentado crear un div con 2 span para colocar en cada uno un logo y situarlos a derecha e izquierda. Sin mucho exito....

Gracias!
 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
Adjunto un fichero header.html de muestra. En él se añaden dos imágenes llamadas logo y logoright. Cada una va a un lado, y su posición en pantalla se controla mediante las siguientes clases de CSS, que tendrás que añadir al correspondiente archivo CSS del tema de apariencia:

.headerlogo {
width: 81px;
height: 50px;
float: left;
margin-top: 15px;
}

.headerlogoright {
width: 186px;
height: 87px;
float: right;
margin-right: 30px;
}

Ten en cuenta que en este caso, ambas van dentro de otra capa (div) que actua como contenedor llamada banner.

Esta es una de las posibles soluciones, ya que normalmente depende de como estén estructurados los distintos elementos del tema de apariencia (cabecera, barra de navegación, bordes, pie de página, etc..)

Si quieres una buena fuente de información acerca de como hacer temas de apariencia para Moodle, en la Moodlemoot 2009 que tuvo lugar en Madrid (España) se llevó a cabo un taller sobre este tema, y todo el material está accesible en español a través de www.moodlemoot.net/2009/talleres (se puede entrar como invitado)
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Gracias por la info. He estado viendo la web que dices (una pena que me entere ahora porque yo soy de madrid!) pero por lo que parece los cambios descritos para la cabecera no son lo que busco. En mi theme (custom corners) no tengo esas imagenes para sustituir. ¿Soy yo o la pagina parece que está aun muy vacia de contenido?
Tambien he probado tu ejemplo, pero como bien dices me faltaria crear el div "banner" en el css. Ademas de eso (que no sé exactamente como hacer) he visto que en el header.html te creas dos div al final del fichero para añadir en ellos los dos logos. ¿Porque se hace asi? Yo intentaba hacerlo en el div ya creado "headermenu" o "headermain" y aunque salia fatal, al menos ví que las imagenes se colocaban arriba del todo, en la cabecera donde aparece tu logueo (nombre, exit..)

Perdona por ser tan pesado pero ¿podrias aclararme esto??
Muchas gracias
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Despues de toquetear un poco en header.html empiezo a conseguir algo parecido a lo que me gustaria. En principio un logo a la izquierda del todo, otro en medio y otro a la derecha del todo (debajo de "Estas logueado como..")

EL codigo que he metido es este pero claro, me va añadiendo una imagen despues de otro y no acabo de situarlas en las posiciones que busco

<h1 class="headermain"><img alt="logo upm" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/upm.png" align="left"/><img alt="logo arq" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/aqr.png" align="middle"/><img alt="logo escudo" src="<?php echo $CFG->wwwroot.'/theme/'.current_theme() ?>/pix/escudo.jpg" align="rigth"/><?php echo $heading ?></h1>

De que manera deberia crear, supongo que con div, para separar las imagenes??
Gracias!

 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
Nada, hombre. Estamos para ayudar.. gran sonrisa

Es cuestión de gustos. Si usas un capa para cada una de las imágenes, podrás manipular sus características por separado, sin que los cambios de una afecten a la otra.

El detalle de que estén dentro de la capa banner es simplemente porque usé un tema de Moodle como base para la remodelación, e intenté mantener la estructura que tenía.

La estructura por capas de la cabecera de dicho tema es:

|_header-home
| \_ headermenu
|_banner
| \_ logo
| |_ logo right
|
|_ navbar (barra de navegación)

Headermenu contiene el desplegable de idioma y el mensaje de login Usted se ha autentificado como XXXX xxx (Salir)Banner es la siguiente capa, posicionada justo debajo, y es esta la que contiene las imágenes. La posición de las mismas es siempre en relación a los límites de la capa banner.

Navbar es la barra de navegación, que contiene entre otros, el botón Activar Edición y las migas de pan (breadcrumbs) que te indican la ruta de la sección en que te encuentras.

De todas formas, si publicas tu header.html aquí tal vez podamos echarte una mano más fácilmente.


 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Gracias por la ayuda, no debe de ser facil explicar esto a un paletillo como yo.
Mas o menos voy entendiendo la estructura pero no soy capaz de colocar un div a la derecha de otro, siempre me aparece debajo!!
Te adjunto mi header.html a ver si me lo puedes mirar. Tengo la intencion de poner la misma cabecera en todas las paginas (aunque aun no haya puesto el codigo en ambas partes, lo digo porque una estará a medias)
Al user-style.css le añadí los bloques que me dijistes antes.

Muchisimas gracias
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Vale, creo que casi lo tengo, pero hay una cosa que se me escapa (no se si porque tengo cero idea de php). En el tema que utilizo, hay un espacio entre el div de la izquierda y el de la derecha (login). Ese espacio es automatico y dependiendo del tamaño de la ventana se agranda o empequeñece. Pues es justo ese espacio el que no se rellenar con un logo. Os pongo una imagen para que lo veais mas claro, creo que viendola sobran las palabras
Free Image Hosting at www.ImageShack.us



Si hago la ventana lo suficientemente pequeña, la linea verde se junta en una sola.
¿Que puedo hacer para rellenar ese hueco?
Os dejo de nuevo el header.html que lo he modificado un poco.


Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
Me alegro que hayas podido avanzar tu solo. Esa es sin duda la mejor forma de aprender.. sonrisa

Entiendo que lo que quieres es que la línea verde vaya de lado a lado de la cabecera ¿no? En ese caso, hay varias soluciones. Lo habitual es usar una imagen de 1px de ancho como imagen de fondo de la cabecera, repitiéndola a lo largo del eje x.

Por tanto, tendrías las dos imágenes de los logos sin la línea verde flotando sobre la cabecera con la imagen de la linea verde de fondo. De esta manera, no importaría cuan ancha fuese la pantalla, ya que la línea verde siempre ocuparía toda la cabecera, y las imágenes se adaptarían a espacio disponible.

 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Estoy a tope!! jejeje.
Te cuento, aunque quizas se aprecie en el header.html.
Las 2 imagenes de la izquierda las he metido dentro del "headermain", en el header.html. La imagen de la derecha del todo la he metido tambien en le header.html pero en el div "headermenu". Bien o mal lo he hecho asi.
Despues la linea verde la he puesto como background-image en el css, en los bloques headermain y headermenu. Originalmente esa imagen de la linea es de 2000px de ancho. Lo hice asi pensando que nunca se quedaria corta.

Sobre hacer la linea de 1px (con photoshop en un periquete) lo puedo hacer, pero no sabria repartirla por toda la cabecera. ¿Puedes detallarme eso? sonrojado

Gracias
 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
Por supuesto. Tienes que añadir esta propiedad a la capa que contiene ambas imágenes.

background:#FFFFFF url(ruta_de_la_imagen) top left repeat-x;

El parámetro clave es repeat-x, que es el que indica que debe repetir la imagen a lo largo (eje x)
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Ya he enloquecido totalmente!! Estoy hasta pensandome el cambiar el tema, que me da a mi que este es especialmente complejo. (acepto recomendaciones)
A ver si puedes mirarme 4 imagenes que he hecho de mi moodle con distintos tamaños de pantalla. El problema es que como los div se adaptan al tamaño de la pantalla se me empiezana mover por todos los lados, y si pongo la linea verde como background de la cabecera entera (y no como background de cada div), todo se me descoloca demasiado y queda feisimo.
Hay alguna forma de hacerlo un poco mas estatico?? Forma habrá, pero una medio facil..
Es que con el addon Web Developer veo que tiene trillones de capas y me estoy desesperando un poco.
Te dejo las imagenes, espero que me puedas aconsejar algo
Link
Hay 4:
img30 - ajustando el tamaño de la ventana obtengo la cabecera que quiero tener, con el logo central en el medio
img694 - Tamaño comleto, el logo central queda fatal
img41 - para que contarte...

Madre mia, que pesado soy
 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
Personalmente, opino que el tema custom-corners tiene una estructura algo compleja como para meterle mano y hacer grandes modificaciones sin tener algún conocimiento de diseño web (CSS, PHP y HTML) Hasta cierto punto se puede considerar como un tema de apariencia experimental.

Yo suelo usar los temas de Themza como base. Son más sencillos y la estructura es m´sa clara y organizada.

Otra cosa, si estás con Firefox, lo más recomendable es usar Firebug.

Una duda, esa Moodle está accesible al público..es por si se puede echar un vistazo más a fondo.
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Buenas!
Pues ahora no lo tengo online. Estoy en local viendo los cambios qe voy haciendo, que es un poco mas rapido asi.

A ver, que esta claro que debo de ser retrasado. Me he instalado el tema eLearning de Themza y no consigo que se refleje ningun cambio que hago en el header.html. Solo consigo cambios si voy directamente a la carpeta pix a cambiar/eliminar imagenes.
No lo entiendo muerto
Estoy tan hasta la p... que me valia con eso, pero es que en la cabecera debe de colorearla por debajo con negro, y como eso no es imagen, no consigo quitar el negro.
Estoy flipando (ademas de llorando). Como es posible que escriba (header.html) en el headermenu, o meta directamente una imagen y no se refleje???

Dios, creo que despues de esto, si es que lo consigo, voy a estar mucho tiempo sin editar una web!!

UN saludo
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Esto marcha!!!
Olvidad el ultimo mensaje que envié.
He vuelto a la custom_corners y mas o menos ya la tengo lista (es que me gustaba mucho el tema).
La ultima cosita (os lo juro!).
He puesto el mismo codigo para el "header-home" y para el "header" (es decir, misma cabecera para todas las paginas). Pero me pasa algo que soy incapaz de saber porque.
Tengo tres div dentro de la cabecera (logo; logo central; login+logo).
Pues bien, si no estoy logueado (portada y ventana login) los logos se me colocan bien independientemente del tamaño del navegador. Pero cuando me logueo (este en cualquier pagina de moodle) la imagen central se descojona si el navegador lo hago muy pequeño.

¿Donde encuentro la diferencia de configuracion de estilos que dependa de si estoy logueado o no??

Gracias una vez mas!

EDITO___________
Mas o menos lo he arreglado. Quizas no de la mejor forma, pero creo que me basta.
En el CSS del div principal (#page) le he añadido un tamaño minimo:

min-width: 850px;
width: auto !important;
width: 850px;

Punto final!
Muchisimas gracias por tu ayuda
 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
¿Podrías poner unas capturas de pantalla para ver como te ha quedado la cosa?
 
Promedio de calificaciones: -
Mi foto
Re: Modificar plantilla en el Header y el Footer
 
Pues ahí va!
Espero que os guste, algo sencillo pero complicado para mi.


Free Image Hosting at www.ImageShack.us


 
Promedio de calificaciones: -
Sonría, por favor.
Re: Modificar plantilla en el Header y el Footer
Grupo Moderadores
¡Enhorabuena! ha quedado muy limpio y alineado.. gran sonrisa
 
Promedio de calificaciones: -
Imagen de Juan Antonio Caravaca Cano
Re: Modificar plantilla en el Header y el Footer
 
Ya no se encuentran disponibles los tema 4 y 5. Gracias de todas formas.
 
Promedio de calificaciones: -
Carlos Bravo Reyes
Re: Modificar plantilla en el Header y el Footer
Grupo Moodlers de gran ayudaGrupo Personas Certificadas en Creación de Cursos Moodle
Estimados
Hice un pequeño tutorial sobre la modificación de un tema estilo menú desplegable, no se refiere a la modificación de las plantillas y estilos, sino a la forma de combinar actividades como es el caso del libro y cómo editar el archivo correspondiente.
Lo pueden encontrar en http://aula.catedradigital.info en la zona Moodle al minuto.
Espero comentarios
Saludos
 
Promedio de calificaciones: -