Custom Index Layout

Hi,

I want to override the view of my elgg just for the custom index. There I want to set:

.elgg-page-default .elgg-page-body>.elgg-inner {
    width: 100%;
}

But on all other pages the default width should be set. Can someone tell me how to do that?

Cheerz

  • Use a plugin hook to add a body class when in context front:

    if (elgg_in_context('front')){
        elgg_register_plugin_hook_handler('output:before', 'page', 'my_body_attrs');
    }

    function my_body_attrs($hook, $type, $value, $params) {
        
        $value['body_attrs'] = array('class' => 'elgg-front-page');  
        return $value;
    }

    .elgg-front-page .elgg-page-default .elgg-page-body>.elgg-inner {
        width: 100%;
    }

     

  • Thank you Per. Sorry that I have to ask more precisely as I am pretty much of a beginner.

    Let's say I modify the custom_index plugin for example. Then I have to put

    if (elgg_in_context('front')){
        elgg_register_plugin_hook_handler('output:before', 'page', 'my_body_attrs');
    }

    function my_body_attrs($hook, $type, $value, $params) {
        
        $value['body_attrs'] = array('class' => 'elgg-front-page');  
        return $value;
    }

    into custom_index/views/default/page/layouts/custom_index.php

     

    The css style comes into my css file. But I will have to set the context somewhere then. Like this?

    $context = elgg-front-page; 

  • You should not edit Elgg or bundled plugins. Instead, you must add a custom plugin to contain all your changes, like the one you are about to make. You can download a plugin skeleton here: elgg_child_theme.

    Plugin custom index does set the context, so don't worry about that - elgg_push_context('front').

    You shouldn't check for context in the init function, so in your custom plugin add an event handler and add the context check there:

    elgg_register_event_handler('pagesetup', 'system', 'my_pagesetup');

    function my_pagesetup() {
        
        if (!elgg_is_logged_in() && elgg_in_context('front')){
            elgg_register_plugin_hook_handler('output:before', 'page', 'my_body_attrs');
        }

    Add the rest mentioned previously. The class .elgg-front-page will be added to the <body> tag, you can name it anything you like.

    Keep the custom plugin at the bottom of the plugin list.