Archive

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.

Felicidades!

CSS only scrollable timeline

November 9, 2010 Leave a comment

This might come in handy some time http://dev.opera.com/articles/view/css-only-scrollable-timeline-2/

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  — */
#swap_menu_link
{
float: left;
}
#toolnav{
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/tool_navigation_menu.inc.php 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;
bottom:0pt;
overflow:hidden;
position:fixed;
vertical-align:top;
width:98%;
z-index:9999;
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: , ,

CSS changes in Dokeos 1.8.5

For the ones of you who are using their own CSS, there are a few changes that have appeared in Dokeos 1.8.5 that might affect you…

First of all, we have removed the “default” style (in the Dokeos package, that is, so it won’t affect you if you are migrating from a 1.8.x). This might affect you if you are upgrading from a 1.6.5, as the upgrade doesn’t handle the preservation of the “default” style, so you first need to copy your “default” style directory over from your old installation, then go into the admin page and change it to the current default, which is “public admin”.

Second, we have added a header and a footer element (look for “corner” in the default.css file) to allow you to style the header a little bit more.

Third, we have fixed the fact that the CSS sheets from the learning path tool were inside the newscorm/ directory. They are now back to the css/[your style]/ directory, which will allow you to finetune them as well.

Fourth, we have *fixed* (I’m hesitating there) the problem of the learning path tool not allowing
the header to be resized (a large header would make the top frame disappear). We know we shouldn’t be using frames, and we tried hard no to, but still, SCORM kinds of blocks you from not using them. So yes, we *fixed* it by removing the top frame, as the Dokeos header just didn’t make sense in this context (it was reducing the view of the actual content which is what everybody wants to see).

Finally, there is now an option to upload new CSS stylesheets directly from the web interface, so you won’t even need to upload your files via FTP anymore. This being said, you need to change the permissions on the main/css directory first, otherwise it won’t let you.

Categories: Development, English Tags: ,

Howto make the Dokeos footer float

I don’t know about you, but I really don’t like the Dokeos footer moving around the screen when there’s less content.

Luckily, CSS offer an easy way to change this. Let’s say I want to update the css/dokeos_classic/ theme.

The rule, as always, is to make a copy of the directory that is the closest to what I want, and only work on a copy, so I’m going to do that. Note that in the following example, I’m using vim as a text editor, which might seem a bit too difficult for some of you, but it has the added interest of letting me edit text files directly on my server.

~$ cd dokeos/main/css/

~$ cp -r dokeos_classic dokeos_classic_floating_footer

~$ cd dokeos_classic_floating_footer/

~$ vim default.css

Now I’m inside default.css, I’m searching for the #footer element (around line 360 in Dokeos 1.8.5).

I want to change it as follows (the most important there being position: fixed; )

#footer {
height: 1.5em;
padding-top: 0.2em;
border-top: 1px solid #4171B5;
background-color: #E5EDF9;
font-size: 12px;
bottom:0pt;
overflow:hidden;
position:fixed;
vertical-align:top;
width:98%;
z-index:9999;
padding-left: 1em;
padding-right: 1em;
}

If I stop here, and try it in my browser (on a long page, otherwise the difference is not obvious), I can see that it already works, but that maybe some of the page’s text is hidden under the footer.

That’s because the outer-frame element in which the footer is included should define a margin of the height of the footer. This can be done by adding the property margin-bottom: 1.5em; as follows:

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

That’s it (for now). It’s only been tested under Firefox 2 so far, so make sure you try it out with other browsers before “rolling it out” on your production server.

I’d like to find a way to always stick it at the bottom of the page but without floating effect… just leave it be static at the bottom of the page, but also when there’s only like half-a-screen of text, but I haven’t found a way to do that just yet.

2009-01-05 update:

Apparently, *one* way of doing this is done here: http://www.uservoice.com/session/new

Tips and tricks for using pseudo CSS in OpenLaszlo 4

January 28, 2008 Leave a comment

Having had to deal with this stuff lately with the Dokeos videoconference development, I thought it might be useful. The mainstream page is located on the Dokeos wiki, so in the following weeks, I recommend, looking at it over there. Here goes…

The new version of the videoconference tool (to be out at the same time as Dokeos 1.8.5) can be theme-modified via CSS. Here are some tips and tricks to do this, as it is not completely using the CSS standards, but is largely inspired by them. You will need the videoconference tool sources (downloadable from SVN) in order to modify the style, and then you will need to recompile the application with OpenLaszlo 4, as the CSS is statically bound.


Tips and tricks:

  • A CSS can be loaded from the main .lzx file by using the following syntax, right after the <canvas> tag opening:
	 <stylesheet src="resources/css/videoconf.css" />
  • The CSS cannot dictate the canvas dimensions. These have to be defined in the <canvas> tag attributes width and height.
  • When using a CSS, the property to be used has to be bound to the object by defining the object in t}e CSS with either:
    • in the case of an object having a specific tagname:
		 objectname{
		   property: xx;
		 }
    • in the case of having an id attribute in the object:
		 #objectid{
		   property: xx;
		 }
    • in the case of having a name attribute in the object:
		 [name='objectname']{
		   property: xx;
		 }
  • Underscores (_) cannot be used in object names or ids or name attributes because this will cause OpenLaszlo to break upon compilation
  • If you want do define a ‘visible’ attribute via CSS, you have to define this attribute last in the tag declaration, and you have to use a value of 0 or 1 (you cannot use true or false). The CSS property used could be ‘display’ (that sounds the closest to normal CSS)
  • Property values should be expressed without units (34 and not 34px). They will be considered as pixels.
  • If you want to load a specific resource (external image or something similar) through CSS, use the ‘source’ attribute in the OpenLaszlo object declaration, not the ‘resource’ attribute, which will want to load a previously-declared resource.
  • Resources “frame” tags do not appear to be an acceptable place where to put an “id” attribute…

Overall, the integration of CSS-style design is a very big improvements, as it provides an easy way for designers to contribute new styles without having to delve into the OpenLaszlo code.

Here is a link to the official documentation of OpenLaszlo 4 and CSS

%d bloggers like this: