Log in

How can I make a very simple theme to change the look and feel

Tweenkle
By Tweenkle

Hi everybody.

Having used Wordpress for several years, I only tried elgg for a couple of days and I really love all the features in the box.

If I found very easy to set the features and rules according to my wishes, I really struggle to change the look and feel and it seems that they are no theme plugins working with the latest version of elgg.

Therefore I'm ok to write my own plugin to create a theme that could change the apparence of my site.

But I must admit that, after spending a whole day trying to understand the documentation, I didn't succeed.

I would be happy if I could, as a start, put custom colors in a .css file.

I followed the steps described in the developer guide :

  • I created a 'mythem' directory under mod/
  • I created a composer.json file describing my theme (I copied and adapt another one)
  • I created a mod/mytheme/views/default/resources/mytheme/ directory, in which I copied a bunch of .css (like module.css) or .css.php files from the  vendor/elgg/elgg/views/default/elements/ directory
  • I tried to wrote a new elgg-plugin.php but I didn't understand what I should put in it

Could somebody tell me what I did wrong and give me an example of the content of a very simple elgg-plugin.php ?

Thank you very much.

 

  • Nikolai Shcherbin
    Nikolai Shcherbin

    The easiest way is to extend existing styles.

    Most of Elgg styles are in this folder:

    \vendor\elgg\elgg\views\default\elements\

    Here is what you can do.

    For example, I need to change the layout page.

    I use Dev tools in my browser for this.

    Then I find the desired class (e.g. .elgg-layout-columns ) and find out that it's in this file:

    \vendor\elgg\elgg\views\default\elements\layout\columns.css

    Now I can change this class through the view extension.

    This can be done using elgg-plugin.php in my custom plugin:

    <?php


   return [

     'view_extensions' => [
          
         'elgg.css' => [
               'my_theme/my_style.css' => [],
          ],
     ],

];
    Where
     
    my_theme/my_style.css is a file located at
     
    /mod/my_plugin/views/default/my_theme/my_style.css
    In this file I made custom changes for elgg-layout-columns class.
     
    After clicking 'Upgrade' button via administration Dashboard you'll see the changes on your site.
     
    Another way is overriding views.
     
    In the example mentioned above, you just need to copy
     
    \vendor\elgg\elgg\views\default\elements\layout\columns.css
    to your custom plugin:
    \mod\my_plugin\views\default\elements\layout\columns.css

    Now make changes there.

    You don't need to add anything to elgg-plugin.php in this case.

    Note: 

    When using the styles extension, you can simply replace the styles in the class you need.

    .elgg-layout-columns {
   
   > .elgg-body {
     min-width: 10%; //custom here's
   }

}

    But if you're using view overrides then you need to save the entire structure of the file by making edits to it.

     

    Regarding colors, please see engine/theme.php

    You can use something else in your custom CSS:

    a.my-custom-class {
      color: $(anchor-color);
}
    In case you want to override global variables, you need to use vars:compiler, css hook in your plugin.
     
    We use our elgg-plugin.php again:
     
    'hooks' => [

    'vars:compiler' => [

       'css' => [

           \MyPlugin\Theme\Styles::class,

       ],

    ],

],
     
    Where,
    \MyPlugin\Theme\Styles is your class located at 
    /mod/my_plugin/classes/MyPlugin/Theme/Styles.php
     
    In \MyPlugin\Theme\Styles.php:
     
    <?php

    namespace MyPlugin\Theme;

    use Elgg\Hook;

    class Styles {

         public function __invoke(Hook $hook) {

                $vars = $hook->getValue();

                $theme = [
                   'anchor-color' => '#000000',
                ];

               $vars = array_merge($vars, $theme);

               return $vars;
        }
}
    I hope you've some developer experience otherwise this will take a long time here ;)
     
    Learn Plugin section to use elgg-plugin.php.
     
    I also recommend that you dig into someone else's code to get examples from there.
     
    Good point start is ColdTrick's repos.
     
    We also have Telegram channel @elggnews and group @elggchat
  • Tweenkle
    Tweenkle

    Dear Nikolai,

    Many thanks for your message and the links you provided.

    This was really helpful and after several attempts, I finally succeed with the extend method.

    I have another question :

    How can I replace the text logo by an image logo ?

    Thanks again.

    Have a nice day.

    Thierry 

  • Nikolai Shcherbin
    Nikolai Shcherbin

    The links below are for previous Elgg versions but should work for the current release as well:

    https://elgg.org/discussion/view/2804746/logo-in-default-theme-in-all-stable-elgg-version

    https://elgg.org/discussion/view/2849336/how-to-change-the-logo-from-text-to-image

  • Nikolai Shcherbin
    Nikolai Shcherbin

    I forgot to mention that the easiest way to extend engine/theme.php is to use a hook in elgg_plugin.php instead of class:

    'theme' => [
     'body-background-color' => '#000',
     'anchor-color' => '#000000',
],
Theme Development

Theme Development

Navigation

Contact

info@elgg.org

Security issues should be reported to security@elgg.org!

Legal

©2014 the Elgg Foundation

Elgg is a registered trademark of Thematic Networks.

Cover image by Raül Utrera is used under Creative Commons license.

Icons by Flaticon and FontAwesome.