Modificar theme Aardvark Moodle 2.5

Modificar theme Aardvark Moodle 2.5

de Mariano Gonzalez -
Número de respuestas: 8

Buenas,

 

Estoy modificando el theme Aardvark para Moodle 2.5 y ha cambiado bastante con respecto a las versiones anteriores... y quiero bajar lo que más se pueda la barra de navegación que marco en rojo en la imagen que adjunto... la idea es ubicarla lo más debajo que se pueda, arriba del titulo del curso o del sitio... He buscado mucho en el custom.css pero nada lo pueda hacer bajar...

En layout/general.php hay este código:

<div id="page" class="container-fluid">

<?php if ($hasheader) { ?>
<header id="page-header" class="clearfix">
<?php if ($hasnavbar) { ?>
<nav class="breadcrumb-button"><?php echo $PAGE->button; ?></nav>
<?php echo $OUTPUT->navbar(); ?>
<?php } ?>
<h1><?php echo $PAGE->heading ?></h1>

<?php if (!empty($courseheader)) { ?>
<div id="course-header"><?php echo $courseheader; ?></div>
<?php } ?>

 

Veo que las classes para esta barra y el botón de edición son: 

  • accesshide
  • breadcrumb-button
  • singlebutton

Pero no las encuentro por ningún lado...

 

Alguien tiene idea de como hacerlo?

Adjunto print.png
Promedio de valoraciones: -
En respuesta a Mariano Gonzalez

Re: Modificar theme Aardvark Moodle 2.5

de mijail cohen -

fijate en el archivo config.php del tema en cueston, que css esta cargando:

por ej  "archivo.css" se cargaria de la sigiente forma

$THEME->sheets = array(
'archivo',
);

podes cambiar ese archivo (esta en la carpeta styles) o podes agregar uno nuevo en config y crear un archivo aparte para tus propios estilos

En respuesta a mijail cohen

Re: Modificar theme Aardvark Moodle 2.5

de Mariano Gonzalez -

La idea no es crear un nuevo archivo, sino modificar el css existenta para bajar la barra de navegación.... es que en el header.php hay llmados a unas clases que no están en el core.css

En respuesta a Mariano Gonzalez

Re: Modificar theme Aardvark Moodle 2.5

de mijail cohen -

lo mejor que podes hacer es ir probando en el explorador, si tenes chrome mandale ctrl+shift+j (consola de javascript) anda al tab de elements y ahi vas a tener todo el DOM tree con los estilos de cada elemento, de esa forma vas a poder ir probando que puede llegar a ser, tene en cuenta tambien vos podes agregar tus propios elementos con clases propias en los archivos de layout.

otra cosa a tener en cuenta, quiza no quieras por comodidad pero siempre es sugerible ,como dijo  el otro user, hacer tus cambios en una hoja de estilo aparte, mas que nada para evitar accidentes.

En respuesta a Mariano Gonzalez

Re: Modificar theme Aardvark Moodle 2.5

de Yonatan Eric Cruz Hernández -

Hola, puedes acceder al custom CSS de tu tema de aardvark y probar el siguiente código agregándolo en el campo, guardas cambios y revisas, a nosotros nos funciona en nuestro Moodle, saludos desde Izúcar de Matamoros, Puebla, México:



/*seccion */

.section .sectionname{

font-weight: bold;

color: #DB9840;

}

/* Fin navbar */

.weeks .current{

background-color: #E8FFEC;

}

/* Pie */

#page-footer{

background-color: #EDEDED;

padding: 10px;

}

#page-footer #footer-middle{

color: #636363;

}

#encabezadositio{

height:120px;

width:100%;

background: url('http://sav.utim.edu.mx/theme/image.php/aardvark/theme/1420745391/topmain') repeat-x 0 50%;

/*z-index:5001;*/

/*position: fixed;*/

background-size: auto 200px;

margin-top:-20px;

        margin-bottom:10px;

}

#logoutim

{

padding-top: 12px;

float: right;

padding-right: 28px;

}

#logoutim .logo

{

margin: 0 auto;

max-width: auto;

border-radius: 80px;

}

En respuesta a Mariano Gonzalez

Re: Modificar theme Aardvark Moodle 2.5

de Ricardo Grandón -
tienes que editar en header.php y modificar esta linea

<div class="container-fluid clearfix">
por
<div class="container-fluid clearfix" style="padding-top: 40px;">

con eso crea espacio arriba donde necesitas.

saludos.
En respuesta a Ricardo Grandón

Re: Modificar theme Aardvark Moodle 2.5

de Alejandro Moreno Talaveron -

Hola!
Gracias por la ayuda, he conseguido crear el espacio como pedía el compañero, pero ahora no se cómo insertar una imagen que me pudiera servir de encabezado en ése sitio. (Algo parecido a lo que enviaba el compañero de México)

Su código personalizado no me funciona a mi.

¿Podéis orientarme?

Gracias!

En respuesta a Alejandro Moreno Talaveron

Re: Modificar theme Aardvark Moodle 2.5

de Franco Pantoja -
Imagen de Moodlers de gran ayuda

Buenas 

Puedes tener 2 opciones

1. Insertar la imagen, en ese sentido puedes utilizar la etiqueta html con la referencia de la imagen en Moodle

<img src="<?php echo $OUTPUT->pix_url('logo', 'theme'); ?>" alt="campus virtual" />

Esto es, se utilizará por ejemplo laimagen logo.png (no hace falta indicar la extensión) que se encuentre  en tu current theme, aadrvark, en la carpeta pix

2. También puedes hacer uso de añadirla al div como background via CSS.

background-image: url("//mycampus/theme/aadrvark/pix/logo.png");

Ten la precaución de indicar la url con la ruta absoluta, si no podrías tener problemas (utiliza Firebug para ir comprobando los cambios)

En la medida de lo posible, siempre será mejor manipular las vistas via CSS que PHP, así dejarás intacto el core Moodle y te será más fácil su escalabilidad y actualizaciones


Saludos!!