Posts Tagged ‘CSS’

Mozilla-specific CSS-hacks

Just two valuable links to information about how to avoid other browsers taking into account Mozilla-specific hacks:

Courtesy of Julio Montoya and the authors of the respective pages.

Categories: Development, English Tags: , ,

Poner su logo en la cabecera de Chamilo classic

April 21, 2011 9 comments

Cambiar el logo encima de su portal de Chamilo es muy fácil. Para ir al punto, no analizaré aquí los aspectos importantes del estilo visual global de su campus, pero es importante mencionar una sola cosa: si quiere usar su propio logo, es una buena idea hacer una copia del estilo que más les gusta.

Para este primer etapa, simplemente tiene que copiar la carpeta del estilo que más le gusta en una nueva carpeta. Por ejemplo, si su institución se llama AEB Consultores, hacer una copia de la carpeta main/css/chamilo como main/css/aeb.

A partir de ahí, puede empezar a trabajar su logo. La idea, para minimizar el esfuerzo (obviamente se pueden obtener resultados mucho mejores con más esfuerzo), es de usar el logo actual como base, y redimensionar su logo en base a esto.

En la carpeta main/css/aeb/images, encontrará un imagen llamado header-logo.png.

Logo por omisión del campus de Chamilo

Logo del estilo "main/css/chamilo"

Este imagen es el que se usa actualmente como logo. Abralo con un editor de imagenes. Recomendamos la herramienta de software libre GIMP. Al abrir, se presentan datos importantes en el título de la ventana.

Chamilo logo in Gimp

The Chamilo logo as viewed by Gimp

Vemos que:

  • el tamaño de este logo es de 260×84 pixeles. Es decir 260 pixeles de ancho por 84 pixeles de alto.
  • el fondo es transparente
  • existe una parte superior vacía (no se aprovecha de los 84 pixeles)

Si queremos evitar esfuerzos, tenemos que cumplir con lo siguiente:

  • nuestro logo tiene que estar en un marco de 84 pixeles de alto
  • tiene que tener el mismo nmobre de fichero (header-logo.png)
  • tiene que estar en una carpeta copia de main/css/chamilo
  • tiene que usar un máximo de 70 pixeles de alto sobre los 84 pixeles del marco, y
  • el fondo del imagen para los 14 pixeles superiores tiene que ser transparente (simplemente porque aparecerá un texto en este area y así evitamos jugadas de estilos para soporte de múltiples navegadores)

Abramos nuestro logo con Gimp (CTRL+O)

Logo personal en Gimp

Logo personal original

Cortemoslo (con la herramienta de corte o SHIFT+C, seleccionar zona y hacer clic en el medio) para evitar espacio blanco alrededor.

Logo recortado

Logo recortado

Guardemos esta primera versión (CTRL+SHIFT+S) con nombre “header-logo.png” ya que servirá para aplastar al logo por omisión de Chamilo que se llama así.

Ahora redimensionamos el imagen de forma proporcional para que tenga un alto máximo de 70 pixeles: Mení Imagen -> Escalar la imagen… -> Altura: 70 -> Tab -> Escalar.

Nuestro imagen (quizás de calidad un poco menor) tiene el buen tamaño. Ahora tenemos que ampliar el lienzo para que el lienzo total sea de 84 pixeles, con el logo en la parte inferior: Imagen -> Tamaño del lienzo -> Quitar el eslabón de relación e indicar 84 en Altura -> reubicar el logo hacia abajo. Redimensionar.

Redimension de lienzo

Redimension de lienzo

Guardar el imagen como header-logo.png (confirmar el mensaje de confirmación sobre los limitantes del formato PNG) y… ya tenemos nuestro logo.

Ahora remplazamos (via SFTP por ejemplo) el logo de Chamilo dentro de la carpeta main/css/aeb/images/

Dentro de su campus Chamilo, ir a Aministración -> Parámetros de configuración -> Hojas de estilo -> Seleccionar AEB y guardar.


CSS only scrollable timeline

November 9, 2010 Leave a comment

This might come in handy some time

CSS only timeline allows this kind of thing

Categories: Documentation, English Tags:

Fixed width layout for Dokeos and the 10px bar below the header

For those of you lucky enough to have tried a fixed-width layout in Dokeos, you will probably have fallen across the horrible background-color line bug that appears just below the banner…

A background-colored bar appears below the banner

A background-colored bar appears below the banner

This is due to a normal-message type element appearing on the screen at the top of the <div id=”main”> and the fact that the normal-message CSS definition defines a margin of 10px while there is a 0 padding for #main.

To fix it (but you will loose 10 px in most cases), increase the padding-top of #main to 10px.

Categories: Dokkeos, English, Graphics Tags:

Quick-change header for eTiny

eTiny (OpenERP’s web server) shows default header images and style that might not really suit your needs.

OpenERP with default style

OpenERP with default style

Being GPL, you can modify that at will, but you have to know how.

Although it’s probably not the best way to do it, you can easily alter the existing images to show something a little different.

This is all done (on a Debian/Ubuntu server) by changing the files in /usr/lib/python2.4/site-packages/eTiny-1.[0.1.1]-py2.4.egg/tinyerp/static (the part between brackets may vary) to suit your tastes.

The important files are

  • css/style.css
  • images/developped_by.png
  • images/mainmenu_button.png
  • images/openerp_big.png
  • images/openerp_small.png
  • images/sidebar_button_bg.png

So just make a backup, open them, change them and put them back in to get a very light (but refreshing change).

Open ERP using blue style

Open ERP using blue style

Changing Dokeos style, #2

A few weeks ago, I explained how to change the Dokeos footer to make it “float”. Today, in the context of an indirect contract with the Ministry of Education in Peru, I have to change the style a little bit more.

The idea is to [1] have a left bar showing large tools icons in the course homepage, and [2] have an alternative portal homepage for users, showing an introductory screen of the main general tools. This must all work on a 800×600 screen (which is a real challenge).

[1] Left toolbar showing course tools

This is not as tricky as it sounds (although it’s very close to it). There is a set of options in the administration panel that allow us to show a floating menu of short links to tools. It is recommended to use a style based on “Public Admin” to do that, as this is now the default for Dokeos, it is up-to-date and it works well with the feature we’re about to use.

Although we are basing this on the “Public Admin” style, it is important to note that it would be smart to actually start from “Dokeos Classic” instead, as this style is better suited for 800×600 display (Public Admin is, in fact, more suited for 1024×768 or larger). Nevertheless, in the context of this first challenge (left tools menu), it’s more easily explained with Public Admin.

Let’s first activate this menu:

Go to Portal administration -> Dokeos configuration settings -> Course, and look for the option “Display course navigation menu”. Change it to “Icons and text”.

Now go inside a course. Hoooo, a nice menu has appeared on the right.

OK, so we want this menu on the left instead… Lucky us, there is already a bunch of CSS directives to move this menu from right to left inside the main/css/public_admin/default.css style. Look for “#toolnav” and the following commented code. Comment the first part, uncomment the second, save and reload. Now this *should* have moved the menu to the left (if not, take a look at the following code, this should do it).

#centerwrap {
width: 100%;
/*  float: right; */
/*width: 100%;*/
/*margin-right: -95%;*/
/* margin-left: -95%;*/
/* this needs to be less than 100% for Moz/Mac which thinks
it’s empty otherwise. The difference is made up by putting a
negative left margin on the left float:
Note IE/Mac doesn’t like this method ~ it wants the 100% so it can
be fed in using IE only CSS below becasue IE/Win also works with the 100% method.
/* — course navigation menu as a definition list  — */
float: left;
float: left;
margin-right: 15px;
width: 154px;
#toolnavbox {
margin: 0 0 0 10px;
padding: 0;
/*float: left;*/
border: 1px solid #f0f0f0;
#toolnavbox dl {
width: 150px;
margin: 0 auto;
padding: 0;
background: transparent;
font-size: 12px;
text-align: center;
#toolnavbox dt {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
text-align: center;
color: #000;
border-bottom: 1px solid #fff;
background: transparent;
#toolnavbox dd {
margin: 0;
padding: 0;
color: #009;
text-align: left;
border-bottom:1px solid #fff;
background: #E5EDF9;
min-height: 35px;
padding: 10px 0px 10px 10px;
#toolnav img {
float: left;
width: 25px;
height: 25px;
margin: 0 4px 0 0;
#toolnavlist a, #toolnavlist a:link {
background: #E5EDF9;
/*color: #dcdcdc;*/
color: #333333;
padding: 1px 1px 0px 2px;
margin: 0 5px 0px 0;
text-decoration: none;
display: block;
#toolnavlist a:hover {
background: #fff;
/*color: #dcdcdc;*/
color: #333333;
#toolnavlist a#here {
background: #fff;
/*color: #dcdcdc;*/
color: #333333;

See the #swap_menu_link over there? Well, there is a small missing feature in Dokeos 1.8.5, whereby the swap_menu_link item has a style hard-coded in a script. It is fixed in 1.8.6, but if you want to fix it in 1.8.5, just edit main/inc/ and remove the “style” attribute from the declaration of the element with id=”swap_menu_link”.

That’s it for a left menu (you might get alignment problems in some cases, but I leave the little details for you to fix following your taste).

[2] Different portal homepage for logged-in users

This is also a littlebit less tricky than it sounds (although some improvements might be *very* tricky to add).

The idea is that we don’t want to get rid of user_portal.php, because it serves us well, but we would like to add a page to which the user will be directed when he logs in. This can be done through the very useful configuration variable “page_after_login”, which you can select in Portal administration -> Dokeos configuration settings -> Platform, but which only offers two possibilities by default: “Portal homepage” and “My courses”. We want to add one.

First let’s make a copy of user_portal.php and call it “my_homepage.php”. Let’s change some text in there to show that we are actually viewing the new page when we log in.

Second, let’s add this page as a choice in the portal administration panel. This can be done by adding a row to the settings_options table:

INSERT INTO settings_options (variable, value, display_text) VALUES (‘page_after_login’,’my_homepage.php’,’Custom homepage’);

Once this is inserted, and if we select this option in the administration panel, the page will appear when anyone logs in.

This is all very well, but the problem is that this page isn’t referenced anywhere (no link to it), so users won’t be able to get there after they log-in and click another link.

To make it available, you either have to provide a link to it on your portal’s homepage, or to add a new tab to the Dokeos navigation header. This however, is tricky, and I won’t cover it this time.

[3] Making the style fit to 800×600

There’s no secret recipe here. You have to try it and fix what’s to big to fit on screen. To help you, you can install the Web Developer extension for Firefox, which allows you to pick any dimension and resize your window to show you what it would look like on a 800×600 screen.

Although it may sound kind of “old fashion” to use 800×600 nowadays, I must admit that for very large administrations, it’s a nice feature to have as a low resolution also means larger fonts on screen, so you don’t annoy people with bad sight.

Categories: Dokkeos, English, Graphics, Techie Tags: , ,

Como hacer "flotar" el footer de Dokeos

No se para ustedes, pero no me gusta que el footer de Dokeos sea siempre moviendo con la pantalla cuando no hay bastante contenido a dentro de la pagina.

Pero tengo suerte que CSS sea tan bien hecho. Si quiero modificar algun estilo de Dokeos, el primer paso es de hacer una copia del directorio del estilo que más me gusta en los estilos por defecto de Dokeos. Digamos que quiero re-usar dokeos_classic, pues hago una copia de main/css/dokeos_classic/ dentro de main/css/dokeos_classic_floating_footer/

Para el ejemplo siguente, voy a estar usando a VIM, un editor en línea de comando, pero igual los estilos se pueden editar con cualquier editor de texto. VIM me permite un acceso directo al servidor, y por eso no necesito que “mandar” el fichero al servidor despues, pero la idea es que solo es un editor de texto.

~$ cd dokeos/main/css/

~$ cp -r dokeos_classic dokeos_classic_floating_footer

~$ cd dokeos_classic_floating_footer/

~$ vim default.css

Ahora estoy dentro de default.css, y voy buscando al elemento “footer” (cerca líneas 360 en Dokeos 1.8.5).

Quiero cambiarlo como sigue (lo más importante acá es el position: fixed; )

#footer {
height: 1.5em;
padding-top: 0.2em;
border-top: 1px solid #4171B5;
background-color: #E5EDF9;
font-size: 12px;
padding-left: 1em;
padding-right: 1em;

Si acabo aqui, y lo pruebo en mi navegador (por una página larga), puedo ver que ya funciona, pero que una parte de la página se esconde bajo el footer.

Esto es porque el elemento outer-frame en lo cual el footer esta incluído tendría que definir una propriedad margin del tamaño del footer. Eso se puede hacer con la propriedad margin-bottom: 1.5em; como se ve en lo sigente:

#outerframe {
position: relative; /* do not remove, fixes a bug in IE */
border: 1px solid #fff;
background-color: #fff;
margin-bottom: 1.5em;

Ya esta. Solo ha sido probado con Firefox 2 hasta ahora, entonces asegurase que sea probado con otros navegadores antes de usarlo por sus servidores de producción.

Me gustaría encontrar una manera de dejar el footer a bajo de la página, pero sin que sea flotante… solo dejar lo estaticamente a bajo, pero que también se quede cuando solo hay media-pantalla de contenido. Hasta ahora no encontré.

Categories: Spanish, técnico Tags: , ,
%d bloggers like this: