Modificar plantilla en el Header y el Footer

Modificar plantilla en el Header y el Footer

de Susana Vergara -
Número de respuestas: 29
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!
Adjunto jpg-moodle.jpg
Promedio de valoraciones: -
En respuesta a Susana Vergara

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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..)
En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de karOliina kOrtez -

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

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

En respuesta a karOliina kOrtez

Re: Modificar plantilla en el Header y el Footer

de sebastian fernandez -

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

En respuesta a sebastian fernandez

Re: Modificar plantilla en el Header y el Footer

de Muba Maza -

Hola amigos!

Igual debí empezar un post nuevo o algo, pero como mi asunto está relacionado ahí va;

Lo primero decir que soy ultranovato en esto, con todo el respeto el código me pone mal cuerpo, soy más de la parte 'tangible' y visual, pero prefiero hacer por mi mismo todo lo relativo a mi web para saber donde trastear si quiero cambiar algo, bueno al lío.

Por fin he podido cambiar la altura del Header, parece que mi plantilla la traía automática e igual he hecho una chapuza pero de momento funciona casi del todo. Esto es, cuando vas a mi página www.mubamaza.com la altura del Header aparece más grande de lo deseado y al hacer clic en cualquier sitio (logo, seccion...) se redimensiona al tamaño que quiero que quede. 

Como puedo solucionar que la primera vista de la web aparezca con el tamaño de Header definitivo?

Alguien versado en código que me tienda una mano? Mil gracias 

Llevo demasiadas horas con esto y seguro que es muy simple para ustedes

En respuesta a Susana Vergara

Re: Modificar plantilla en el Header y el Footer

de Maximiliano Saucedo -
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.

En respuesta a Susana Vergara

Re: Modificar plantilla en el Header y el Footer

de Jose Luis Martin Jimenez -
Imagen de Moodlers de gran ayuda
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.
En respuesta a Jose Luis Martin Jimenez

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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!
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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)
En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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!

En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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.


En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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.


En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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.

En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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)
En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
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.
En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
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
En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Xavier Paz -
¿Podrías poner unas capturas de pantalla para ver como te ha quedado la cosa?
En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Pablo Palacios -
Pues ahí va!
Espero que os guste, algo sencillo pero complicado para mi.


Free Image Hosting at www.ImageShack.us


En respuesta a Pablo Palacios

Re: Modificar plantilla en el Header y el Footer

de Juan Hernandez -

Hola

Amigo, yo estoy utilizando el tema roshnilite pero no encuentro los ficheros header.html y footer.html

y no puedo cambiar el tamaño el alto y ancho de mi logo.

Tambien quisiera saber como cambiar el logo de Moodle que esta en el Footer, y poder colocar el de su logo ahi en vez de moodle.

Espero puedas ayudarme.


Leo y Leo y no encuentro la solución. triste

En respuesta a Xavier Paz

Re: Modificar plantilla en el Header y el Footer

de Maureny Salgado Uranga -

Hola, mis saludos, estoy queriendo modificar el banner de mi aula virtual, quisiera poder colocar un banner en el teme Morecandy que es el que estoy utilizando pero que la barra de entrada de la cabecera cambie de lugar.

podría ayudarme.


saludosç

Maureny

En respuesta a Susana Vergara

Re: Modificar plantilla en el Header y el Footer

de Carlos Bravo Reyes -
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
En respuesta a Susana Vergara

Re: Modificar plantilla en el Header y el Footer

de juan lopez -

Bueno hasta ahorita necesite realizar esta acción y las soluciones que bindaban era para versiones antiguas de moodle; para modificar los elementos en ingles tanto del header como el footer, deben ir a moodle/theme/nombredeltema/layout/includes

Allí apareceran los archivos php de las secciones correspondientes header y footer donde se podra modificar los elementos y/o palabras que se requieran; saludos.