Log in

Adding a footer image using css

TCB
By TCB

Hi,

I'm using Elgg 2.3.14 and trying to do something that should be pretty simple.  I'd like to add an image as a backround for my site's footer.  I've uploaded the image to my /mod/my-plugin/graphics directory and in my start.php I've added:

elgg_extend_view('elgg.css', 'my-plugin/myFooter.css', 1000);

underneath all of my other extend_view functions in the init() method.  I've added my css file to /mod/my-plugin/views/default/my-plugin/myFooter.css. In the myFooter.css file I've added the style:

.elgg-page-footer {
    background-image: url("path-to-my-image.png");
}​

I've tested that the image loads at https://www.w3schools.com/cssref/pr_background-image.asp just to validate the reference path is correct.  I've also flushed my cache's from the admin panel but the images still won't load in the background.  I've viewed other similar threads in this forum such as https://elgg.org/discussion/view/2452742/footer-modifications but still not having any luck.  Anyone have any ideas what I'm missing?

  • Nikolai Shcherbin
    Nikolai Shcherbin

    Create a new file views.php:

    <?php

   return [
      'default' => [
          'images/' => __DIR__ . '/graphics',
      ],
];
     
    Put it in your plugin:
    /mod/my-plugin/views.php
    Change your myFooter.css on this:
    .elgg-page-footer {
    background: url(<?= elgg_get_simplecache_url("images/my-image.png"); ?>);
}
    Clean the caches.
     
    In future, you can use this snippet elgg_get_simplecache_url("images/name.jpg"); to call any images from your directory /mod/my-plugin/graphics
     
  • TCB
    TCB

    Thank you.. I shall give this a try. One question I need to verify is. where should my 'myFooter.css' be located in my directory structure for my plugin?

  • TCB
    TCB

    I believe it should be at /my-plugin/views/default/my-plugin/myFooter.css but still not working.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking

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.