Temas

Personalice el aspecto de Elgg.

Un tema es un tipo de doc:complemento </admin/plugins> que substituye los aspectos visibles de Elgg.

Esta guía asume que usted está ya familiarizado con:

Cree su complemento

Cree su complemento siguiendo las instrucciones descritas en la guía para desarrolladores.

  • Cree una carpeta nueva dentro de mod/.
  • Cree un nuevo start.php.
  • Cree un nuevo fichero manifest.xml que describa el tema.

Personalice el CSS

Desde la versión 1.8 de Elgg, el código CSS está dividido en varios ficheros en base a qué aspectos del sitio son los que cambia el tema. Esto le permite trabajar en el aspecto de los distintos elementos del tema de uno en uno, de forma que pueda progresar rápidamente sin necesidad de angustiarse.

La siguiente es una lista de las vistas de CSS existentes:

  • elements/buttons.css: Provides a way to style all the different kinds of buttons your site will use. There are 5 kinds of buttons that plugins will expect to be available: action, cancel, delete, submit, and special.
  • elements/chrome.css: This file has some miscellaneous look-and-feel classes.
  • elements/components.css: This file contains many “css objects” that are used all over the site: media block, list, gallery, table, owner block, system messages, river, tags, photo, and comments.
  • elements/forms.css: This file determines what your forms and input elements will look like.
  • elements/icons.css: Contains styles for the icons and avatars used on your site.
  • elements/layout.css: Determines what your page layout will look like: sidebars, page wrapper, main body, header, footer, etc.
  • elements/modules.css: Lots of content in Elgg is displayed in boxes with a title and a content body. We called these modules. There are a few kinds: info, aside, featured, dropdown, popup, widget. Widget styles are included in this file too, since they are a subset of modules.
  • elements/navigation.css: This file determines what all your menus will look like.
  • elements/typography.css: This file determines what the content and headings of your site will look like.
  • rtl.css: Custom rules for users viewing your site in a right-to-left language.
  • admin.css: A completely separate theme for the admin area (usually not overridden).
  • elgg.css: Compiles all the core elements/* files into one file (DO NOT OVERRIDE).
  • elements/core.css: Contains base styles for the more complicated “css objects”. If you find yourself wanting to override this, you probably need to report a bug to Elgg core instead (DO NOT OVERRIDE).
  • elements/reset.css: Contains a reset stylesheet that forces elements to have the same default

Extensión de vistas

Existen dos maneras de modificar vistas:

La primera forma consiste en añadir cosas adicionales a una vista existente mediante la función de extender la vista desde dentro de la función de inicio de start.php.

Por ejemplo, el siguiente start.php añadirá mytheme/css al fichero CSS del núcleo de Elgg:

<?php

    function mytheme_init() {
        elgg_extend_view('elgg.css', 'mytheme/css');
    }

    elgg_register_event_handler('init', 'system', 'mytheme_init');
?>

Substitución de vistas

Los complementos pueden tener una jerarquía de vistas, todo fichero que exista aquí substituirá a cualquier fichero en la jerarquía de vistas del núcleo de Elgg. Por ejemplo, si el complemento tiene un fichero:

/mod/myplugin/views/default/elements/typography.css

Este fichero substituirá a:

/views/default/elements/typography.css

Pero sólo mientras el complemento esté activado.

This gives you total control over the way Elgg looks and behaves. It gives you the option to either slightly modify or totally replace existing views.

Icons

As of Elgg 2.0 the default Elgg icons come from the FontAwesome library. You can use any of these icons by calling:

elgg_view_icon('icon-name');

icon-name can be any of the FontAwesome icons without the fa--prefix.

Herramientas

Desde la versión 1.8 de Elgg, se ofrecen algunas herramientas de desarrollo para ayudar a desarrollar temas. Active el complemento de «Desarrolladores» y acceda a la página «Vista previa del tema» para observar el progreso del tema.

Personalizar la página principal

La página principal de Elgg ejecuta un gancho de complementos llamado index,system. Si el gancho devuelve true, se asume que ya se ha dibujado otra página principal, y no se muestra la página predeterminada.

Por lo tanto, puede substituir la página principal registrando una función para el gancho de complementos index,system y devolviendo true desde esa función.

Resumiendo:

  • Cree un complemento nuevo.
  • Necesitará algo como lo siguiente en start.php:
<?php

function pluginname_init() {
    // Replace the default index page
    elgg_register_plugin_hook_handler('index', 'system', 'new_index');
}

function new_index() {
    if (!include_once(dirname(dirname(__FILE__)) . "/pluginname/pages/index.php"))
        return false;

    return true;
}

// register for the init, system event when our plugin start.php is loaded
elgg_register_event_handler('init', 'system', 'pluginname_init');
?>
  • A continuación, cree la página principal (/pluginname/pages/index.php) y úsela para poner el contenido que le gustaría tener en la página principal de su sitio Elgg.